design-plan

Capture design specifications for API, UI, CLI, or infrastructure changes.

2|Updated Feb 1, 2026
One-click install
npx skills add https://github.com/yellow-seed/AgentUsageWidget --skill design-plan
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design-plan
Source: https://github.com/yellow-seed/AgentUsageWidget/tree/main/.github/skills/design-plan
Command: npx skills add https://github.com/yellow-seed/AgentUsageWidget --skill design-plan

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The design-plan skill helps teams capture clear design guidelines before implementing new features, API, UI, or infrastructure, reducing rework and aligning stakeholders.

Core Features & Use Cases

  • Design document creation: guides teams to produce docs under docs/design/ including api-specification.md, ui-specification.md, and infrastructure-specification.md.
  • Review workflow support: provides references for SwaggerUI, Storybook, and Terraform plan reviews to validate design choices.
  • TDD collaboration: seeds design artifacts that feed test-driven development workflow, enabling Red-Green-Refactor cycles.

Quick Start

Start by creating a basic design document for a new API and an accompanying UI flow, then run lightweight checks with Swagger UI and Storybook before coding.

Frequently Asked Questions about design-plan

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

FAQPage Schema
How do I create design specifications before implementing new API or UI features?

Design specifications are structured documents detailing API, UI, or infrastructure changes before coding. They capture clear guidelines, align stakeholders, and reduce rework by establishing api-specification.md and ui-specification.md artifacts upfront.

Why do I need to plan infrastructure changes before coding?

Planning infrastructure changes before coding is necessary to align stakeholders and reduce rework. It ensures you create infrastructure-specification.md artifacts that validate design choices and feed directly into downstream development workflows.

How do I integrate design documents with a test-driven development workflow?

Integrate design documents with test-driven development by using them to seed TDD workflows. The design artifacts establish the specifications needed to enable Red-Green-Refactor cycles, ensuring development aligns with the initial design plan.

Can I use Swagger UI and Storybook to review design specifications before development?

Yes, you can use Swagger UI and Storybook to review design specifications. They provide lightweight reference checks to validate API and UI design choices, ensuring the design documents are accurate before starting the actual coding phase.

What is the best way to document infrastructure changes for team alignment?

The best way to document infrastructure changes is creating an infrastructure-specification.md file. This captures clear design guidelines, provides references for Terraform plan reviews, and ensures all stakeholders are aligned before implementation.

Related Skills