design-first
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.
Profile →npx skills add rohitg00/skillkit --skill design-first --agent codex
Same command for any agent — swap --agent for claude-code, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# 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: ```markdown ## Option A: [Approach Name] **Description:** [Brief explanation] **Pro
- Core Principle
- When to Use Design First
- Design Process
- Phase 1: Understand the Problem
- Phase 2: Explore Options
- Phase 3: Design the Solution
- Phase 4: Validate the Design
- Design Document Template
- Design Levels
- High-Level Design (Architecture)
- Mid-Level Design (Module/Component)
- Low-Level Design (Implementation)
- Anti-Patterns to Avoid
- Integration with Implementation
What does the design-first skill do?
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.
How do I install it?
Run `npx skills add rohitg00/skillkit --skill design-first --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From rohitg00/skillkit, a repository with 1,422 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.