Skills & Commands

Claude — not connected

Skills & Commands

The agentic framework that powers every build. Enabled skills are injected into the LLM prompt as hard rules, so generated code stays consistent. This is what makes the orchestrator spec-driven rather than a plain wrapper.

Skills.md — reusable rule sets

Component Generation

Build

Create reusable, typed React components.

  • Use functional components with hooks only — no class components.
  • Every component must have an explicit props type/interface, never inline generics.
  • Prefer named exports for components.
  • Keep components focused; split when a file exceeds ~150 lines.

Page Creation

Build

Compose full pages and layouts from components.

  • Build pages by composing small components, not one monolith.
  • Include a sensible empty, loading, and error state for any data-driven page.
  • Use semantic landmarks: <header>, <main>, <nav>, <footer>.

Form Handling

Build

Accessible, validated forms with clear feedback.

  • Associate every input with a <label> via htmlFor/id.
  • Validate on submit and surface errors with aria-describedby.
  • Disable the submit button while submitting and show progress.
  • Never block paste on password fields.

Routing

Build

Navigation and route structure.

  • Use the framework's native routing (Next.js App Router / React Router).
  • Keep route components thin — delegate logic to hooks.
  • Always provide a visible active-route indication in navigation.

State Management

Build

Predictable local and shared state.

  • Prefer local state and props; lift state only when genuinely shared.
  • Use useReducer for complex multi-field state instead of many useStates.
  • Derive values during render rather than storing duplicated state.

Styling

Build

Consistent, token-driven styling.

  • Use Tailwind utility classes; no inline hardcoded hex colors.
  • Respect spacing scale — avoid arbitrary pixel values where a token exists.
  • Ensure interactive elements have hover, focus-visible, and disabled states.

Accessibility Checks

Quality

WCAG-minded, keyboard-first UI.

  • All interactive elements must be reachable and operable by keyboard.
  • Provide aria-label or visible text for icon-only buttons.
  • Maintain color contrast of at least 4.5:1 for body text.
  • Use button for actions and a for navigation — never a div with onClick.

Performance Optimization

Quality

Avoid common render and bundle pitfalls.

  • Provide stable keys for list items (never the array index for dynamic lists).
  • Memoize expensive computed values and stable callbacks where it matters.
  • Avoid large inline literals re-created on every render.
  • Lazy-load heavy, below-the-fold components.

Test Generation

Quality

Ship tests alongside every component.

  • Generate a test file for each component using React Testing Library.
  • Cover render, primary interaction, and at least one edge/error case.
  • Query by accessible role/label, not by test-id where possible.

Commands.md — slash shortcuts

/component

Generate Component

Create a single typed, styled, tested React component.

/page

Create Page

Compose a full page from smaller components.

/form

Build Form

Accessible, validated form with submit handling.

/test

Write Tests

Generate tests for the produced components.

/a11y

Accessibility Pass

Apply and verify accessibility rules.

/refactor

Refactor

Clean up structure without changing behavior.

Agents.md — the orchestrator pipeline

Step 1

Planner Agent

Reads the spec and breaks it into an ordered list of concrete frontend tasks.

In: Raw spec text

Out: Task breakdown

Step 2

Builder Agent

Generates the React component and page code for each task following enabled Skills.

In: Task breakdown + Skills rules

Out: Component & page files

Step 3

Tester Agent

Produces React Testing Library tests for every generated component.

In: Generated files

Out: Test files

Step 4

Reviewer Agent

Runs lint, accessibility, and performance heuristics over the output and reports findings.

In: Generated files + tests

Out: Quality report