One-click install
npx skills add https://github.com/hschne/pi-stuff --skill design-tasks
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design-tasks
Source: https://github.com/hschne/pi-stuff/tree/main/skills/design-tasks
Command: npx skills add https://github.com/hschne/pi-stuff --skill design-tasks

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill eliminates the disorganization and guesswork that comes with breaking down design briefs into actionable work, preventing missed dependencies, wasted effort, and unclear implementation order for design and frontend build projects.

Core Features & Use Cases

  • Vertical Slice Task Generation: Breaks design briefs into independently buildable tasks, each containing complete structure, styling, and interaction work so no piece is partially completed.
  • Prioritized Task Ordering: Sorts tasks by dependencies, visual priority, and risk to ensure foundational elements are built first, high-impact UI is validated early, and high-risk work surfaces problems before full implementation.
  • Standardized Output: Saves the final task list as a formatted TASKS.md file in the matching .design feature subfolder, aligned with existing codebase conventions.
  • Use Case: For example, if you have a design brief for a new user notification center feature, this skill will generate a task list that starts with foundational layout and shared components, moves to core notification UI elements, then adds interactions and responsive polish, so you can build and review each piece in a logical order.

Quick Start

Provide your design brief to the AI and ask it to generate an ordered checklist of buildable design tasks saved to the corresponding .design feature subfolder.

Frequently Asked Questions about design-tasks

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I break down a design brief into actionable frontend build tasks?

To break down a design brief, you convert unstructured feature requirements into an ordered task list. This process organizes design implementation planning by sorting work into verifiable vertical slices with clear dependencies, visual priority, and risk-based ordering.

What is a vertical slice task in UI design implementation planning?

A vertical slice task in UI design implementation is an independently buildable unit containing complete structure, styling, and interaction work. This approach ensures no piece of a frontend feature is partially completed, allowing teams to verify each visual element against the design brief.

How do I prioritize frontend tasks when implementing a new UI feature?

You prioritize frontend tasks by sorting them based on dependencies, visual priority, and risk. This builds foundational layout elements first, validates high-impact UI components early, and surfaces high-risk interaction problems before full implementation.

Can I generate a standardized task list for a frontend design project?

Yes, you can generate a standardized task list by saving the ordered build tasks as a formatted TASKS.md file. This output is aligned with existing codebase conventions and placed directly into the matching .design feature subfolder.

What's the best way to stop missing dependencies when building UI components from a design brief?

The best way to stop missing dependencies is to use a repeatable design build planning process that outputs an ordered checklist. Sorting design tasks by dependency and risk ensures foundational shared components and layout are built before complex interactions.

Do I need an existing .design folder structure to generate a build task list?

You need a matching .design feature subfolder to save the final formatted TASKS.md file output. The generated task list aligns with existing codebase conventions, ensuring the ordered build plan integrates directly with your current frontend project structure.