react

Files (4)

• SKILL.md
• advanced-patterns.md · references/
• component-patterns.md · references/
• design-tokens.md · references/

SKILL.md (first lines)

# Frontend Development

Build and maintain frontend applications across React, React Native, and Flutter.

## When to Use

Use this skill when you need to:
- Build or modify React, React Native, or Flutter features
- Translate Figma/wireframes into production UI
- Implement state management, routing, and API integration
- Improve frontend architecture, performance, and testability

## Core Workflow

1. Gather design and product inputs
   - Figma specs, wireframes, user journeys, acceptance criteria
2. Select platform stack and architecture
   - React: React Router + TanStack Query + Zustand/Context
   - React Native: React Navigation + platform-specific patterns
   - Flutter: Riverpod + GoRouter + Dio + Freezed
3. Implement feature incrementally
   - Types/models -> API client -> state -> UI components -> screens
4. Add quality gates
   - Accessibility, error/loading states, responsive behavior, tests
5. Validate end-to-end
   - Unit/component tests and integration flow checks

## Design-to-Code Requirements

- Convert design tokens before component implementation
- Keep components reusable and composable
- Match interaction states from designs (hover/focus/disabled/loading/error)
- Preserve spacing, typography, color, and elevation consistency

## Architecture Expectations

- Keep domain logic outside UI components
- Prefer small, focused components and hooks
- Centralize API and error handling
- Keep navigation and route guards explicit
- Use typed models and request/response contracts

## Testing Expectations

- Test user-visible behavior first
- Cover happy path, empty states, validation, and failures
- Mock external APIs and unstable dependencies
- Keep tests deterministic and maintainable

## References

- [Design tokens and design-to-code patterns](references/design-tokens.md)
- [Component, state, and routing patterns](references/component-patterns.md)
- [Performance, testing, and delivery guidance](references/advanced-patterns.md)

From x1chg956/sdlc-skills, Apache-2.0.

More from x1chg956/sdlc-skills