design-first

Featured

Guide structured design thinking through 5 progressive levels before any code is written. Levels: Capabilities, Components, Interactions, Contracts, Implementation. Use when building new features, refactoring significant code, designing modules, or when the user says 'design this', 'architect this', 'let's think before coding', 'walk me through the design', or 'whiteboard this'. For simple utilities enter at Level 4 (Contracts), for single-component tasks at Level 2 — see Complexity Calibration. Do not use for quick bug patches.

Web & Frontend 190 stars 13 forks Updated 4 days ago MIT

Install

View on GitHub

Quality Score: 88/100

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

Skill Content

# Design-First (Progressive Design Facilitation) ## The 5 Levels ### Level 1: Capabilities (The "What") **Purpose**: Confirm scope. Surface the user-facing outcomes the system must deliver. Shared vocabulary check — ensure the human and the AI are talking about the same feature with the same boundaries. **Output format**: Numbered list of user-facing capabilities, max 5. Each capability is a plain-language outcome, not an implementation detail. **Boundary**: No components, no architecture, no technical detail. If a capability mentions a specific technology, class, or data structure, it belongs at a later level. This level answers only "what does the user get?" **Checkpoint**: "Does this Level 1 (Capabilities) look correct? Should I proceed to Level 2 (Components)?" ### Level 2: Components (The "Who") **Purpose**: Identify the building blocks. What major pieces does the system have, and what is each one responsible for? **Output format**: 3-5 components, each with a single responsibility and a one-line description. Include an ASCII or Mermaid diagram showing how they relate. Note integration points with existing infrastructure. **Boundary**: No data flow, no sequence of operations, no interaction detail. Describe each component by what it *is* and what it *owns* — not how it communicates with others. If you find yourself writing "A sends X to B", that belongs at Level 3. **Checkpoint**: "Does this Level 2 (Components) look correct? Should I proceed to Level 3 (Inter...

Details

Author
techygarg
Repository
techygarg/lattice
Created
6 months ago
Last Updated
4 days ago
Language
JavaScript
License
MIT

Bundled in these plugins

Similar Skills

Semantically similar based on skill content — not just same category

Web & Frontend Featured

design-blueprint

Run a complete design workflow -- from establishing context through four progressive design levels (Capabilities, Components, Interactions, Contracts) to an approved blueprint. Composes knowledge-priming, context-anchoring, learning-harvest, collaborative-judgment, design-first, architecture, and domain-driven-design into one process. Handles both new features (create context doc) and resuming existing work (load context doc). Level 5 (Implementation) is delegated to code-forge. Use when starting a design, planning architecture, or when the user says 'design a feature', 'blueprint', 'start designing', 'plan the architecture', or 'let's design before coding'.

190 Updated 4 days ago
techygarg
AI & Automation Listed

component-design

Design low-level component and class structure — classes, interfaces, design patterns, method signatures, aggregates, service contracts, and collaboration within a single module or bounded context. Make sure to use this skill whenever the user asks to design classes, pick a design pattern, define interfaces, model an aggregate, shape a service, or says things like "wie strukturiere ich die klassen", "welches pattern passt", "component design", "class design", "design the service", "model the aggregate". Use this skill for DETAIL DESIGN inside a known module — system-level structure belongs in `architecture-design`.

1 Updated 2 weeks ago
lx-wnk
Web & Frontend Listed

design

Enter design mode to plan implementation with structured templates. Use when planning a new feature, refactoring, or architectural change.

4 Updated today
alergyonthestage