design-first

Solid

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.

Web & Frontend 1,177 stars 108 forks Updated today Apache-2.0

Install

View on GitHub

Quality Score: 99/100

Stars 20%
100
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
50
License 10%
100
Description 5%
100

Skill Content

# 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] **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 characterist...

Details

Author
rohitg00
Repository
rohitg00/skillkit
Created
4 months ago
Last Updated
today
Language
TypeScript
License
Apache-2.0

Similar Skills

Semantically similar based on skill content — not just same category

AI & Automation Listed

design

Use when planning, building or designing solutions. Applies to interfaces, data models, algorithms, control flow, architectures, processes, etc.

4 Updated 2 days ago
juanibiapina
Web & Frontend Listed

plan-first-development

Break complex projects into detailed multi-phase plans before writing any code. Prevents scope creep, refactoring waste, and missed requirements. Use when starting any project with more than 1000 lines of code or building systems with multiple interacting components.

6 Updated 3 months ago
maschad
Web & Frontend Listed

design

Use in pre-implementation (idea-to-design) stages to understand spec/requirements and create a correct implementation plan before writing actual code. Turns ideas into a fully-formed PRD/design/specification and implementation-plan. Creates design docs and task lists in docs/wip/.

145 Updated today
serpro69
Web & Frontend Listed

designing-architecture

Designs software architecture and selects appropriate patterns for projects. Use when designing systems, choosing architecture patterns, structuring projects, making technical decisions, or when asked about microservices, monoliths, or architectural approaches.

335 Updated today
aiskillstore
Web & Frontend Listed

designing-architecture

Designs software architecture and selects appropriate patterns for projects. Use when designing systems, choosing architecture patterns, structuring projects, making technical decisions, or when asked about microservices, monoliths, or architectural approaches.

4 Updated today
Putra213