New frontend project:
  /init-project → /setup-configs [react|vue]
  → generates CLAUDE.md + tsconfig + vite.config + biome.json
  → fill .claude/conventions/ (ui-library, icons, api-layer, routing, etc.)
    ⚠ Without this step AI uses template defaults and generates wrong imports/patterns.
    See Quick Start § "CRITICAL STEP — fill in .claude/conventions/" for details.

  # Example:
  # /init-project          → detects: React 18.3 + Vite 5 + Zustand + TanStack Query
  # /setup-configs react   → writes: tsconfig.json, vite.config.ts, biome.json, package.json scripts

Integrating a backend service:
  Step 0 (recommended): open the backend repo and run /init-project
    → generates CLAUDE.md in the backend repo with project-specific context
    → gives /be-repo-scout better understanding of the codebase structure

  /be-repo-scout
  → outputs: TypeScript interfaces, Zod schemas, error const map, local dev setup
  → works with: OpenAPI/Swagger, Protobuf/gRPC, GraphQL, undocumented code (greps handlers)

  If OpenAPI spec or Protobuf found:
    → /api-bind [react|vue] reads spec (or §2+§7 from report) → typed client + TanStack Query hook

  If no spec at all:
    → /api-bind [react|vue] can still use be-repo-scout report (§7 TS types) as input
    → generates typed client + hook from excavated interfaces

  # Example:
  # /be-repo-scout ../payments-service
  #   → audit/be-repo-scout-report_payments-service.md (§7: ChargeRequest, ChargeResponse, PaymentError)
  # /api-bind react ./openapi.json POST /api/payments/charge
  #   → src/features/payments/api/paymentsTypes.ts + paymentsApi.ts + useChargePayment.ts

Auditing an existing frontend codebase (standalone):
  /fe-repo-scout
  → output: CRITICAL/HIGH/MEDIUM findings + prioritized fix plan

  # Example:
  # /fe-repo-scout → found: 3 CRITICAL, 7 HIGH, 12 MEDIUM findings
  #   CRITICAL: raw fetch in 4 components (missing error/loading states)

Auditing frontend + known backend (cross-layer analysis):
  /be-repo-scout → /fe-repo-scout
  → fe-repo-scout reads be-repo-scout output: detects missing error handlers, type mismatches,
    unhandled [UNDOCUMENTED] validation rules
  → output: CRITICAL/HIGH/MEDIUM findings + prioritized fix plan

figma:implement-design  ─┐
                         ├──► /component-gen [react|vue] ComponentName     ← 4 async states
/spec-audit (optional) ──┘    /component-gen [react|vue] Name --design    ← + design thinking
                              /component-gen [react|vue] Icon --quick     ← simple element
                              /component-gen [react|vue] --into Page.tsx  ← inject markup
→ /browser-check                                                ← AI visual check (optional)
→ /api-bind [react|vue]                                         ← OpenAPI, Protobuf, or be-repo-scout report
→ /component-tests [react|vue]                                  ← Vitest tests + a11y audit
→ /refactor [react|vue] <transform>                             ← codemod / migration (optional)
→ /e2e-tests                                                    ← critical paths (optional)
→ /pr

/be-repo-scout                                      ← excavate API contracts from backend code

Input mode 1 — OpenAPI spec:
→ /api-bind react ./openapi.json GET /api/users
  # Output: src/features/users/api/usersTypes.ts + usersApi.ts + useUsers.ts
  # GET → useQuery hook (auto-cached, background refetch)

→ /api-bind vue ./openapi.json POST /api/orders
  # Output: src/features/orders/api/ordersTypes.ts + ordersApi.ts + useCreateOrder.ts
  # POST → useMutation hook (optimistic update, error rollback)

Input mode 2 — Protobuf:
→ /api-bind react ./proto/user.proto UserService.GetUser
  # Output: src/features/users/api/usersTypes.ts + usersApi.ts + useGetUser.ts

Input mode 3 — no spec (be-repo-scout fallback):
→ /api-bind react
  # Reads be-repo-scout report §7 TS interfaces → generates typed client + hook

/spec-audit spec.md                          ← (pre-dev) deep QA audit of UI/UX spec: states, a11y, data gaps
→ /component-tests react UserCard              ← feature component: tests all 4 async states + a11y audit
  /component-tests vue ProductList --type ui   ← UI component: tests prop variants + interactions
→ /e2e-tests "user adds item to cart and checks out" --auth --mock
  # → tests/e2e/cart-checkout.spec.ts + CartPage.ts (Page Object)
