frontendlisted

# Frontend Discipline (stack-agnostic) <!-- routing-eval reads this line; it lives in the BODY so the always-on skill LISTING stays inside Claude Code's budget (1% of the context window) — an overflowing listing gets descriptions truncated or dropped, which strips the very keywords a match depends on. --> Trigger phrases: "frontend", "screen", "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 lang