spec-to-ui 0.1.0 → 0.2.0

package/skills/ui-ux-pro-max/scripts/tests/test_style_taxonomy.py

@@ -0,0 +1,175 @@
+#!/usr/bin/env python3
+"""Regression tests for the public style taxonomy and search contract."""
+
+import csv
+import json
+import statistics
+import sys
+import unittest
+from pathlib import Path
+
+SCRIPTS_DIR = Path(__file__).resolve().parent.parent
+DATA_DIR = SCRIPTS_DIR.parent / "data"
+sys.path.insert(0, str(SCRIPTS_DIR))
+
+from core import search  # noqa: E402
+from design_system import _style_is_dark_primary  # noqa: E402
+
+
+def read_rows(name):
+    with (DATA_DIR / name).open(encoding="utf-8", newline="") as handle:
+        return list(csv.DictReader(handle))
+
+
+class TestStyleTaxonomy(unittest.TestCase):
+    @classmethod
+    def setUpClass(cls):
+        cls.styles = read_rows("styles.csv")
+        cls.by_id = {row["Style ID"]: row for row in cls.styles}
+
+    def test_curated_state_distribution_is_explicit(self):
+        counts = {
+            status: sum(row["Status"] == status for row in self.styles)
+            for status in ("active", "supplemental", "deprecated")
+        }
+        self.assertEqual(
+            {"active": 50, "supplemental": 29, "deprecated": 9}, counts
+        )
+
+    def test_every_style_name_and_alias_has_a_deterministic_destination(self):
+        for row in self.styles:
+            queries = [row["Style Category"]]
+            queries.extend(alias for alias in row["Aliases"].split("|") if alias)
+            for query in queries:
+                with self.subTest(style=row["Style ID"], query=query):
+                    result = search(query, max_results=1)
+                    if (row["Status"] == "deprecated"
+                            and row["Replacement Domain"] == "landing"):
+                        self.assertEqual(0, result["count"])
+                        self.assertEqual(
+                            {
+                                "domain": row["Replacement Domain"],
+                                "id": row["Replacement ID"],
+                            },
+                            result.get("redirect"),
+                        )
+                    else:
+                        expected_id = (
+                            row["Replacement ID"]
+                            if row["Status"] == "deprecated"
+                            else row["Style ID"]
+                        )
+                        self.assertEqual(expected_id, result["results"][0]["Style ID"])
+
+    def test_deprecated_rows_never_appear_in_generic_results(self):
+        for query in ("modern interface", "marketing page", "trust design"):
+            with self.subTest(query=query):
+                result = search(query, domain="style", max_results=20)
+                self.assertLessEqual(
+                    {row["Status"] for row in result["results"]}, {"active"}
+                )
+
+    def test_style_arbitration_does_not_steal_product_intent(self):
+        result = search("design a financial dashboard for my bank", max_results=1)
+        self.assertEqual("product", result["domain"])
+
+    def test_family_variants_and_mobile_intent_remain_distinct(self):
+        expected_parents = {
+            "gradient-mesh-aurora-evolved": "aurora-ui",
+            "swiss-modernism-2-0": "minimalism-and-swiss-style",
+            "neumorphism-mobile": "neumorphism",
+            "claymorphism-mobile": "claymorphism",
+            "spectrum-2": "spectrum-design-system",
+        }
+        for style_id, parent_id in expected_parents.items():
+            with self.subTest(style=style_id):
+                row = self.by_id[style_id]
+                self.assertEqual(parent_id, row["Parent Style ID"])
+                self.assertIn(row["Status"], {"supplemental", "deprecated"})
+
+        self.assertEqual("style", self.by_id["bento-grids"]["Replacement Domain"])
+        self.assertEqual(
+            "bento-box-grid", self.by_id["bento-grids"]["Replacement ID"]
+        )
+
+        self.assertEqual(
+            "neumorphism-mobile",
+            search("Neumorphism (Mobile)", "style", 1)["results"][0]["Style ID"],
+        )
+        self.assertEqual(
+            "claymorphism-mobile",
+            search("Claymorphism (Mobile)", "style", 1)["results"][0]["Style ID"],
+        )
+        self.assertEqual(
+            "material-you-md3-mobile",
+            search("M3 Expressive", "style", 1)["results"][0]["Style ID"],
+        )
+        self.assertEqual(
+            "neumorphism-mobile",
+            search("mobile neumorphism UI", "style", 1)["results"][0]["Style ID"],
+        )
+        self.assertEqual(
+            "claymorphism-mobile",
+            search("mobile app with claymorphism", "style", 1)["results"][0]["Style ID"],
+        )
+        self.assertEqual(
+            "spectrum-2",
+            search("design system for Spectrum 2", "style", 1)["results"][0]["Style ID"],
+        )
+
+    def test_claim_fields_use_controlled_non_guarantee_language(self):
+        allowed_performance = {"cost:low", "cost:moderate", "cost:high"}
+        allowed_accessibility = {"risk:low", "risk:conditional", "risk:high"}
+        allowed_mode = {"supported", "conditional", "not-recommended"}
+        for row in self.styles:
+            with self.subTest(style=row["Style ID"]):
+                self.assertIn(row["Performance"].split("|", 1)[0], allowed_performance)
+                self.assertIn(row["Accessibility"].split("|", 1)[0], allowed_accessibility)
+                self.assertIn(row["Light Mode ✓"], allowed_mode)
+                self.assertIn(row["Dark Mode ✓"], allowed_mode)
+                self.assertIn(row["Preferred Mode"], {"auto", "light", "dark"})
+                claim_text = " ".join(row.values())
+                self.assertNotRegex(claim_text, r"(?i)\bWCAG\s+A{2,3}\+?\b")
+                self.assertNotRegex(
+                    claim_text,
+                    r"(?i)\bWCAG\b.{0,40}\b(?:compliant|compliance)\b",
+                )
+                self.assertNotRegex(row["Framework Compatibility"], r"\d+/10")
+
+        self.assertTrue(_style_is_dark_primary(self.by_id["dark-mode-oled"]))
+        self.assertFalse(
+            _style_is_dark_primary(self.by_id["minimalism-and-swiss-style"])
+        )
+
+    def test_searchable_prompt_lengths_are_balanced(self):
+        lengths_by_type = {}
+        for row in self.styles:
+            length = len(row["AI Prompt Keywords"].split())
+            self.assertLessEqual(length, 40, row["Style ID"])
+            lengths_by_type.setdefault(row["Type"], []).append(length)
+        general_median = statistics.median(lengths_by_type["General"])
+        mobile_median = statistics.median(lengths_by_type["Mobile"])
+        self.assertLessEqual(mobile_median, general_median * 1.6)
+
+    def test_new_rows_have_first_party_provenance(self):
+        payload = json.loads(
+            (DATA_DIR / "data-provenance.json").read_text(encoding="utf-8")
+        )
+        records = {
+            record["entityId"]: record
+            for record in payload["records"]
+            if record["entityKind"] == "style"
+        }
+        new_rows = [row for row in self.styles if int(row["No"]) > 85]
+        self.assertGreaterEqual(len(new_rows), 4)
+        for row in new_rows:
+            with self.subTest(style=row["Style ID"]):
+                record = records[row["Style ID"]]
+                self.assertTrue(record["sources"])
+                self.assertTrue(
+                    any(source["type"] == "official" for source in record["sources"])
+                )
+
+
+if __name__ == "__main__":
+    unittest.main(verbosity=2)

