106.9K+Download
Skip to the usage guide
Brief to Tasksby julianoczkowski

Brief to Tasks Skill.

Turn a design brief into independently reviewable build slices.

  • Task Planning
  • Dependencies
Download OpenDesignView Usage Guide
Source Review · brief-to-tasksSKILL.md
Task Turn a design brief into independently reviewable build slices. Produces A TASKS.md checklist saved beside the feature's design brief. Before You Start Generating the checklist does not itself implement or verify the feature.
Editorial summary · source reviewed 2026-11-02 · not a generated example

01 What It Does

Turn a design brief into independently reviewable build slices

Convert a design brief into an ordered TASKS.md checklist with component reuse, dependencies, visual priorities and verifiable UI slices.

Source-based workflowNot an execution benchmark

The Working Approach

Brief to Tasks translates a design brief into an ordered implementation checklist. Each task includes enough structure, styling and interaction to produce a visible result that can be reviewed on its own. This helps a builder decide what to complete first and what evidence shows that a slice matches the brief.

Before creating tasks, the skill inspects existing pages, components, tokens, dependencies and tests. It distinguishes reuse from modification and creation, so the plan reflects the repository that exists. Dependencies, visual prominence and uncertainty determine the order rather than a generic separation into HTML, CSS and JavaScript phases.

Expected Deliverables

  • A TASKS.md checklist saved beside the feature's design brief.
  • Each task's component reuse, modification or creation status.
  • Explicit dependencies, covered states and completion expectations.
See the Example Brief

From Brief to Review

  1. 01
    Read the design context

    Find the active .design/<feature-slug>/DESIGN_BRIEF.md and its INFORMATION_ARCHITECTURE.md or token file when present. If several feature folders exist, resolve which one the task concerns before building a checklist from unrelated requirements.

  2. 02
    Inventory reusable pieces

    Inspect components, views, styles, dependencies and test conventions. Classify relevant pieces as reusable, needing modification or missing.

  3. 03
    Create and order vertical slices

    Combine structure, styling and behavior in reviewable tasks. Put dependencies first while exposing the visual direction and highest-risk work early.

  4. 04
    Save an actionable checklist

    Write TASKS.md in the same feature folder. Include the states and verification expected for each slice and a final design-review task.

02 When to Use It

When to Use It

Generating the checklist does not itself implement or verify the feature.

A Good Fit

  • A brief is approvedThe team needs a concrete build order that preserves design intent.
  • An existing product growsA feature should reuse established components rather than plan a fresh implementation of everything.

Limits to Check

  • Planning artifactGenerating the checklist does not itself implement or verify the feature.
  • Vertical scopeStandalone setup or folder-creation tasks do not satisfy the source's definition of a build slice.

Bring These Inputs

  • Design briefProvide the chosen feature and its requirements.
  • Existing UIMake component directories, tokens and current views available.
  • Implementation constraintsInclude dependencies, test conventions and required responsive or interaction states.

03 Decisions That Matter

Decisions That Matter

  1. Reviewable progress

    Each task produces UI that can be checked against the brief.

  2. Visible reuse

    The checklist identifies where existing components are reused or changed.

  3. Earlier uncertainty checks

    High-risk and visually prominent work appears before surrounding detail.

04 Try a Focused Brief

Try a Focused Brief

The example brief below has not been tested. Check the skill’s setup before using it.

Review the Source and Setup

Provide the chosen feature and its requirements.

Upstream Source File
https://github.com/julianoczkowski/designer-skills/blob/c259656c76d9758d7ead46b0d2f125cbe84f8665/brief-to-tasks/SKILL.md

The reference below opens the upstream instructions. Review the repository setup before using them; it is not an installation command.

Start With One Deliverable

Adapt the scope, source material and constraints in this brief before running the skill.

Example Brief
Use brief-to-tasks for the approved project-settings brief in .design. Read its information architecture and our existing token files, then inspect reusable form, navigation and feedback components. Create a TASKS.md checklist of vertical slices that each include structure, styling and interaction. Mark whether every slice reuses, modifies or creates components. Order dependencies first and put the most uncertain settings interaction early. Include empty, error and saving states where relevant, with concrete completion checks and a final design-review task. Do not begin implementation in this pass.

Inspect the Result

Check the actual output against these observable criteria.

  • Every task states reuse, modification or creation clearly.
  • Dependencies are explicit and each slice has a verifiable result.
  • The checklist preserves the brief's visual direction and required states.

OpenDesign provides a local design workspace for coding agents. This listing does not mean the skill is bundled or that its external tools, credentials and software dependencies are included.

Download OpenDesignRead the Quickstart

05 Source and License

Source and License

This page describes the pinned source revision linked below. Upstream behavior and requirements can change.

Source Owner
julianoczkowski
Repository
julianoczkowski/designer-skills
Skill File
SKILL.md
License
Apache-2.0
Reviewed Snapshot
2026-11-02 · c259656c76d9
Editorial Source Summary
Turn a design brief into independently reviewable build slices.

Original summary by OpenDesign, based on the linked source. Repository stars are a dated popularity signal, not skill usage or a quality score.

06 Questions Before You Start

Questions Before You Start

Where does the checklist go?

The source saves TASKS.md in the same .design feature folder as the brief.

Should styling be a separate phase?

Each vertical slice combines structure, styling and interaction so it can be reviewed independently.

What if a suitable component already exists?

Reuse it as-is where possible. Only pieces requiring modification or creation receive their own tasks.

OpenDesign

Keep Your Brief and Design Work Together.

Keep your brief, source material and design work together in a local workspace. Check the skill’s own setup before adding it to your workflow.

Download OpenDesignBrowse Design Skills
Upstream Source File
https://github.com/julianoczkowski/designer-skills/blob/c259656c76d9758d7ead46b0d2f125cbe84f8665/brief-to-tasks/SKILL.md