What problem does it solve?
This Skill solves the problem of managing frontend design work by delegating it to a specialized subagent, allowing for efficient design tasks in fullstack apps, mockup sandboxes, and variant exploration.
Core Features & Use Cases
- Subagent Delegation: Delegate frontend design work to a specialized subagent through the subagent CodeExecution callback.
- Fullstack Apps: Ideal for fullstack applications, providing a clear brief for design work within the application.
- Mockup Sandboxes: Useful for prototyping and design explorations without backend or API hooks.
- Variant Exploration: Allows for creating different design variants with distinct vibes for comparison.
Quick Start
Run the following command to delegate a design task:
subagent({
name: "initial-design",
task: "Frontend design brief with product identity, scope, exact file paths to inspect, API hooks, and implementation skill names.",
config: {
$kind: "design",
outputDir: "artifacts/<slug>",
relevantFiles: ["artifacts/<slug>/src/App.tsx"],
relevantSkills: [".local/skills/clerk-auth/SKILL.md"],
},
});