frontend implements production client code for websites (including art-directed and creative marketing sites), web apps, dense product UI, and native iOS and Android. Component and state architecture, full state sets, forms, accessibility, performance, client security, and the tests that guard the work — as a faceted router over 27 dense references that load only the job, platform, and stack each request needs.
runs onClaude CodeCodexCursorAntigravityopencodeGrok BuildHermes
A faceted router, not a dump of generic frontend tips. Name the engineering job, pick the surface (web, iOS, Android, Expo/RN), optionally name the stack — then read only those files completely before writing code. The same skill covers creative websites and product UI; unrelated craft never enters the context.
Native overrides web. A SwiftUI screen never loads web-platform CSS rules. An uncovered stack (Vue, Svelte, Astro, …) still gets the core job + platform substrate; project conventions win.
Exactly one core task: state-and-data, forms,
performance, client-security, client-app-wiring, …
Web by default (web-platform-css + runtime). Or SwiftUI /
Compose / Expo RN — mandatory when the target is native. Expo is the default RN path.
React, Next, Tailwind, shadcn — only when the project actually uses them. Skip for uncovered stacks.
forms
platform web
stack Next.js
concerns a11y testing
forms.mdaccessibility.mdweb-platform-runtime.mdnextjs.mdreact-components-and-state.mdtesting.md
6 of 27 references loaded — the forms job, the web runtime substrate, the Next.js React overlay, and the accessibility + testing concerns. The other 21, including every native and sibling-stack file, stay closed.
Cookie-cutter “component library tips” are not the point. These are the hard-earned client domains the pack carries at production depth — for sites and apps, not UI kits alone:
imagesrcset preload +
fetchpriority, Early Hints limits, compositor paint traps (blur / will-change /
shadow), content-visibility + retained size, idle prefetch composition.expo/skills + docs.expo.dev for deep dives.Creative websites, product web apps, dense UI, and pure native — same completion laws. Platform overlays swap the substrate so web advice never leaks into native — and native never pretends to be a browser.
frontend is the Build stage of the
Digital Product Skills family — the
capability that turns an approved design or engineering request into shipped client code. It
consumes a design handoff as the source of truth and hands off to
quality and operate downstream. It also runs standalone with no upstream
handoff, and never invokes another skill silently.
architecture (system decisions, API/event contracts) and backend
(server behavior, databases, server APIs) sit alongside Build and feed it — but SSR/RSC runtime
inside the client framework and the client build config stay inside frontend.
Wires the tokens into a two-mode system, builds every state and meets the accessibility floors
as specified, and holds design intent as a constraint — implementing faithfully and
reporting conflicts rather than silently re-deciding. The
design-handoff-and-tokens.md reference owns accepting this contract.
Sharp boundaries with the neighbors — what each owns, plus the two things people expect to live elsewhere but stay in frontend:
Universal invariants — they apply even when the owning reference is not open.
accessibility.md numbers, don’t redefine them.The router’s primary-job table — load one of these, then add platform/stack only if needed.
| I need to… | Read |
|---|---|
| State machines, fetch/cache, optimistic updates, client auth-flow shape | state-and-data.md |
| Every UI/data state — loading, empty, error, recovery, undo | state-completeness.md |
| Forms — validation timing, submit, input types, errors | forms.md |
| ARIA, focus, keyboard, contrast/target floors | accessibility.md |
| CWV, images/fonts, preload, compositor cost, virtualization | performance.md |
| Token storage, XSS, CSP, CSRF, credentialed fetch | client-security.md |
| SPA shell — API client, 401 single-flight, multi-tab session, flags | client-app-wiring.md |
| Tests + screenshot dev-loop self-check | testing.md |
| i18n — logical props, Intl, RTL, expansion | i18n.md |
| Consume handoff.yaml / DESIGN.md tokens | design-handoff-and-tokens.md |
| Feature folders, import zones, section registries | client-architecture.md |
Platform + stack overlays and declared bundles: SKILL.md.
design;
system APIs in architecture/backend; release audits in
quality; deploy in operate. This skill owns the production client
— implementing websites, web apps, and native surfaces from an approved design or engineering
request — and hands off cleanly to the
Digital Product Skills family.27 references, grouped by facet. The router loads the smallest set — never all of them.
state-and-data.md
state-completeness.md
forms.md
accessibility.md
performance.md
client-security.md
client-app-wiring.md
testing.md
i18n.md
design-handoff-and-tokens.md
client-architecture.md
web-platform-css.md
web-platform-runtime.md
css-craft.md
js-dom-craft.md
swiftui.md
swift-concurrency-and-testing.md
compose.md
kotlin-and-compose-state.md
react-native.md— Expo-first
react-components-and-state.md
react-rendering-and-rsc.md
nextjs.md
data-fetching-libraries.md
tailwind.md
shadcn.md
SOURCES.md— provenance for every mined techniqueInstall once. No flags or config — it activates on engineering phrasing or explicit
/frontend / $frontend.
| host | install target | command |
|---|---|---|
| Claude Code | ~/.claude/skills | ./install.sh claude |
| Codex | ${CODEX_HOME:-$HOME/.codex}/skills | ./install.sh codex |
| Cross-agent | ~/.agents/skills | ./install.sh agents |
| Cursor | ~/.cursor/skills | ./install.sh cursor |
| Antigravity | ~/.gemini/…/skills | ./install.sh antigravity |
| opencode | ~/.config/opencode/skills | ./install.sh opencode |
| Grok Build | ~/.grok/skills | ./install.sh grok |
| Hermes | ~/.hermes/skills | ./install.sh hermes |
installation · usage · recipes · digital-product-skill family