Skills

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;
}
Read the whole SKILL.md on GitHub

More in Design