待翻译：Show HN: Front end skill pack for AI agents, with machine-enforced quality gates

AI 服务暂时不可用，以下为来源正文，待恢复后补全翻译。

AI frontend skill pack Change what your agent reaches for. Registry-routed. Machine-enforced. Anti-slop by default — a request loads exactly one of 19 skills, and everything it writes is held to 60 checks before it ships. Get the skill packSee how it works Scroll to explore 01 — The problem A pack is not a document. Behind the router sits 371,905 tokens of reference depth — material every skill can point into, none of it loaded until a request routes there. The pack is not handed to an agent whole: a router matches your request against trigger keywords, opens exactly one of 19 skills plus the core files it declares, and everything else stays on disk. what most agents ship A faster way to build better. Try it today. typelayoutmotion what this pack asks for instead A route, a budget, a check — before a line ships. routebudgetcheck 0Always-loaded registry, tokens 0Reference depth on disk, tokens 0Skills — one loads per request 0Machine-checked constraints 02 — How it works Spec first. Constrain always. Generate once. A Trigger keywords match intent The router reads your prompt, matches it against every skill's trigger keywords, and loads exactly one — the most specific match — plus the core files it declares. No match, and it asks a clarifying question instead of guessing. Try it below. B Constraints run first What gets written is held to 60 machine-checked constraints (17 AST + 43 regex) — the first half walked through the TypeScript compiler API, the second run as patterns. Ten deliberate anti-examples exist to prove the checks actually fire. C Lazy-loaded, type-safe output One skill plus its declared dependencies — nothing else opens. A typical request loads a few thousand tokens against the full depth available, and every shipped example compiles under tsc --strict. Type a request below. This runs the real registry — not a lookalike written for the page. frontend-design-pro.dev/router What are you asking your agent to build? Try landing-pagesone skill · most specific wins Heroes, pricing, testimonials, bento grids, logo walls, comparison tables, FAQ, CTAs, footers — plus empty states and onboarding narrowing the cost371,905 What loads registrySKILL.md skillskills/landing-pages/SKILL.md corecore/accessibility-baseline.md corecore/design-tokens.md corecore/validate-checklist.md What it costs 5,999 tokens — 1.6% of the depth available this request 5,999 of 371,905 Matched on these triggers landingpricingtestimonials 03 — The wall 60 checks catch the defaults agents keep reaching for. No Inter/Roboto/Poppins as a display face No raw hex — OKLCH tokens only No min-h-screen No transition-all No bounce or elastic easing No placeholder brand names No John Doe, no user123 No 'Elevate your workflow' copy No bg-clip-text on body copy No outline-none without a focus ring Icon-only buttons need aria-label prefers-reduced-motion is mandatory No Inter/Roboto/Poppins as a display face No raw hex — OKLCH tokens only No min-h-screen No transition-all No bounce or elastic easing No placeholder brand names No John Doe, no user123 No 'Elevate your workflow' copy No bg-clip-text on body copy No outline-none without a focus ring Icon-only buttons need aria-label prefers-reduced-motion is mandatory Semantic constraints17 Walked through the TypeScript compiler API rather than matched as text — the eight rules a regex cannot see without understanding the tree it's reading. Pattern constraints43 Run as regular expressions over source. Faster to check, and the half this page's own checker below can run in your browser. No placeholder anything Acme, John Doe, user123, $99.99, 'Elevate your workflow' — the defaults an agent reaches for when nothing else is specified. No dated easing No bounce, elastic or back easing on an entrance. No transition: all. Reduced motion is functional, not a string mention. No default typefaces Inter, Roboto, Arial, Poppins, DM Sans, Space Grotesk are banned as a display face — fine in a fallback stack, never carrying identity. No min-h-screen 100vh ignores the mobile toolbar. min-h-[100dvh] is the only accepted form, checked by pattern on every shipped example. Paste a component. Both snippets below are cross-checked against scripts/test_constraints.py in both directions before this ships. frontend-design-pro.dev/wall Edit it — the checks re-run as you type 13checks fail of 15 running here DELAY-01high No artificial mount-time loading delay — drive skeletons from real async. useEffect(() => { setTimeout(() => setLoading(false) TYP-02high No banned display face as the sole font — allowed only as a fallback. fontFamily: "Inter" TYP-03high No gradient text on body copy — the computed colour is transparent, so contrast cannot be measured. text-sm bg-clip-text COL-04high No arbitrary hex colour in component code — OKLCH tokens only. [#0F1419] TOK-01high No hex value inside a CSS token definition. --color-brand: #7C3AED RES-03high No min-h-screen — 100vh ignores the mobile toolbar; use min-h-[100dvh]. min-h-screen SLOP-01high No placeholder names or stock values. John Doe SLOP-02high No AI-generic marketing copy. Elevate SLOP-03medium No placeholder comments — the output must be complete. // TODO SLOP-05high No placeholder brand names — invent one that fits the sector. Acme COPY-02medium Progress copy takes the ellipsis character, not three dots. Loading... PERF-04Rmedium No transition-all — name the properties that animate. transition-all A11Y-06critical outline-none must be paired with a visible focus ring. outline-none 15 of the 43 regex checks run here. The rest need a compiler or a filesystem: the other half of the suite walks a TypeScript AST, and eight page-scoped rules are deliberately excluded because they are right about a screen and wrong about a fragment pasted into a text box. Their IDs are absent here rather than approximated. what the rest of the pack produces Landing page Dashboard KINETIC Kinetic type Accessible form 3D hero Color theme Install in one command Tracks the default branch. For the gated, version-stamped archive instead: gh release download --repo Krishna-Modi12/frontend-design-pro --pattern '*.skill' $npx skills add Krishna-Modi12/frontend-design-pro Adapters this ships for AGENTS.md Aider ChatGPT Claude Code Cline Codex Continue GitHub Copilot Cursor Gemini CLI Generic (AGENTS.md-style) Roo Windsurf Zed View on GitHubRead the docs © 2026 frontend-design-pro · MIT licensed RepositoryReleasesReport a defect