Frontend Discipline (stack-agnostic)
Trigger phrases: "frontend", "screen size", "component", "page", "UI", "state management", "interface"
Web (React/Next/Vue/Svelte/Angular), mobile (React Native/Flutter) or desktop — shared principles.
The stack-specific "how" (native bridge, router choice, etc.) lives in the relevant project skill; this skill applies to all of them.
Architecture
- Presentation / logic separation: component/view is pure and thin; business logic lives in the hook/composable/service layer.
- Reusability: repeated UI is factored out; the prop contract is clear and typed.
- Folder: feature-based (
features/<name>/) — view, logic, and test together.
State & data
- Local state first (
useState/signal); if global is needed, the project's choice (store/context) — nothing imposed.
- Data fetching: cache + error + loading states are considered; race/abort are handled.
State-complete UI (design it from the start)
Every data-bound view covers four states: loading · empty · error · full.
Don't code only the "full" case; empty/error/loading are part of the experience.
i18n & accessibility (default, not decoration)
- User-visible text comes from the language file (project languages); no hard-coded strings (
i18n-integrity).
- Meaningful labels/roles, sufficient contrast, keyboard/screen-reader access, appropriate touch/click target.
Visual & UX quality
This skill covers structure; the visual/UX design layer — hierarchy, spacing rhythm, typographic scale, a
restrained color system, and polished states — lives in frontend-design. Apply it when the work is about how the
interface looks and feels, not just how it's wired.
Responsive & performance
- Works across the target screen/device matrix (responsive/adaptive).
- Unnecessary renders (memo/callback), bundle size, lazy loading, virtualization for long lists.
Verify at runtime (contract)
Prove a change works by observing the running UI, structured — not by interpreting a screenshot. Have components
emit data-verify-* state attributes, register verifiable units with fixtures + invariants (≥1 adversarial probe
each), expose window.__verify, and adopt the PASS/FAIL/BLOCKED/SKIP taxonomy (when in doubt, FAIL). Then drive
the browser to check it. The full convention: references/verify-contract.md.
DoD (this skill's contribution)
/simplify; no dead styles/unused props.- The four states are covered;
i18n-integrity clean; accessibility passes the baseline matrix.
review-agent-csk clean.
Constraints
- Surgical change; follow existing conventions, do not impose a stack/preference.
- Do not present data the platform does not provide as if it existed; do not promise a capability that isn't there.
- §4 applies: no AI trace or vendor template name in code/comments/strings.
1---2name: frontend3description: Stack-agnostic frontend discipline (web · mobile · desktop): component structure, state, data fetching, loading/empty/error states, i18n, accessibility, performance. frontend-expert-csk applies it on every stack.4---56# Frontend Discipline (stack-agnostic)78<!-- routing-eval reads this line; it lives in the BODY so the always-on skill LISTING stays inside9 Claude Code's budget (1% of the context window) — an overflowing listing gets descriptions10 truncated or dropped, which strips the very keywords a match depends on. -->11Trigger phrases: "frontend", "screen size", "component", "page", "UI", "state management", "interface"1213Web (React/Next/Vue/Svelte/Angular), mobile (React Native/Flutter) or desktop — shared principles.14The stack-specific "how" (native bridge, router choice, etc.) lives in the relevant project skill; this skill applies to all of them.1516## Architecture17- **Presentation / logic separation:** component/view is pure and thin; business logic lives in the hook/composable/service layer.18- **Reusability:** repeated UI is factored out; the prop contract is clear and typed.19- **Folder:** feature-based (`features/<name>/`) — view, logic, and test together.2021## State & data22- **Local state first** (`useState`/signal); if global is needed, the project's choice (store/context) — nothing imposed.23- **Data fetching:** cache + error + loading states are considered; race/abort are handled.2425## State-complete UI (design it from the start)26Every data-bound view covers **four states**: **loading · empty · error · full**.27Don't code only the "full" case; empty/error/loading are part of the experience.2829## i18n & accessibility (default, not decoration)30- User-visible text comes from the language file (project languages); no hard-coded strings (`i18n-integrity`).31- Meaningful labels/roles, sufficient contrast, keyboard/screen-reader access, appropriate touch/click target.3233## Visual & UX quality34This skill covers *structure*; the **visual/UX design layer** — hierarchy, spacing rhythm, typographic scale, a35restrained color system, and polished states — lives in **`frontend-design`**. Apply it when the work is about how the36interface *looks and feels*, not just how it's wired.3738## Responsive & performance39- Works across the target screen/device matrix (responsive/adaptive).40- Unnecessary renders (memo/callback), bundle size, lazy loading, virtualization for long lists.4142## Verify at runtime (contract)43Prove a change works by **observing the running UI**, structured — not by interpreting a screenshot. Have components44emit `data-verify-*` state attributes, register verifiable units with fixtures + invariants (≥1 adversarial `probe`45each), expose `window.__verify`, and adopt the `PASS/FAIL/BLOCKED/SKIP` taxonomy (when in doubt, FAIL). Then drive46the browser to check it. The full convention: **`references/verify-contract.md`**.4748## DoD (this skill's contribution)49- `/simplify`; no dead styles/unused props.50- The four states are covered; `i18n-integrity` clean; accessibility passes the baseline matrix.51- `review-agent-csk` clean.5253## Constraints54- Surgical change; follow existing conventions, do not impose a stack/preference.55- Do not present data the platform does not provide as if it existed; do not promise a capability that isn't there.56- §4 applies: no AI trace or vendor template name in code/comments/strings.
byerlikaya