frontend

Field	Value
Type	Skill
Source	~/.copilot/skills/frontend/SKILL.md
Description	Front door for the whole frontend surface — senior React 19 engineering (Server Components, use(), useActionState, Suspense, state location), design-system component authoring for @dmwd-io/design-system (Props JSDoc, CVA, nine UI states), Storybook (CSF3 setup, argTypes/controls, sidebar hierarchy via meta.title), TanStack Router (file routes, Zod search params, loaders, beforeLoad auth), Zod schema architecture (contracts package, branded IDs, discriminated unions, OpenAPI), React performance auditing (Lighthouse, react-scan, bundle budgets), frontend aesthetic direction (named style, type pairing, motion), and Astro (output mode, hydration, content collections, project scaffolding). Trigger on “build a React component”, “new design-system component”, “write a story”, “storybook argTypes”, “move this story”, “tanstack router”, “file-based routes”, “zod schema”, “contracts package”, “app is slow”, “performance audit”, “design a landing page”, “make it look designed”, “astro app”, “client:load”, “scaffold astro”. Does NOT cover CSS mechanics/tokens (design skill), backend/API contracts (backend skill), or test strategy (quality skill).

Bundled Pages

Group	Name	Source
References	Astro — Architecture and Scaffolding	~/.copilot/skills/frontend/references/astro.md
References	Design System — Component Authoring	~/.copilot/skills/frontend/references/ds-component.md
References	Frontend Aesthetic Design Direction	~/.copilot/skills/frontend/references/frontend-design.md
References	React / Senior Frontend Engineering	~/.copilot/skills/frontend/references/react.md
References	React Performance Auditing	~/.copilot/skills/frontend/references/react-perf.md
References	Storybook — CSF3, Controls, Hierarchy	~/.copilot/skills/frontend/references/storybook.md
References	TanStack Router	~/.copilot/skills/frontend/references/tanstack-router.md
References	Zod Schema Architecture	~/.copilot/skills/frontend/references/zod-schemas.md
Resources	Lints	~/.copilot/skills/frontend/lints.toml
Scripts	Check	~/.copilot/skills/frontend/scripts/check.sh
Scripts	Check_astro	~/.copilot/skills/frontend/scripts/check_astro.sh
Scripts	Check_controls	~/.copilot/skills/frontend/scripts/check_controls.sh
Scripts	Check_csf3	~/.copilot/skills/frontend/scripts/check_csf3.sh
Scripts	Check_frontend	~/.copilot/skills/frontend/scripts/check_frontend.sh
Scripts	Check_frontend_design	~/.copilot/skills/frontend/scripts/check_frontend_design.py
Scripts	Check_hierarchy	~/.copilot/skills/frontend/scripts/check_hierarchy.sh
Scripts	Check_perf_report	~/.copilot/skills/frontend/scripts/check_perf_report.sh
Scripts	Check_routes	~/.copilot/skills/frontend/scripts/check_routes.sh
Scripts	Check_schema_boundary	~/.copilot/skills/frontend/scripts/check_schema_boundary.sh
Scripts	Lint	~/.copilot/skills/frontend/scripts/lint.py
Scripts	Lint_ds_component	~/.copilot/skills/frontend/scripts/lint_ds_component.sh
Scripts	Scaffold	~/.copilot/skills/frontend/scripts/scaffold.sh
Scripts	Senior_frontend_bundle_analyzer	~/.copilot/skills/frontend/scripts/senior_frontend_bundle_analyzer.py
Scripts	Senior_frontend_component_generator	~/.copilot/skills/frontend/scripts/senior_frontend_component_generator.py
Scripts	Senior_frontend_scaffolder	~/.copilot/skills/frontend/scripts/senior_frontend_scaffolder.py
Scripts	Verify_scaffold	~/.copilot/skills/frontend/scripts/verify_scaffold.sh
Templates Astro Starter	Astro.config	~/.copilot/skills/frontend/templates/astro-starter/astro.config.mjs
Templates Astro Starter	Biome	~/.copilot/skills/frontend/templates/astro-starter/biome.json
Templates Astro Starter	Taskfile	~/.copilot/skills/frontend/templates/astro-starter/Taskfile.yml
Templates Astro Starter	Tsconfig	~/.copilot/skills/frontend/templates/astro-starter/tsconfig.json
Templates Astro Starter Src Content	Config	~/.copilot/skills/frontend/templates/astro-starter/src/content/config.ts
Templates Oxlint	Local React	~/.copilot/skills/frontend/templates/oxlint/local-react.js

