Frontend

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//) — 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.
• crew-review-agent 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.

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: crewforth
• Source: crewforth/crewforth
• License: MIT
• Homepage: https://crewforth.com/

Install and usage instructions live in the source repository linked above.