→ /browser-check http://localhost:5173/cart    ← quick visual sanity check (no files written)
→ /react-doctor | /vue-doctor                  ← framework health check (0-100 score + diagnostics)
→ /frontend-code-review                        ← PR diff review: security, architecture, anti-patterns
→ /web-vitals                                  ← Core Web Vitals + bundle budget audit
→ /ui-tweak                                    ← visual annotation → targeted code fix

# Gaps (no skill yet): coverage report analysis

/init-project                              ← scan repo → generate project-specific CLAUDE.md
→ /fe-repo-scout                           ← map architecture, conventions, antipatterns found
→ fill .claude/conventions/ stubs          ← add team conventions: icons, UI library, API layer, routing
→ /component-gen [react|vue] NextFeature   ← generate next feature with correct project context

# Example — adding AI to an existing Vue 3 dashboard:
# /init-project        → detects: Vue 3.4 + Pinia + Vite 5 + Element Plus + Vue Router 4
# /fe-repo-scout       → found: 2 CRITICAL (raw fetch, missing error states), 5 HIGH, 9 MEDIUM
# fill conventions:
#   ui-library.md → Element Plus, import from "element-plus"
#   icons.md      → @element-plus/icons-vue
#   api-layer.md  → axios + /src/services/http.ts wrapper, Bearer token
#   routing.md    → Vue Router 4, lazy routes via defineAsyncComponent
# /component-gen vue AnalyticsDashboard
#   → src/features/analytics/ui/AnalyticsDashboard.vue (uses Element Plus + Pinia, not template defaults)

/skill-audit .claude/skills/{skill-name}/SKILL.md   ← baseline: detect bloat, duplication, harmful patterns
→ run the skill on a real task                       ← observe output quality in practice
→ edit SKILL.md based on findings                    ← tighten instructions, add missing states, fix Loop Guard
→ /skill-audit .claude/skills/{skill-name}/SKILL.md ← re-audit: confirm score improved, no regressions

# Example — tightening /component-gen after noticing it skips empty states:
# 1. /skill-audit .claude/skills/component-gen/SKILL.md → score: 72/100, finding: "empty state not enforced"
# 2. /component-gen react OrderList → output missing empty state (confirms the gap)
# 3. Edit SKILL.md: add "MUST include EmptyState component when data array can be []" to Phase 3
# 4. /component-gen react OrderList → now generates <EmptyState> with illustration + CTA
# 5. /skill-audit .claude/skills/component-gen/SKILL.md → score: 88/100, no regressions

/init-skill   ← interactive 7-phase wizard: purpose → structure → YAML header → SKILL.md body → validate

# Alternative: Anthropic community skill-creator (framework-agnostic, works in any IDE)
# https://github.com/anthropics/skills/tree/main/skills/skill-creator
# Recommended when starting from scratch or building non-frontend skills.
# After generation, run /skill-audit to apply project-specific Tier 1 baseline checks.

# Example — creating a /storybook-gen skill:
# /init-skill
#   Phase 1 — Purpose: "Generate Storybook stories (.stories.tsx) for existing components"
#   Phase 2 — Structure: context: fork, auto-invoke: false, references: react-patterns.md
#   Phase 3 — YAML header: name: storybook-gen, description: ..., framework: react|vue
#   Phase 4 — SKILL.md body: Phase 1 scan component props → Phase 2 generate stories → Phase 3 validate
#   Phase 5 — Validate: ✅ no bloat, no hallucinated imports, YAML parses clean
# → .claude/skills/storybook-gen/SKILL.md created
# /skill-audit .claude/skills/storybook-gen/SKILL.md → score: 85/100, ready for use

Human annotates UI element in browser (via Agentation component)
  → /ui-tweak
    → fetch annotations → locate source file → apply fix → type check + lint → resolve
    → watch mode: repeat until user interrupt or 30min timeout

# Example — designer flags button padding issue:
# Designer clicks "Submit" button in browser → annotates: "padding too small, hard to tap on mobile"
# /ui-tweak
#   → fetches annotation → locates src/shared/ui/Button.tsx:42
#   → changes: className="px-3 py-1.5" → className="px-4 py-2.5 min-h-[44px]"
#   → tsc --noEmit ✓, biome check ✓ → resolves annotation
# /ui-tweak watch
#   → live loop: fixes annotations as designer flags them (30min timeout)

/refactor react class-to-hooks --scope "src/features/**"    ← class → hooks
/refactor vue options-to-composition                         ← Options API → Composition API
/refactor react tanstack-v4-to-v5 --dry-run                 ← preview TanStack v5 migration
/refactor react custom "replace axios with ky"               ← AI-driven custom transform

/component-gen react   →  generates .tsx with React hooks
/component-gen vue     →  generates .vue SFC with Composition API