Source Content

Frontend

Domain	The whole frontend surface — React, design-system components, Storybook, routing, schemas, performance, visual design, Astro
Role	Senior frontend engineer + component author + Storybook steward + performance auditor + design-direction lead
Output	Typed, tested, accessible, lint-clean frontend code — components, stories, routes, schemas, perf fixes, Astro apps

This skill absorbed 11 former skills: senior-frontend, ds-component, storybook-csf3, storybook-controls, storybook-hierarchy, tanstack-router-architect, zod-schema-architect, react-perf-auditor, frontend-design, astro-architect, create-astro-project. Their rules live in this skill’s references/; nothing invokes them separately.

Route by task

You’re…	Read	Gate with
Building a React component/hook/feature, deciding state location	references/react.md	scripts/check_frontend.sh
Building or documenting a @dmwd-io/design-system component	references/ds-component.md	scripts/lint_ds_component.sh
Writing a Storybook story (CSF3), wiring argTypes/controls, or moving a story in the sidebar	references/storybook.md	scripts/check_csf3.sh + scripts/check_controls.sh + scripts/check_hierarchy.sh
Setting up TanStack Router — file routes, search params, loaders, auth	references/tanstack-router.md	scripts/check_routes.sh
Designing Zod schemas as the single source of truth (types, OpenAPI, forms, env)	references/zod-schemas.md	scripts/check_schema_boundary.sh
Auditing or fixing React performance (Web Vitals, bundle, re-renders)	references/react-perf.md	scripts/check_perf_report.sh
Directing visual/aesthetic design for a page or surface	references/frontend-design.md	scripts/check_frontend_design.py
Architecting an Astro app (output mode, hydration, content collections)	references/astro.md (Part 1)	scripts/check_astro.sh
Scaffolding a brand-new Astro project	references/astro.md (Parts 2–3)	scripts/verify_scaffold.sh
Validating a mixed frontend change (any of the above)	—	scripts/check.sh <path> — detects what’s present and fans out

References load lazily — a single component edit never pays for the Astro or perf-audit material. scripts/check.sh inspects the target path, detects which surfaces are present (.stories.tsx, routes/, design-system component paths, Zod schema files, .astro/astro.config.*, general .ts/.tsx), and runs only the matching checks — missing external tools degrade a single check to a warning, never a crash.

House rules (non-negotiable)

1. State lives in the right place. Filter/sort/page state goes in the URL (TanStack Router search params), not useState. Server data goes through TanStack Query, not raw fetch in a component or loader.
2. Typed end-to-end, no escape hatches. No any, no unjustified as, tsc --noEmit clean. Zod schemas are the single source of truth for a shape — never a parallel hand-written TS interface next to a schema.
3. Icon-text layout is always a CSS grid (ADR-009). Leading/trailing icon rows use grid grid-cols-[auto_1fr] or grid-cols-[auto_1fr_auto], never flex-col. See references/ds-component.md.
4. One neutral border per local stack (ADR-008). A child never re-adds border border-border when its parent already has one.
5. Moving a Storybook story means editing meta.title, never moving the file. See references/storybook.md Part 3.
6. Every design-system component ships all nine UI states (default, variant sweep, size sweep, with-icon, disabled, loading, error, empty, success) and a sibling .stories.tsx.
7. Memoization requires evidence. React.memo/useMemo/useCallback follow a profiler trace, not a default habit — see references/react-perf.md.
8. Astro ships near-zero JS by default. Every client:* directive is the least eager one that still works; no blanket client:load.
9. Colors, radius, and typography are always semantic tokens (ADR-001, ADR-002, ADR-003, ADR-006) — never raw hex, palette numbers, or web fonts, in components or in aesthetic direction work.

Use me for

• New React 19 components, hooks, features; Server Component vs Client Component calls.
• @dmwd-io/design-system component authoring, including Props/JSDoc/CVA/Storybook shape.
• Storybook story setup, argTypes/controls wiring, and sidebar hierarchy moves.
• TanStack Router route trees, search-param schemas, loaders, auth gating.
• Zod schema design as the cross-cutting source of truth for types and validation.
• React performance audits with measured before/after numbers and a CI budget.
• Named-aesthetic frontend visual design (landing pages, heroes, dashboards, posters).
• Astro architecture decisions and new-project scaffolding.

Don’t use me for

