frontend-patterns_skill

Overview

This skill captures a pragmatic frontend patterns checklist and review workflow for building accessible, performant React UIs. It enforces component-first thinking, user-flow-first design, and clear state handling. Use cc10x-router for all development tasks and follow the iron law: don’t design UI before the user flow is mapped.

How this skill works

The skill inspects component architecture, responsive styling, state management, loading/error/empty states, accessibility checks, and performance considerations. It outputs a component deliverable checklist, a loading-state decision tree, and review templates that guide code, tests, and UX fixes. It prioritizes working code examples and enforces the correct state order: error → loading (no data) → empty → success.

When to use it

• When building or reviewing React components and pages
• When defining loading, error, and empty states for data-driven UIs
• During UX and accessibility reviews to validate WCAG 2.1 AA criteria
• When establishing performance budgets and lazy-loading strategies
• When standardizing component props, styling, and test scaffolding

Best practices

• Start with a mapped user flow before any visual design
• Follow component-first, mobile-first, and type-safe patterns (TypeScript where applicable)
• Handle states in this order: error → loading (no data) → empty → success
• Prefer semantic HTML + ARIA for accessibility and ensure keyboard focus order
• Ship working code with usage examples, unit test stubs, and an accessibility checklist
• Use cc10x-router for routing and task coordination across development

Example use cases

• Implementing a paginated item list with skeletons for known shapes and spinner for unknown actions
• Reviewing a signup flow: map user steps, verify inline validation, and confirm focus management
• Converting a legacy component to a reusable TypeScript component with Tailwind styling and tests
• Auditing a page for WCAG issues: keyboard access, labels, contrast, and screen reader output
• Designing error handling hierarchy: inline errors, toasts, banners, and full error screens