Co Design

What it does

This skill, Co-Design, orchestrates parallel subagents to execute tasks defined in a markdown plan file. It intelligently routes tasks based on their nature – design or standard – using different execution methods. Design tasks (those involving UI/UX elements) are handled by a Claude instance with CLI capabilities, while other tasks utilize standard Task tool subagents. This allows for collaborative brainstorming and iterative refinement of design concepts.

When to use it

• Frontend development: When you need to build or modify user interfaces, including styling, layout, and component creation.
• Design system implementation: To manage and implement design tokens, themes, and UI components consistently.
• Iterative design refinement: When collaborating with users to improve design concepts through feedback loops.
• Complex projects with mixed tasks: When a project involves both frontend design and backend logic, ensuring the design aspects are handled appropriately.

Key capabilities

• Plan file parsing: Reads and parses markdown plan files containing task definitions.
• Task classification: Automatically classifies tasks as either "design" or "standard" based on predefined criteria (CSS, HTML, React/Vue/Svelte/Angular components, etc.).
• Parallel execution: Executes multiple tasks concurrently using parallel subagents.
• Dependency management: Handles task dependencies specified within the plan file (depends_on).
• Design Task Routing: Launches design-related tasks via claude -p with CLI access and specific allowed tools.
• Standard Task Routing: Executes standard tasks using the "Task" tool subagent.

Example prompts

• “Run the plan file ‘design_plan.md’.”
• “Execute tasks T1 through T3 from the plan file ‘project_plan.md’."
• "Process 'website_layout.md' and focus on improving the card component design.”

Tips & gotchas

• Plan File Format: The skill requires a markdown plan file with clearly defined task sections (e.g., ### T1: Task Name:).
• Design vs. Standard Classification: If a task mixes design and standard elements, it should be classified as a "design" task to ensure appropriate handling.
• CLI Access for Design Tasks: The Claude instance used for design tasks has limited CLI access via --allowedTools.