Agent skill · product strategy · julianoczkowski
brief-to-tasks
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".
Why this skill is useful
Generates a detailed task list from design briefs, providing a structured approach to breaking down work that the AI wouldn't reliably create on its own.
What it needs
About 3k tokens when loaded. Last updated 2026-07-06. 492 stars on the source repository.
What this skill does
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//DESIGNBRIEF.md. If multiple subfolders exist, use the most recently modified one, or ask the user which feature they are working on. Also check for INFORMATIONARCHITECTURE.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. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills julianoczkowski/brief-to-tasks