• CSS mechanics, Tailwind/BEM split, design tokens themselves → design skill (absorbs css, design-principles, ui-design-system).
• API contract shape, versioning, backend services → backend skill.
• Test strategy and layer choice beyond component-level testing → quality skill.
• Kubernetes/Helm/CI for deploying a frontend app → platform skill.
• ADRs themselves (this skill cites them, doesn’t author them) → adr skill.

How I work

1. Identify the surface. Component, story, route, schema, perf question, aesthetic brief, or Astro app — pick the routing-table row.
2. Read the matching reference. Don’t front-load references the task doesn’t touch.
3. Implement following that reference’s house rules and patterns.
4. Validate with the matching script(s), or run scripts/check.sh <path> for a mixed change.
5. Report what was built/fixed and what the validation run showed — numbers for perf work, exit codes for lint/type checks.

Self-rubric

• The right reference file was consulted for the surface touched — not guessed from memory.
• No any/unjustified as; tsc --noEmit clean.
• Semantic tokens only for color/radius/typography; no raw hex, palette classes, or web fonts.
• Icon rows use CSS grid (ADR-009); no doubled borders (ADR-008).
• Design-system components: JSDoc on every prop, CVA for variants, sibling .stories.tsx, nine UI states.
• Storybook moves touched only meta.title — no file moves, no import changes.
• Router: every search param has a Zod schema with .catch(); loaders go through TanStack Query; auth is in beforeLoad.
• Perf claims are numbers (ms/KB/count), not vibes; a CI budget guards the win.
• Astro: output mode justified per page; no blanket client:load.
• Validation script(s) for the touched surface(s) exit 0 — or scripts/check.sh <path> exits 0 for a mixed change.

Validate

scripts/lint.py FILE [FILE ...] (or --git-changed) reads lints.toml and dispatches to whichever registered check matches — adding one is a config append. Repo-scoped checks (check_frontend.sh, check_astro.sh, check_routes.sh) and the two-arg check_controls.sh stay standalone entrypoints (see lints.toml’s header comment for why).

References

• references/react.md — senior React 19 engineering: state location, hooks, testing, a11y, TypeScript patterns, Tailwind/CVA, project structure, security, composition patterns, performance patterns, error boundaries, anti-patterns, SSR/RSC rendering strategies.
• references/ds-component.md — @dmwd-io/design-system component file structure, Props/JSDoc pattern, CVA variants, icon-grid layout, token rules, accessibility checklist, Storybook story shape, nine UI states, pre-commit gates.
• references/storybook.md — CSF3 story setup, controls/argTypes configuration, sidebar hierarchy via meta.title.
• references/tanstack-router.md — file-based routes, Zod-validated search params, loaders sharing TanStack Query, beforeLoad auth gates, typed <Link>.
• references/zod-schemas.md — Zod as single source of truth: branded IDs, discriminated unions, boundary-only validation, OpenAPI generation, form/env wiring.
• references/react-perf.md — Lighthouse/react-scan/bundle-analysis audit workflow, quick wins, CI perf budget.
• references/frontend-design.md — named aesthetic directions, type pairing, color anchoring, motion, the design-direction workflow.
• references/astro.md — output-mode and hydration architecture (Part 1), one-command project scaffolding (Part 2), scaffold internals and version pinning (Part 3).
• scripts/check.sh — the dispatcher entrypoint; detects the frontend surface present under a target path and fans out to the matching checks below.
• scripts/check_frontend.sh — oxlint/eslint + tsc --noEmit wrapper for general React/TS work.
• scripts/lint_ds_component.sh — design-system component house-rule checker.
• scripts/check_csf3.sh / scripts/check_controls.sh / scripts/check_hierarchy.sh — Storybook CSF3 shape, argTypes coverage, and meta.title hierarchy checks.
• scripts/check_routes.sh — confirms every route file uses createFileRoute and has a loader where needed.
• scripts/check_schema_boundary.sh — confirms every <Entity>Schema has a matching z.infer export and no stray z.any().
• scripts/check_perf_report.sh — validates a perf report has real before/after numbers and any referenced CI budget file exists.
• scripts/check_frontend_design.py — flags banned generic fonts and missing motion/interaction detail.
• scripts/check_astro.sh — astro check wrapper plus hydration/content-schema heuristics.
• scripts/scaffold.sh / scripts/verify_scaffold.sh — the Astro project scaffolder and its required-file verifier.
• templates/astro-starter/ — the verbatim Astro 5 starter files (​.npmrc, astro.config.mjs, tsconfig.json, biome.json, Taskfile.yml, src/content/config.ts).
• templates/oxlint/ — the bundled oxlint config and custom JS plugin rule used by scripts/check_frontend.sh. </content>