DELAY-01high
No artificial mount-time loading delay — drive skeletons from real async.
useEffect(() => {
setTimeout(() => setLoading(false)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.
Scroll to explore01 — The problem
A pack is not a document.
Behind the router sits 372,212 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.
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.
ATrigger keywords match intent
Matched by keyword, not guessed
Trigger keywords match intent
Matched by keyword, not guessed
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.
BConstraints run first
Checked before it ships
Constraints run first
Checked before it ships
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.
CLazy-loaded, type-safe output
Only what's needed loads
Lazy-loaded, type-safe output
Only what's needed loads
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.
frontend-design-pro.dev/router
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 cost372,212
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 372,212
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
Semantic constraints17
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
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
No placeholder defaults, ever
No placeholder anything
No placeholder defaults, ever
Acme, John Doe, user123, $99.99, 'Elevate your workflow' — the defaults an agent reaches for when nothing else is specified.
No dated easing
Motion stays calm, not bouncy
No dated easing
Motion stays calm, not bouncy
No bounce, elastic or back easing on an entrance. No transition: all. Reduced motion is functional, not a string mention.
No default typefaces
No default typefaces allowed
No default typefaces
No default typefaces allowed
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
Viewport units that actually fit
No min-h-screen
Viewport units that actually fit
100vh ignores the mobile toolbar. min-h-[100dvh] is the only accepted form, checked by pattern on every shipped example.
frontend-design-pro.dev/wall
13checks fail of 15 running here
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-textCOL-04high
No arbitrary hex colour in component code — OKLCH tokens only.
[#0F1419]TOK-01high
No hex value inside a CSS token definition.
--color-brand: #7C3AEDRES-03high
No min-h-screen — 100vh ignores the mobile toolbar; use min-h-[100dvh].
min-h-screenSLOP-01high
No placeholder names or stock values.
John DoeSLOP-02high
No AI-generic marketing copy.
ElevateSLOP-03medium
No placeholder comments — the output must be complete.
// TODOSLOP-05high
No placeholder brand names — invent one that fits the sector.
AcmeCOPY-02medium
Progress copy takes the ellipsis character, not three dots.
Loading...PERF-04Rmedium
No transition-all — name the properties that animate.
transition-allA11Y-06critical
outline-none must be paired with a visible focus ring.
outline-none15 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 type
Accessible form
3D hero
Color theme
Install in one command
npx skills add Krishna-Modi12/frontend-design-proPrefer a pinned release?
Tracks the default branch. For the gated, version-stamped archive instead: gh release download --repo Krishna-Modi12/frontend-design-pro --pattern '*.skill'
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
© 2026 frontend-design-pro · MIT licensed