frontend-craft is a universal frontend plugin that brings the same opinionated engineering standards to all 15 AI coding assistants.
Agent
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.
Agent
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…
Agent
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.
Agent
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.
Agent
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.
Agent
Front-end end-to-end testing specialist: writing and maintaining key user journeys, executing Playwright/Cypress, managing unstable use cases, managing screenshots/Trace/videos and CI products. Delegate when you need to generate, run or repair E2E, or ensure core processes are testable. If the environment has…
Agent
Focus on implementing the proxy of UI components accurately according to the design draft, and save the implementation report as a Markdown file. Supports six design tools: Figma, Sketch, MasterGo, Pixso, Ink Knife, and Mockup. Provide design draft links, selection screenshots or annotation data, automatically obtain…
Agent
Front-end performance analysis and optimization specialization: Core Web Vitals, packaging volume, runtime and rendering, network and cache, memory leak troubleshooting; can cooperate with Lighthouse, Bundle analysis and Profiler. Use it when users mention page slowness, lag, first screen, package size, poor…
Agent
Front-end Dead Code & Technical Debt Cleanup Subagent: Identifies unused components, exports, styles, routes, dependencies and test fixtures, categorizes them by risk, and cleans safe items only under validation protection.
Agent
Focus on front-end and browser-side security reviews: XSS, client key leaks, dangerous DOM/API usage, third-party scripts, CSP, dependencies and supply chains, certified state storage, etc. Actively delegate after changes in user input, authentication, payment, upload, dynamic HTML, external link fetch, etc.; output…
Agent
Front-end test strategy planning subagent: Develop a coverage matrix according to risk and test levels, distinguishing static inspection, unit, component, lightweight integration, E2E, Storybook/visual regression and special quality verification. Suitable for use before new features, PRs, milestones or test debt…
Agent
TypeScript/JavaScript special review: type safety, async correctness, Node/Web safety, idioms. Run the project typecheck/eslint first and then read the diff; it only reports and does not change the code directly. Suitable for .ts/.tsx/.js/.jsx changes or PR-level TS/JS reviews. Division of labor with…
Agent
Use this subagent to troubleshoot visual defects, layout confusion, CSS issues, responsive exceptions, and inconsistencies between interaction and design in the front-end UI, and save the report as a Markdown file. Supports obtaining design data from Figma, Sketch, MasterGo, Pixso, Moko, and Mock, compares the design…