package/skills/ui-ux-pro-max/scripts/tests/test_text_layout_resilience.py

@@ -0,0 +1,120 @@
+#!/usr/bin/env python3
+"""Canonical regression contracts for resilient UI text layouts."""
+
+import csv
+import sys
+import unittest
+from pathlib import Path
+
+SCRIPTS_DIR = Path(__file__).resolve().parent.parent
+DATA_DIR = SCRIPTS_DIR.parent / "data"
+sys.path.insert(0, str(SCRIPTS_DIR))
+
+from core import search, search_stack  # noqa: E402
+
+
+def read_rows(relative_path):
+    with (DATA_DIR / relative_path).open(encoding="utf-8", newline="") as handle:
+        return list(csv.DictReader(handle))
+
+
+UX_PHRASES = {
+    "Heading Line Balance": ("progressive visual heuristic", "natural-wrap fallback"),
+    "Long Token Wrapping": ("overflow-wrap anywhere", "text children shrink"),
+    "Text Reflow and Spacing": ("narrow widths zoom", "content-driven height"),
+    "Essential Text Truncation": ("complete access", "visible full-detail path"),
+    "Compact Label Semantics": ("badges communicate state", "meaning and ownership"),
+    "Chip Collection Reflow": ("filter chips", "operable +n disclosure"),
+    "Compact Label Overflow": ("stay whole on one line", "keyboard pointer and touch"),
+    "Compact Control Semantics": ("native role", "pressed or selected state"),
+    "Contextual Live Badge Updates": ("meaningful contextual status", "atomic status"),
+    "Cancellable State Transitions": ("interrupt an in-flight transition", "final semantic state"),
+}
+
+TAILWIND_PHRASES = {
+    "Balanced heading wrapping": ("text-balance", "natural wrapping fallback"),
+    "Long token resilience": ("wrap-anywhere", "min-w-0"),
+    "Compact label layout": ("flex flex-wrap gap-2", "whitespace-nowrap", "shrink-0"),
+}
+
+
+class TestTextLayoutRetrieval(unittest.TestCase):
+    def test_locked_queries_return_the_canonical_identity_first(self):
+        cases = (
+            ("orphan heading line balance", "Heading Line Balance"),
+            ("long url token breaks layout", "Long Token Wrapping"),
+            ("badge chip label wraps to second line", "Compact Label Overflow"),
+            ("filter chip collection reflow hidden values", "Chip Collection Reflow"),
+            ("live badge count screen reader", "Contextual Live Badge Updates"),
+            ("rapid chip animation interrupted", "Cancellable State Transitions"),
+        )
+        for query, expected in cases:
+            with self.subTest(query=query):
+                result = search(query, domain="ux", max_results=3, diagnostics=True)
+                actual = [row.get("Issue") for row in result["results"]]
+                self.assertTrue(actual, result.get("diagnostics"))
+                self.assertEqual(expected, actual[0], f"ranking={actual!r}")
+
+    def test_tailwind_query_returns_compact_label_layout_first(self):
+        result = search_stack(
+            "chip badge overflow nowrap", "html-tailwind",
+            max_results=3, diagnostics=True,
+        )
+        actual = [row.get("Guideline") for row in result["results"]]
+        self.assertTrue(actual, result.get("diagnostics"))
+        self.assertEqual("Compact label layout", actual[0], f"ranking={actual!r}")
+
+
+class TestTextLayoutDataContracts(unittest.TestCase):
+    @classmethod
+    def setUpClass(cls):
+        cls.ux = read_rows("ux-guidelines.csv")
+        cls.tailwind = read_rows("stacks/html-tailwind.csv")
+
+    def test_new_ux_rows_are_unique_sequential_and_keep_critical_guidance(self):
+        matches = [row for row in self.ux if row["Issue"] in UX_PHRASES]
+        self.assertEqual(len(UX_PHRASES), len(matches))
+        self.assertEqual(len(matches), len({row["Issue"] for row in matches}))
+        self.assertEqual(list(range(110, 120)), [int(row["No"]) for row in matches])
+        for row in matches:
+            with self.subTest(issue=row["Issue"]):
+                text = " ".join(row.values()).casefold()
+                for phrase in UX_PHRASES[row["Issue"]]:
+                    self.assertIn(phrase.casefold(), text)
+                self.assertIn(row["Severity"], {"Medium", "High", "Critical"})
+
+    def test_new_tailwind_rows_are_unique_current_and_keep_required_utilities(self):
+        matches = [row for row in self.tailwind if row["Guideline"] in TAILWIND_PHRASES]
+        self.assertEqual(len(TAILWIND_PHRASES), len(matches))
+        self.assertEqual(len(matches), len({row["Guideline"] for row in matches}))
+        self.assertEqual([57, 58, 59], [int(row["No"]) for row in matches])
+        for row in matches:
+            with self.subTest(guideline=row["Guideline"]):
+                text = " ".join(row.values()).casefold()
+                for phrase in TAILWIND_PHRASES[row["Guideline"]]:
+                    self.assertIn(phrase.casefold(), text)
+                self.assertEqual("active", row["Status"])
+                self.assertEqual("html-tailwind 4.3", row["Applies To"])
+                self.assertEqual("2026-08-13", row["Verified At"])
+
+    def test_refined_rows_are_context_sensitive_not_universal_recipes(self):
+        expected = {
+            "8": ("depends on distance complexity platform", "shared motion tokens"),
+            "14": ("match how an element changes speed", "linear for constant-rate progress"),
+            "19": ("badges validation text", "stable content-driven container"),
+            "78": ("avoid flashing for near-instant work", "platform and component guidance"),
+        }
+        forbidden = ("use 150-300ms", "operations > 300ms", "linear motion feels robotic")
+        by_number = {row["No"]: row for row in self.ux}
+        for number, phrases in expected.items():
+            with self.subTest(row=number):
+                row = by_number[number]
+                guidance = " ".join((row["Description"], row["Do"])).casefold()
+                for phrase in phrases:
+                    self.assertIn(phrase, guidance)
+                for claim in forbidden:
+                    self.assertNotIn(claim, guidance)
+
+
+if __name__ == "__main__":
+    unittest.main()

