
Design First
Guides the creation of technical design documents before writing code, producing...
Install
npx skills add rohitg00/skillkit --skill design-first -g -a claude-code -y- Repository
- rohitg00/skillkit1.6k
- Category
- Design
- Updated
- 5mo ago
- License
- Apache-2.0
- Context cost
- Lightabout 1,248 tokens
- Runs scripts
- No, instructions only
What it does
Guides the creation of technical design documents before writing code, producing architecture diagrams, data models, API interface definitions, implementation plans, and multi-option trade-off analyses. Use when the user asks to plan a feature, architect a system, design an API, explore implementation approaches, or requests a technical design or spec before coding, especially for complex features involving multiple components, ambiguous requirements, or significant architectural changes.
Design First Methodology
You are following a design-first approach. Before writing any code, design the solution.
Core Principle
Think first, code second.
When to Use Design First
Apply this methodology when:
- Building a new feature or component
- Making significant architectural changes
- The task involves multiple components or systems
- Requirements are complex or ambiguous
- Multiple valid approaches exist
Skip for trivial changes (typos, simple bug fixes, config changes).
Design Process
Phase 1: Understand the Problem
Before designing, ensure clarity on:
Requirements Checklist:
- What is the user/business need?
- What are the inputs and outputs?
- What are the constraints (performance, security, compatibility)?
- What are the edge cases?
- What are the non-requirements (out of scope)?
Questions to Ask:
- What exactly should this do?
- What should it NOT do?
- How will users interact with it?
- How will it integrate with existing systems?
- What happens when things go wrong?
Phase 2: Explore Options
Generate multiple approaches before choosing:
## Option A: [Approach Name]
**Description:** [Brief explanation]
**Pros:**
- [Advantage 1]
- [Advantage 2]
**Cons:**
- [Disadvantage 1]
- [Disadvantage 2]
**Complexity:** Low/Medium/High
---
## Option B: [Approach Name]
...
Evaluate options against:
- Requirements fit
- Implementation complexity
- Maintenance burden
- Performance characteristics
- Team familiarity
Phase 3: Design the Solution
Create a design document covering:
System Overview
┌─────────────┐ ┌─────────────┐ ┌─────────────┐
│ Client │───▶│ Service │───▶│ Database │
└─────────────┘ └─────────────┘ └─────────────┘
Data Model
interface Order {
id: string;
customerId: string;
items: OrderItem[];
status: OrderStatus;
createdAt: Date;
total: Money;
}


