brief-to-tasks

Q: How do I install brief-to-tasks?

Run npx skills add https://github.com/julianoczkowski/designer-skills --skill brief-to-tasks in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/brief-to-tasks/ (personal) or .claude/skills/brief-to-tasks/ (project).

by julianoczkowskiFrontend & Design

Break a design brief into an ordered checklist of independently buildable tasks using vertical slices. Saves as a markdown checklist. Use when user wants to break down work, create tasks from a brief, plan implementation order, or mentions "tasks" or "breakdown".

Installs: 5.2K
Last 24h: —
Trending rank: —
Security: Pass

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/julianoczkowski/designer-skills --skill brief-to-tasks

01
Install
Run the command in your project. The CLI asks which agents to install for.
02
Describe the task
Ask your agent for something this skill covers. It loads brief-to-tasks automatically when relevant.
03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.

Security audits

Independent scans of the skill's instructions and bundled files.

Gen Agent Trust Hub PassSAFE ·The skill is safe from high-severity risks like remote code execution or data exfiltration. It has a low-risk indirect prompt injection surface because it reads external design documentation to generate task lists, but it lacks the execution capabilities needed to perform harmful actions.

Socket PassNo alerts

Snyk PassLOW ·Risk: LOW · No issues

ZeroLeaks PassNONE ·Score: 93/100 · 2 sections analyzed

SKILL.md

The instructions your agent reads when the skill is triggered.

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

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.
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.
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.
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.
Save the task list as TASKS.md in the same .design/<feature-slug>/ subfolder as the design brief.

Task List Template

# 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.
Group related tasks but do not nest them more than one level deep. Flat lists are easier to work through.

FAQ

What does the brief-to-tasks skill do?

How do I install brief-to-tasks?

Run npx skills add https://github.com/julianoczkowski/designer-skills --skill brief-to-tasks in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/brief-to-tasks/ (personal) or .claude/skills/brief-to-tasks/ (project).

Which AI agents can use brief-to-tasks?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is brief-to-tasks safe to install?

Security partners have reviewed it: Gen Agent Trust Hub passed; Socket passed; Snyk passed; ZeroLeaks passed. As with any skill, read the SKILL.md and bundled scripts before installing.

Who maintains brief-to-tasks?

It is published by julianoczkowski in julianoczkowski/designer-skills. It has 5,181 recorded installs.