package/skills/ui-ux-pro-max/scripts/tests/test_web_stack_freshness.py

@@ -0,0 +1,191 @@
+#!/usr/bin/env python3
+"""Freshness and generation-isolation contracts for web stack guidance."""
+
+import csv
+import sys
+import unittest
+from pathlib import Path
+from urllib.parse import urlsplit
+
+SCRIPTS_DIR = Path(__file__).resolve().parents[1]
+if str(SCRIPTS_DIR) not in sys.path:
+    sys.path.insert(0, str(SCRIPTS_DIR))
+
+from core import DATA_DIR, STACK_CONFIG, WEB_STACKS, search_stack  # noqa: E402
+from validate_data import STACK_OFFICIAL_HOSTS  # noqa: E402
+
+CURRENT_APPLICABILITY = {
+    "react": "react 19.2.x",
+    "nextjs": "nextjs 16.2",
+    "vue": "vue 3.5.x",
+    "svelte": "svelte 5",
+    "astro": "astro 7.1.6",
+    "angular": "angular 22.x",
+    "html-tailwind": "html-tailwind 4.3",
+    "shadcn": "shadcn cli 4",
+    "nuxtjs": "nuxtjs 4.5",
+    "nuxt-ui": "nuxt-ui 4.12.0",
+}
+
+
+def _rows(stack):
+    path = DATA_DIR / STACK_CONFIG[stack]["file"]
+    with path.open(encoding="utf-8", newline="") as handle:
+        return list(csv.DictReader(handle))
+
+
+class TestWebStackFreshness(unittest.TestCase):
+    def test_web_rows_have_explicit_freshness_metadata(self):
+        for stack in WEB_STACKS:
+            for row in _rows(stack):
+                with self.subTest(stack=stack, row=row["No"]):
+                    self.assertIn(row["Status"], {"active", "deprecated"})
+                    self.assertTrue(row["Applies To"].startswith(stack))
+                    self.assertRegex(row["Verified At"], r"^\d{4}-\d{2}-\d{2}$")
+                    self.assertEqual(
+                        "legacy" in row["Applies To"].casefold(),
+                        row["Status"] == "deprecated",
+                    )
+
+    def test_high_impact_rows_use_official_sources(self):
+        for stack in WEB_STACKS:
+            for row in _rows(stack):
+                if row["Severity"] not in {"Critical", "High"}:
+                    continue
+                with self.subTest(stack=stack, row=row["No"]):
+                    parsed = urlsplit(row["Docs URL"])
+                    self.assertEqual(parsed.scheme, "https")
+                    self.assertIn(parsed.hostname, STACK_OFFICIAL_HOSTS[stack])
+
+    def test_active_rows_use_the_verified_current_applicability(self):
+        for stack, applicability in CURRENT_APPLICABILITY.items():
+            for row in _rows(stack):
+                if row["Status"] != "active":
+                    continue
+                with self.subTest(stack=stack, row=row["No"]):
+                    self.assertTrue(row["Applies To"].startswith(applicability))
+
+    def test_svelte_current_and_legacy_queries_do_not_mix_generations(self):
+        current = search_stack("Svelte state props and events", "svelte")
+        legacy = search_stack("Svelte 4 legacy props and events", "svelte")
+        self.assertGreater(current["count"], 0)
+        self.assertGreater(legacy["count"], 0)
+        self.assertEqual({row["Status"] for row in current["results"]}, {"active"})
+        self.assertEqual({row["Status"] for row in legacy["results"]}, {"deprecated"})
+        self.assertTrue(all("legacy" in row["Applies To"] for row in legacy["results"]))
+
+    def test_explicit_old_major_uses_only_curated_legacy_rows(self):
+        cases = {
+            "nextjs": "Next.js 15 middleware auth matcher",
+            "html-tailwind": "Tailwind 3 JIT content configuration",
+            "nuxtjs": "Nuxt 3 app config runtime config migration",
+        }
+        for stack, query in cases.items():
+            with self.subTest(stack=stack):
+                result = search_stack(query, stack)
+                self.assertGreater(result["count"], 0)
+                self.assertEqual(
+                    {row["Status"] for row in result["results"]}, {"deprecated"}
+                )
+
+    def test_current_major_migration_query_stays_on_current_guidance(self):
+        result = search_stack("Next.js 16 migration to proxy", "nextjs")
+        self.assertGreater(result["count"], 0)
+        self.assertEqual({row["Status"] for row in result["results"]}, {"active"})
+
+    def test_shadcn_named_base_excludes_incompatible_composition_apis(self):
+        result = search_stack("shadcn Base UI asChild composition", "shadcn")
+        self.assertGreater(result["count"], 0)
+        self.assertEqual(result["results"][0]["Guideline"],
+                         "Use render for Base UI composition")
+        self.assertTrue(all("base=radix" not in row["Applies To"]
+                            for row in result["results"]))
+
+    def test_common_old_major_syntaxes_select_legacy_guidance(self):
+        cases = {
+            "svelte": "svelte@4 props events",
+            "nextjs": "Next.js (v15) middleware",
+            "html-tailwind": "tailwindcss@3 JIT",
+            "nuxtjs": "nuxt@3 app config",
+        }
+        for stack, query in cases.items():
+            with self.subTest(stack=stack, query=query):
+                result = search_stack(query, stack)
+                self.assertGreater(result["count"], 0)
+                self.assertEqual(
+                    {row["Status"] for row in result["results"]}, {"deprecated"}
+                )
+
+    def test_number_starting_a_word_is_not_a_version(self):
+        cases = {
+            "react": "react 3d canvas effect cleanup",
+            "html-tailwind": "tailwind 2xl breakpoint",
+            "angular": "angular 2fa login form",
+        }
+        for stack, query in cases.items():
+            with self.subTest(stack=stack, query=query):
+                result = search_stack(query, stack)
+                self.assertGreater(result["count"], 0)
+                self.assertNotIn(
+                    "deprecated", {row["Status"] for row in result["results"]}
+                )
+
+    def test_old_major_without_curated_legacy_guidance_abstains(self):
+        result = search_stack("Astro 5 content collections", "astro")
+        self.assertEqual(result["count"], 0)
+        self.assertEqual(result["results"], [])
+
+    def test_current_high_drift_queries_return_current_contracts(self):
+        cases = {
+            ("nextjs", "Next.js 16 request interception proxy"): "proxy",
+            ("html-tailwind", "Tailwind 4 CSS-first source detection"): "source",
+            ("react", "React Effect Event latest values inside an Effect"): "effect event",
+        }
+        for (stack, query), expected in cases.items():
+            with self.subTest(stack=stack):
+                result = search_stack(query, stack, max_results=1)
+                self.assertEqual(result["count"], 1)
+                row = result["results"][0]
+                self.assertEqual(row["Status"], "active")
+                self.assertIn(expected, row["Guideline"].casefold())
+
+    def test_stack_without_curated_legacy_rows_keeps_nonlegacy_fallback(self):
+        result = search_stack(
+            "which Windows UI framework should a new app choose instead of legacy UWP",
+            "uwp",
+        )
+        self.assertGreater(result["count"], 0)
+
+    def test_stale_apis_are_not_recommended_by_active_rows(self):
+        forbidden = {
+            "svelte": ("$: ", "export let ", "on:click", "createeventdispatcher"),
+            "nextjs": ("middleware.ts", "function middleware", "skipmiddleware"),
+            "html-tailwind": (
+                "content: [", "mode: 'jit'", "@tailwindcss/aspect-ratio",
+                "tailwindcss-container-queries",
+            ),
+            "nuxt-ui": ("#cell-status", "sortable: true", "v-model:content"),
+            "astro": (
+                "output: 'hybrid'", "viewtransitions", "@astrojs/tailwind",
+                "astro add prefetch",
+            ),
+        }
+        for stack, tokens in forbidden.items():
+            for row in _rows(stack):
+                if row["Status"] != "active":
+                    continue
+                recommended = " ".join(
+                    row[field] for field in ("Guideline", "Do", "Code Good")
+                ).casefold()
+                for token in tokens:
+                    with self.subTest(stack=stack, row=row["No"], token=token):
+                        self.assertNotIn(token, recommended)
+
+        self.assertNotIn(
+            "fetch(url {", _rows("nextjs")[12]["Code Good"].casefold()
+        )
+        self.assertNotIn("catch(e) {}", _rows("react")[39]["Code Good"].casefold())
+
+
+if __name__ == "__main__":
+    unittest.main()