frontend-craft

Routes frontend design requests to seven specialized agents using a dispatch table.

Updated Aug 12, 2026
One-click install
npx skills add https://github.com/brunoolf/frontend-craft --skill frontend-craft-brunoolf
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-craft
Source: https://github.com/brunoolf/frontend-craft/tree/main/skills/frontend-craft
Command: npx skills add https://github.com/brunoolf/frontend-craft --skill frontend-craft-brunoolf

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Frontend design requests arrive vague and unstructured ("make it prettier", "it looks AI-generated"), and sending them to the wrong specialist produces contradictory advice or destroys design intent. This Skill acts as an orchestrator that reads the project context, diagnoses the request, and dispatches it to exactly one of seven specialized frontend design agents. ## Core Features & Use Cases - Request routing: Maps natural-language symptoms (landing pages, redesigns, motion, accessibility, responsiveness) to the correct owning agent via a dispatch table in references/routing.md. - Multi-agent pipelines: Defines ordered pipelines for new surfaces, redesigns, and diagnostics, coordinating art direction, design tokens, UX, motion, implementation, and read-only critique/audit agents. - Dispatch discipline: Enforces rules like one-owner-per-request, read-only agents never editing, and diagnosis-before-treatment for vague requests. - Use Case: A user says "this looks made by AI." The Skill routes to the design critic to name the generic patterns, then to the art director to choose a replacement visual direction, instead of letting an agent blindly restyle. ## Quick Start Describe your frontend design problem in plain language, such as "make a landing page for my product" or "the scroll stutters on mobile", and let the router dispatch the right specialist.

Frequently Asked Questions about frontend-craft

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I route a vague UI improvement request to the right design agent?▼

Vague requests like "make it better" or "it looks off" go to the design critic first, which produces a prioritized findings list. The orchestrator then dispatches each finding to the writing agent that owns that area, such as tokens, motion, or layout.

What agents handle frontend design tasks like motion, tokens, and accessibility?▼

Seven agents split ownership: art director for visual identity, design system for tokens and dark mode, UX architect for flows and copy, motion engineer for animation and 3D, implementer for React/Next code, plus read-only design critic and accessibility/performance auditor.

Can the design critic or accessibility auditor edit my code directly?▼

No. Both are strictly read-only and produce prioritized findings only. Fixes are dispatched to the appropriate writing agent, which prevents a critic from destroying design intent while trying to fix issues.

When should I use the redesign pipeline instead of refinement?▼

Use redesign when replacing the existing visual direction entirely; it audits the incumbent as anti-reference before choosing a new direction. Refinement preserves identity, behavior, and copy. If unclear which the user wants, ask once.

What requests should not be dispatched to a design agent at all?▼

Trivial mechanical work like changing a user-named color or fixing a typo is done directly without dispatch. Backend, data, or infrastructure requests are out of scope entirely, since the signal for dispatch is design judgment being needed.