Guide structured design thinking through 5 progressive levels before any code is written.
$ npx skills add techygarg/lattice --skill design-first -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install techygarg/lattice design-first --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/techygarg/lattice.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/design-first .claude/skills/design-first && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "design-first" agent skill from https://github.com/techygarg/lattice/tree/main/skills/design-first into .claude/skills/design-first/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-first", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/techygarg/lattice/tree/main/skills/design-firstType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add techygarg/lattice --skill design-first -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install techygarg/lattice design-first --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/techygarg/lattice.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/design-first .agents/skills/design-first && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "design-first" agent skill from https://github.com/techygarg/lattice/tree/main/skills/design-first into .agents/skills/design-first/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-first", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add techygarg/lattice --skill design-first -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install techygarg/lattice design-first --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/techygarg/lattice.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/design-first .cursor/skills/design-first && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "design-first" agent skill from https://github.com/techygarg/lattice/tree/main/skills/design-first into .cursor/skills/design-first/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-first", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/techygarg/lattice.git --path skills/design-first--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add techygarg/lattice --skill design-first -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install techygarg/lattice design-first --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/techygarg/lattice.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/design-first .gemini/skills/design-first && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "design-first" agent skill from https://github.com/techygarg/lattice/tree/main/skills/design-first into .gemini/skills/design-first/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-first", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install techygarg/lattice design-firstInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add techygarg/lattice --skill design-first -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/techygarg/lattice.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/design-first .github/skills/design-first && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "design-first" agent skill from https://github.com/techygarg/lattice/tree/main/skills/design-first into .github/skills/design-first/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-first", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add techygarg/lattice --skill design-first -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install techygarg/lattice design-first --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/techygarg/lattice.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/design-first .opencode/skills/design-first && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "design-first" agent skill from https://github.com/techygarg/lattice/tree/main/skills/design-first into .opencode/skills/design-first/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-first", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
design-firstGuide structured design thinking through 5 progressive levels before any code is written.
Design First is an agent skill from techygarg/lattice. 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…
Its SKILL.md is about 2.3k tokens, which your agent loads only when the skill is triggered. The skill folder holds 2 other files, including reference files (for example `references/methodology-detail.md`).
It sits in Development, covering Performance reviews and Refactoring. The repository describes itself as: Install engineering discipline into any AI coding assistant. Composable skills for design, implementation, review, and team standards. Better process, not just better prompts. The licence is MIT.
5 steps, taken from the first numbered list in SKILL.md.
Read from SKILL.md and the folder at commit 4d6c35f. It shows what the files ask for, not the result of running them.
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
No scripts in the folder and no shell commands in SKILL.md.
From the folder's file list and the shell code blocks in SKILL.md.
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Design First loads about 2.3k tokens when it runs, and up to ~3.4k if it reads all its reference files. Until then it costs about 137 tokens; SKILL.md has 1,226 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
The full file from techygarg/lattice at commit 4d6c35f, republished under its MIT licence (© techygarg). 1,226 words, ~2,279 tokens.
.claude/skills/design-first/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.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)?"
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 (Interactions)?"
Purpose: Define the data flow between components. How do the building blocks communicate to deliver the capabilities?
Output format: A sequence diagram (ASCII or Mermaid) or a numbered flow showing the order of operations. For each interaction, describe WHAT data passes between components. See ./references/methodology-detail.md for notation guidance.
Boundary: No function signatures, no type definitions, no implementation detail. Focus on what passes between components, not how each component processes internally. If you are defining method parameters or return types, that belongs at Level 4.
Checkpoint: "Does this Level 3 (Interactions) look correct? Should I proceed to Level 4 (Contracts)?"
Purpose: Define the interfaces, method signatures, and type definitions that formalize the interactions. This is the handoff artifact — the specification that implementation is built against.
Output format: Typed interfaces, method signatures, type definitions in a language-appropriate format (TypeScript interfaces, Java interfaces, Python protocols, etc.). Use the project's primary language; if ambiguous, ask before writing contracts. No function bodies — signatures and types only. Include error/failure types where interactions can fail. See ./references/methodology-detail.md for interface definition patterns.
Boundary: No implementation logic. If a function body appears, it belongs at Level 5. Contracts reflect the design agreed at Levels 1-3, nothing more — no utility functions, helper methods, or convenience wrappers that are not part of the design. Every Level 3 interaction must map to at least one interface or type; no new interactions may appear here that were not agreed at Level 3.
Checkpoint: "Does this Level 4 (Contracts) look correct? Should I proceed to Level 5 (Implementation)?"
Purpose: Write code. Implement against the agreed contracts, within the agreed component boundaries, following the agreed interaction patterns.
Output format: Working code that fulfills the contracts defined at Level 4, each component implemented within its agreed boundary. The implementation is reviewable against the design: each component checked against its Level 2 description, each interaction against its Level 3 flow, each interface against its Level 4 contract.
STOP: Only after Level 4 is explicitly approved. Implementation follows the design; it must not introduce new components, new interactions, or new contracts that were not agreed upon.
No code until the design is agreed.
STOP: If you catch yourself writing function bodies before Level 5 is approved, return to the current design level and present only the output appropriate to that level.
| Task Complexity | Start At | Example |
|---|---|---|
| Simple utility | Level 4 (Contracts) | Date formatter, string helper |
| Single component | Level 2 (Components) | Validation service, API endpoint |
| Multi-component feature | Level 1 (Capabilities) | Notification system, payment flow |
| New system integration | Level 1 + deep Level 3 | Third-party API, event pipeline |
Before producing the first level output, state the entry level and rationale:
"Based on [complexity signal], I'll start at Level [N] ([name]). Earlier levels are implicitly agreed — [brief statement of what's assumed]. Want to start here or go broader?"
Wait for confirmation before producing the first level output. If the user disagrees, adjust the entry point.
At the end of each level:
Level 5 exit: there is no Level 6 — at Level 5 the protocol ends after step 2. Present the implementation for review instead of asking a gating question; the skill is complete once the user accepts the implementation or requests revisions to it.
Out-of-level input: If the user provides detail belonging to a later level (e.g., interaction detail during Level 2), acknowledge it — "Good thinking, I'll capture that at Level [N] ([name])" — and continue the current level. Do not ignore or reject it.
Backtracking: If a later level reveals a gap in an earlier level (e.g., a missing component discovered during Level 3), name the gap, propose a revision to the earlier level, get approval for the revision, then resume the current level.
Scope expansion at Level 5: If the user requests new scope during implementation, assess the impact. If it affects components or interactions, propose a mini-loop back to the affected level for agreement. If it is purely implementation detail (logging, config), incorporate it directly.
Mid-level exit: If the user says "skip to code" or "just implement it" before the design is complete, acknowledge the tradeoff before proceeding: "Skipping Level [N] means [what hasn't been aligned] — I'll flag any design gaps I notice as I implement. Proceeding now." Then implement. Do not refuse or block; note the risk and move forward.
Actively push back on unnecessary complexity: capabilities beyond scope, components that could merge, interaction steps that add no value, contracts carrying utility functions nobody requested. Present the simpler alternative first. Let the user choose to add complexity rather than have to remove it later.
| Anti-Pattern | Symptom | Fix |
|---|---|---|
| Level Collapse | Components described with implementation code | Strip the code; return to component boundaries only |
| Scope Creep | Level 1 lists capabilities not in the requirements | Remove unrequested items; confirm scope |
| Premature Detail | Level 2 includes sequence diagrams or data flow | Move interaction detail to Level 3 |
| Gold Plating | Contracts include utility functions not in the design | Remove them; contracts reflect the design, not extras |
| Skipping Levels | Jump from Level 1 to Level 4 | Back up; each level constrains the next |
| Silent Advancement | Moving to the next level without explicit approval | Always ask the gating question and wait |
| Feature Injection | Adding rate limiting, analytics, or hooks nobody asked for | Remove unrequested features; design only what was requested |
© techygarg, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
SKILL.md and 1 other file (references) in skills/design-first of techygarg/lattice.
Open the folder on GitHubat commit 4d6c35f
Design First next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Design First this skilltechygarg/lattice | 198 | — | ~2.3k | Automated safety check: Pass | MIT | |
| Developer Docs Editing Reviewhashgraph-online/awesome-codex-plugins | 1.2k | — | ~853 | Automated safety check: Pass | MIT | |
| Guidelinesakash-network/node | 1.1k | 22 repos | ~577 | Automated safety check: Pass | MIT | |
| Component Refactoringlangflow-ai/langflow | 156k | — | ~3.5k | Automated safety check: Pass | MIT | |
| Migrate Core Code to Submodulestinyhumansai/openhuman | 42k | — | ~2.6k | Automated safety check: Pass | GPL-3.0 | |
| Systematic Code Refactoringluongnv89/claude-howto | 42k | — | ~3k | Automated safety check: Pass | MIT |
hashgraph-online/awesome-codex-plugins
Edit and review developer documentation for technical accuracy, completeness, structure, clarity, brevity, peer feedback, technical review, technical verification, QA procedure testing, and feedback…
akash-network/node
Behavioral guidelines to reduce common LLM coding mistakes. An agent skill from akash-network/node.
langflow-ai/langflow
Refactor high-complexity React components in Langflow frontend.
tinyhumansai/openhuman
Plans and carries out moving non-host-specific code and its tests from the OpenHuman core into vendored tiny submodule libraries, then releases the submodule and re-pins the host.
luongnv89/claude-howto
Guides refactoring in phases based on Martin Fowler's method: research, test coverage check, planning and small tested steps, with your approval at each phase.
skills-directory/skill-codex
A skill your agent uses when the user asks to run Codex CLI (codex exec, codex resume) or references OpenAI Codex for code analysis, refactoring, or automated editing
techygarg/lattice
Architectural thinking partner for an existing repository — scans the codebase, conducts a structured interview, agrees on current architectural state and recommended direction, and produces a…
techygarg/lattice
Guided setup and upgrade-check experience for Lattice projects -- scans the repository, detects existing configuration and outdated conventions, suggests refiners and available upgrades in priority…
techygarg/lattice
Audit and fix all Lattice documentation, README, docs/, PROJECT.md, GitHub issue templates, and CLAUDE.md to ensure they are fully aligned with the current skill inventory.
techygarg/lattice
Validate any Lattice SKILL.md against all tier conventions — atoms, molecules, and refiners.
techygarg/lattice
Facilitate a structured conversation to define architecture principles for a repository.
techygarg/lattice
Facilitate a structured conversation to define clean code principles for a repository.
Categories
Guide structured design thinking through 5 progressive levels before any code is written. Design First is an agent skill from techygarg/lattice. Guide structured design thinking through 5 progressive levels before any code is written.
Design First fits situations like: building new features; refactoring significant code; designing modules; the user says design this.
Run `npx skills add techygarg/lattice --skill design-first -a claude-code`. Or copy the skill folder (skills/design-first in techygarg/lattice) into .claude/skills/design-first in your project. Claude Code loads it when a task matches its description.
Run `npx skills add techygarg/lattice --skill design-first -a codex`. Or copy the skill folder (skills/design-first in techygarg/lattice) into .agents/skills/design-first in your project. Codex loads it when a task matches its description.
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add techygarg/lattice --skill design-first -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/design-first, .gemini/skills/design-first, .github/skills/design-first and .opencode/skills/design-first in your project.
SKILL.md names no scripts, command-line tools or credentials: Design First is instructions for the agent only. Our summary lists: Python 3.
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
Design First is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
About 2.3k tokens (SKILL.md is roughly 9.1k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 1.1k tokens, read only when the agent opens those files.
Skills that share tags, products or a category with Design First: Developer Docs Editing Review (hashgraph-online/awesome-codex-plugins, 1.2k stars), Guidelines (akash-network/node, 1.1k stars), Component Refactoring (langflow-ai/langflow, 156k stars) and Migrate Core Code to Submodules (tinyhumansai/openhuman, 42k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
techygarg (a GitHub user) maintains it in techygarg/lattice, which has 198 GitHub stars. The repository holds 33 skills in this directory. The repository was last updated on October 6, 2026.
Source: techygarg/lattice on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.
