frontend-craft

Front-end problem diagnosis and repair: covering build failures, runtime errors, UI exceptions, and interface problems, using a unified diagnostic framework to classify problems by type.

Sync README, docs, environment variables, scripts, API/routing/component descriptions and deployment instructions from code and project sources of truth.

Initialize frontend-craft project template, rules or downgrade instructions according to the current AI runtime.

Unified front-end planning entrance - implementation/architecture plan or testing strategy. The implementation path is taken by default; when the user clearly wants test plan, coverage matrix, test layering, risk-to-test, etc., the complete test strategy is output.

Identify and clean up front-end dead code, unused exports, outdated components, styles and dependencies under validation protection.

Use this subagent when the task involves page splitting, component architecture, state flow design, catalog planning, data flow design, module boundary demarcation, or large front-end refactoring. Save the architecture proposal report as a Markdown file.

Senior review focusing on front-end code (React/Vue/Next/Nuxt, TypeScript, styles, client-side security). Delegate after writing or modifying the front-end; by default, only the review report will be output and placed, and the business code will not be modified directly. Press CRITICAL→LOW to check, control noise and merge similar problems, and write the report into reports. Suitable for independent code review combined with git diff.

Front-end diagnostic and repair subagent: Handle build failures, runtime errors, UI exceptions, and interface issues using a unified 5-step diagnostic framework. Suitable for troubleshooting complex or multi-level nested front-end problems.

Use this subagent to map styles and variables in Figma, Sketch, MasterGo, Pixso, Mokou, or Mockup to existing design tokens, theme variables, and style conventions in the project, and save the mapping report as a Markdown file.

Front-end warehouse document synchronization subagent: synchronizes README, runtime docs, project structure, capability tables, and report descriptions from fact sources such as package.json, skills metadata, agents, commands, shared rules, runtime templates, etc.

Use when reviewing or improving frontend accessibility, semantic structure, keyboard support, focus management, ARIA labels, screen reader behavior, WCAG 2.2 issues, touch accessibility, or assistive-technology regressions; Chinese triggers include accessibility, accessibility, a11y, WCAG, screen reader.

Use when absorbing ideas, capabilities, workflows, architecture, quality systems, ecosystem extensions, or engineering practices from any reference system into the current project through original, project-native redesign rather than copying.

Use when designing, implementing, or reviewing frontend-to-backend API integration, typed API clients, REST/tRPC/OpenAPI client choices, auth refresh, API error mapping, upload flows, SSE/WebSocket/polling choices, CORS-facing frontend behavior, or cross-boundary loading/error states. Do not use for backend-only service architecture or TanStack Query cache policy alone; Chinese triggers include API integration, front-end and back-end joint debugging, typed API client, Interface error handling, SSE, WebSocket.

Use when frontend work needs to communicate data, action, state, permission, validation, or business-rule needs to backend teams without dictating endpoint design, field names, database shape, or implementation details; Chinese triggers include front-end and back-end requirements handover, back-end requirements, API requirements clarification, data requirements description.

Use when choosing, implementing, or reviewing browser storage such as localStorage, sessionStorage, IndexedDB, cookies, client persistence, offline data, secure storage, or cleanup strategy; Chinese triggers include browser storage, client persistence.

6 hooks across 5 events