brief-to-tasks
This skill transforms a design brief into a structured task list where each item is a vertical slice—a complete, self-contained piece of work that can be built and verified independently. It scans your codebase for existing components and tokens, then orders tasks by dependencies, visual priority, and risk to keep your build moving forward efficiently.
brief-to-tasks converts a design brief into an ordered checklist of independently buildable tasks using vertical slices.
AI-generated summary based on this skill's SKILL.md
Decision gist · record as of 2026-07-06
brief-to-tasks converts a design brief into an ordered checklist of independently buildable tasks using vertical slices. This skill transforms a design brief into a structured task list where each item is a vertical slice—a complete, self-contained piece of work that can be built and verified independently. It scans your codebase for existing components and tokens, then orders tasks by dependencies, visual priority, and risk to keep your build moving forward efficiently.
Use it when
- brief-to-tasks identifies foundational, core, and polish tasks from your feature design.
- brief-to-tasks plans the optimal build sequence using vertical slices and dependency analysis.
Verify before relying
Read SKILL.md below before installing (1 file). Open directory: indexed for reading, not audited.
Install
julianoczkowski/designer-skills/brief-to-tasks
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How does brief-to-tasks break design brief into tasks?
brief-to-tasks transforms your design brief into a structured task list where each item is a vertical slice—a complete, self-contained piece of work that can be built and verified independently. The skill scans your codebase for existing components and tokens, then orders tasks by dependencies, visual priority, and risk to keep your build moving forward efficiently.
What does brief-to-tasks identify in a feature design?
brief-to-tasks identifies foundational, core, and polish tasks from your feature design. Foundational tasks establish the structural base, core tasks deliver primary functionality, and polish tasks refine the user experience. This layered approach ensures you build in the right sequence and can ship incrementally.
How does brief-to-tasks plan build order for a feature?
brief-to-tasks plans the optimal build sequence using vertical slices and dependency analysis. It examines which tasks must complete before others can start, weighs visual priority and implementation risk, and generates an ordered checklist with task descriptions and reuse/creation notes so you know exactly what to build first.
Can brief-to-tasks generate a markdown checklist?
Yes. brief-to-tasks generates a markdown checklist with task descriptions and reuse/creation notes. Each task includes context about whether components or tokens already exist in your codebase or need to be created, making it easy to track progress and avoid duplicate work.
What should I build first according to brief-to-tasks?
brief-to-tasks determines what to build first based on risk and visual priority. It analyzes your design brief to surface high-impact, low-risk tasks that unblock downstream work and establish confidence early. The result is an independently buildable task list ordered for maximum efficiency.
SKILL.md
Rendered from the published skill. Quoted content, verbatim.
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 forINFORMATION_ARCHITECTURE.mdand 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
(truncated - see the full file via the links below)
File tree — 1 file
brief-to-tasks/SKILL.md
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Convert a design brief into an ordered, independently buildable task list”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
design-flow walks you through the complete design process as a guided sequence, running each phase in order and waiting for confirmation before advancing. It orchestrates six core phases—from clarifying your thinking through building components—plus an optional design review, with the ability to skip phases you don't need and resume mid-project where you left off.
Design Brief walks you through a structured conversation to define a new feature or page, then scans your codebase for existing design tokens, components, and patterns. It produces a markdown brief that captures the problem, solution, design principles, aesthetic direction, and component inventory—ensuring your design extends rather than duplicates existing work.
This skill executes a comprehensive design review by comparing your built application against the design brief and aesthetic direction. It captures screenshots across responsive breakpoints, analyzes visual hierarchy and consistency, and produces a prioritized refinement list organized by severity.
This skill guides you through defining the structural skeleton of a product or site—the navigation, page hierarchy, URL patterns, and user flows that sit between your design brief and build phase. It examines your existing codebase, interviews you on key structural decisions, then generates a complete IA document with sitemaps, navigation models, content priorities, and growth strategies.
This skill creates a complete token foundation for new projects, generating semantic color tokens, spacing scales, typography systems, and motion parameters in your project's native format—whether Tailwind, CSS custom properties, or theme files. It always includes intentional light and dark mode palettes derived from your chosen design philosophy.
frontend-design generates working frontend code with intentional aesthetic direction, grounded in named design philosophies. Choose or describe a visual style—Scandinavian warmth, Swiss objectivity, Japanese restraint, Brutalist rawness, or others—and receive code that reflects that philosophy through typography, color, layout, and motion. The skill scans your codebase first to respect existing components and tokens.