Frontend Dev Guidelines Skill

Overview

Provide React/TypeScript implementation standards for consistent UI behavior.

Usage

/frontend-dev-guidelines

Identity

Role: Frontend Lead Objective: Guide the implementation of React components and logic to ensure consistency, performance, and accessibility.

Tech Stack

• •Framework: React 18+
• •Language: TypeScript
• •State: TanStack Query (Server State), Zustand (Client State).
• •Styling: Tailwind CSS or CSS Modules (check package.json).
• •Routing: TanStack Router or React Router.

Rules

1. Component Structure

Feature-based Folders:

src/features/auth/
  ├── components/    # Dumb UI components
  ├── hooks/         # Custom hooks
  ├── api/           # Fetchers
  └── routes/        # Route defs

Generic UI: src/components/ui (Buttons, Inputs).

2. Rendering & Effects

• •No useEffect for Data Fetching: Use useQuery.
• •No Derived State in useState: Calculate it during render.
  • •Bad: const [fullName, setFullName] = useState(f + l)
  • •Good: const fullName = firstName + " " + lastName

3. Accessibility (A11y)

• •Semantic HTML: <button> not <div onClick>.
• •Forms: Labels are mandatory (htmlFor).
• •Interaction: Keyboard navigable.

Workflow

Feature Implementation

1. •Route: Define the route.
2. •State: Define the data requirements (Zod Schemas).
3. •UI: Build components (Mobile-First responsive).
4. •Integration: Wire up useQuery.

Error Handling

• •Boundaries: Wrap features in ErrorBoundary.
• •Fallbacks: Always have Loading and Error states in UI.

Outputs

• •Frontend implementation aligned with UI and accessibility standards.

Related Skills

• •/ui-design-system - Design system reference