What problem does it solve?
This skill eliminates the disorganization and guesswork that comes with breaking down design briefs into actionable work, preventing missed dependencies, wasted effort, and unclear implementation order for design and frontend build projects.
Core Features & Use Cases
- Vertical Slice Task Generation: Breaks design briefs into independently buildable tasks, each containing complete structure, styling, and interaction work so no piece is partially completed.
- Prioritized Task Ordering: Sorts tasks by dependencies, visual priority, and risk to ensure foundational elements are built first, high-impact UI is validated early, and high-risk work surfaces problems before full implementation.
- Standardized Output: Saves the final task list as a formatted TASKS.md file in the matching .design feature subfolder, aligned with existing codebase conventions.
- Use Case: For example, if you have a design brief for a new user notification center feature, this skill will generate a task list that starts with foundational layout and shared components, moves to core notification UI elements, then adds interactions and responsive polish, so you can build and review each piece in a logical order.
Quick Start
Provide your design brief to the AI and ask it to generate an ordered checklist of buildable design tasks saved to the corresponding .design feature subfolder.