Brief To Tasks
Turn a design brief into an ordered markdown checklist of vertical-slice tasks your agent can build and verify one at a time.
Overview
Brief to Tasks is an agent skill most often used in Validate (also Build) that breaks a design brief into an ordered checklist of vertical-slice implementation tasks.
Install
npx skills add https://github.com/julianoczkowski/designer-skills --skill brief-to-tasksWhat is this skill?
- Reads .design/*/DESIGN_BRIEF.md plus optional INFORMATION_ARCHITECTURE.md and tokens
- Scans components/, ui/, shared/, pages, theme files, and test conventions in the repo
- Outputs vertical slices—each task is buildable, reviewable, and verifiable on its own
- Saves an ordered markdown checklist for implementation order
- Example prompts: break the brief into tasks, what should I build first
Adoption & trust: 2.1k installs on skills.sh; 269 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You have a design brief and a messy codebase but no ordered, independently buildable task list your agent can follow.
Who is it for?
Indie builders with DESIGN_BRIEF.md (or equivalent) who want vertical-slice planning grounded in the actual repo structure.
Skip if: Greenfield ideas with no brief yet, or backend-only work with no UI slices to decompose.
When should I use this skill?
User wants to break down work, create tasks from a brief, plan implementation order, or mentions tasks or breakdown.
What do I get? / Deliverables
You get a markdown checklist of vertical slices sequenced for build-and-verify loops, ready to hand to implementation agents task by task.
- Ordered markdown checklist of vertical-slice tasks
- Repo-aware notes on existing components and tokens
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
The skill turns an approved direction into scoped, sequenced work before heavy implementation—canonical home is Validate when you are locking what to build first. Scope subphase covers breaking a feature into independently buildable units with explicit order, which is exactly brief-to-tasks output.
Where it fits
Convert DESIGN_BRIEF.md into the first three vertical slices before committing sprint time.
Reorder tasks after scanning components/ and tokens.css so new UI reuses existing primitives.
Pull the next checkbox task for a single screen slice the agent can verify in isolation.
How it compares
Use for design-led vertical slicing—not generic Jira epics or unstructured brainstorming without a brief.
Common Questions / FAQ
Who is brief-to-tasks for?
Solo builders and small teams pairing design briefs with agentic coding who need a repo-aware, ordered UI task list instead of one giant implementation prompt.
When should I use brief-to-tasks?
In Validate when scoping a feature from a brief, and early in Build when replanning order after discovering existing components—especially when the user asks for tasks, breakdown, or build order.
Is brief-to-tasks safe to install?
The skill reads project files to list components and conventions; check the Security Audits panel on this page and limit agent filesystem scope if your repo contains secrets.
SKILL.md
READMESKILL.md - Brief To Tasks
This skill turns a design brief into an ordered, buildable task list. Each task is a vertical slice: a piece of UI that can be built, reviewed, and verified on its own. ## Example prompts - "Break the brief into tasks" - "What should I build first?" - "Create a task list from the design brief" - "Plan the build order for this feature" ## Process 1. Read the design brief. Look for `.design/*/DESIGN_BRIEF.md`. If multiple subfolders exist, use the most recently modified one, or ask the user which feature they are working on. Also check for `INFORMATION_ARCHITECTURE.md` and a tokens file in the same subfolder. If none exist, ask the user to describe what they are building. 2. Explore the existing codebase to understand what is already built. Scan specifically for: - **Component directories**: `components/`, `ui/`, `shared/` and list every component by name - **Existing pages/views**: what is already built that this feature must coexist with - **Token/theme files**: `tokens.css`, `globals.css`, Tailwind config, theme providers - **File naming conventions**: kebab-case, PascalCase, how files are organized (by feature, by type) - **Test files**: if tests exist alongside components, new tasks should include test expectations - **Package.json dependencies**: what UI libraries, animation libraries, and icon sets are already installed - Classify each relevant component as: will be reused as-is, needs modification, or does not exist yet. Only components that need modification or creation get their own tasks. 3. Break the work into vertical slices. Each task should: - Be independently buildable (no task should block another unless noted). - Include structure, styling, and interaction in a single task (not "build HTML" then "add CSS" then "add JS" as separate tasks). - Be verifiable: you can look at the result and confirm it matches the brief. - Be small enough to complete in a single session. 4. Order tasks by: - **Dependencies first**: foundational elements (tokens, layout shells, shared components) before page-specific work. - **Visual priority**: the most prominent UI element early, so the user can validate the aesthetic direction before investing in details. - **Risk first**: the hardest or most uncertain piece early, so problems surface before everything else is built around them. 5. Save the task list as `TASKS.md` in the same `.design/<feature-slug>/` subfolder as the design brief. ## Task List Template ```markdown # Build Tasks: [Feature/Page Name] Generated from: .design/<feature-slug>/DESIGN_BRIEF.md Date: [date] ## Foundation - [ ] **[Task name]**: [One sentence describing what to build and what "done" looks like]. _Reuses: [existing components/tokens if any]._ - [ ] **[Task name]**: [Description]. _New component._ ## Core UI - [ ] **[Task name]**: [Description]. _Depends on: [task name if any]._ - [ ] **[Task name]**: [Description]. ## Interactions & States - [ ] **[Task name]**: [Description]. Covers: [list of states, e.g., hover, loading, error, empty]. - [ ] **[Task name]**: [Description]. ## Responsive & Polish - [ ] **[Task name]**: [Description]. Breakpoints: [which ones]. - [ ] **[Task name]**: Accessibility pass. [Specific checks from the brief]. ## Review - [ ] **Design review**: Run /design-review against the brief. ``` ## Rules - Every task must reference whether it reuses, modifies, or creates components. - Never create a task that is only "set up the project" or "create the file structure." Those are not vertical slices. - If the brief specifies an aesthetic philosophy, note it in the first build task so the visual direction is established immediately. -