Design System
affaan-m/ECC
Generate a design system from an existing codebase or audit one for visual consistency: extract tokens (colors, typography, spacing, shadows) into design-tokens.json and CSS custom properties with…
Shared vocabulary for designing deep modules. An agent skill from fossasia/eventyay-interpretation.
Apache-2.0Auto-check passed
Install Codebase Design
$ npx skills add fossasia/eventyay-interpretation --skill codebase-design -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install fossasia/eventyay-interpretation codebase-design --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/fossasia/eventyay-interpretation.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/codebase-design .claude/skills/codebase-design && 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 "codebase-design" agent skill from https://github.com/fossasia/eventyay-interpretation/tree/dev/.agents/skills/codebase-design into .claude/skills/codebase-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "codebase-design", 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/fossasia/eventyay-interpretation/tree/dev/.agents/skills/codebase-designType 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 fossasia/eventyay-interpretation --skill codebase-design -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install fossasia/eventyay-interpretation codebase-design --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/fossasia/eventyay-interpretation.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.agents/skills/codebase-design .agents/skills/codebase-design && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "codebase-design" agent skill from https://github.com/fossasia/eventyay-interpretation/tree/dev/.agents/skills/codebase-design into .agents/skills/codebase-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "codebase-design", 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 fossasia/eventyay-interpretation --skill codebase-design -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install fossasia/eventyay-interpretation codebase-design --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/fossasia/eventyay-interpretation.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.agents/skills/codebase-design .cursor/skills/codebase-design && 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 "codebase-design" agent skill from https://github.com/fossasia/eventyay-interpretation/tree/dev/.agents/skills/codebase-design into .cursor/skills/codebase-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "codebase-design", 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/fossasia/eventyay-interpretation.git --path .agents/skills/codebase-design--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 fossasia/eventyay-interpretation --skill codebase-design -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install fossasia/eventyay-interpretation codebase-design --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/fossasia/eventyay-interpretation.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.agents/skills/codebase-design .gemini/skills/codebase-design && 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 "codebase-design" agent skill from https://github.com/fossasia/eventyay-interpretation/tree/dev/.agents/skills/codebase-design into .gemini/skills/codebase-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "codebase-design", 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 fossasia/eventyay-interpretation codebase-designInstalls 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 fossasia/eventyay-interpretation --skill codebase-design -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/fossasia/eventyay-interpretation.git skills-src && mkdir -p .github/skills && cp -r skills-src/.agents/skills/codebase-design .github/skills/codebase-design && 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 "codebase-design" agent skill from https://github.com/fossasia/eventyay-interpretation/tree/dev/.agents/skills/codebase-design into .github/skills/codebase-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "codebase-design", 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 fossasia/eventyay-interpretation --skill codebase-design -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install fossasia/eventyay-interpretation codebase-design --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/fossasia/eventyay-interpretation.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.agents/skills/codebase-design .opencode/skills/codebase-design && 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 "codebase-design" agent skill from https://github.com/fossasia/eventyay-interpretation/tree/dev/.agents/skills/codebase-design into .opencode/skills/codebase-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "codebase-design", 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.
Facts
- Skill name
codebase-design- GitHub stars
- 1.6k
- Used in
- 35 other repos
- Token cost
- ~1.5k tokens
- SKILL.md length
- 687 words
- Files
- 3
- Skills in repo
- 41
- Repo updated
- First seen
- Licence
- Apache-2.0
At a glance
Shared vocabulary for designing deep modules. An agent skill from fossasia/eventyay-interpretation.
- Works in 3 steps: Accept dependencies, don't create them. → Return results, don't produce side… → Small surface area. Fewer methods =…
- The user wants to design
- SKILL.md covers Glossary, Deep vs shallow, Principles and Designing for testability, plus 3 more sections
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
What it does
Codebase Design is an agent skill from fossasia/eventyay-interpretation. Shared vocabulary for designing deep modules. Use when the user wants to design or improve a module's interface, find deepening opportunities, decide where a seam goes, make code more testable or AI-navigable, or when another skill needs the deep-module vocabulary.
Its SKILL.md is about 1.5k tokens, which your agent loads only when the skill is triggered. The skill folder holds 2 other files (for example `DEEPENING.md` and `DESIGN-IT-TWICE.md`).
The repository describes itself as: A plugin for live interpretation of video streams. The licence is Apache-2.0.
When your agent uses it
- The user wants to design
- Improve a modules interface
- Find deepening opportunities
- Decide where a seam goes
Example prompts
- “/codebase-design”
Workflow steps
3 steps, taken from the first numbered list in SKILL.md.
- Accept dependencies, don't create them.
- Return results, don't produce side effects.
- Small surface area. Fewer methods = fewer tests needed. Fewer params = simpler test setup.
What it can do on your machine
Read from SKILL.md and the folder at commit 1ca0139. It shows what the files ask for, not the result of running them.
Tool permissions
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.
Runs code
No scripts in the folder and no shell commands in SKILL.md (its code samples are typescript).
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Codebase Design loads about 1.5k tokens when it runs. Until then it costs about 70 tokens; SKILL.md has 687 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.
Safety
Auto-check passed
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.
SKILL.md
The full file from fossasia/eventyay-interpretation at commit 1ca0139, republished under its Apache-2.0 licence (© fossasia). 687 words, ~1,520 tokens.
Download SKILL.mdSave it as
.claude/skills/codebase-design/SKILL.md (or your agent's skills folder). This skill also uses 2 other files; get the full folder from GitHub.- name
- codebase-design
- description
- Shared vocabulary for designing deep modules. Use when the user wants to design or improve a module's interface, find deepening opportunities, decide where a seam goes, make code more testable or AI-navigable, or when another skill needs the deep-module vocabulary.
Codebase Design
Design deep modules: a lot of behaviour behind a small interface, placed at a clean seam, testable through that interface. Use this language and these principles wherever code is being designed or restructured. The aim is leverage for callers, locality for maintainers, and testability for everyone.
Glossary
Use these terms exactly — don't substitute "component," "service," "API," or "boundary." Consistent language is the whole point.
Module — anything with an interface and an implementation. Deliberately scale-agnostic: a function, class, package, or tier-spanning slice. Avoid: unit, component, service.
Interface — everything a caller must know to use the module correctly: the type signature, but also invariants, ordering constraints, error modes, required configuration, and performance characteristics. Avoid: API, signature (too narrow — they refer only to the type-level surface).
Implementation — what's inside a module, its body of code. Distinct from Adapter: a thing can be a small adapter with a large implementation (a Postgres repo) or a large adapter with a small implementation (an in-memory fake). Reach for "adapter" when the seam is the topic; "implementation" otherwise.
Depth — leverage at the interface: the amount of behaviour a caller (or test) can exercise per unit of interface they have to learn. A module is deep when a large amount of behaviour sits behind a small interface, shallow when the interface is nearly as complex as the implementation.
Seam (Michael Feathers) — a place where you can alter behaviour without editing in that place; the location at which a module's interface lives. Where to put the seam is its own design decision, distinct from what goes behind it. Avoid: boundary (overloaded with DDD's bounded context).
Adapter — a concrete thing that satisfies an interface at a seam. Describes role (what slot it fills), not substance (what's inside).
Leverage — what callers get from depth: more capability per unit of interface they learn. One implementation pays back across N call sites and M tests.
Locality — what maintainers get from depth: change, bugs, knowledge, and verification concentrate in one place rather than spreading across callers. Fix once, fixed everywhere.
Deep vs shallow
Deep module = small interface + lots of implementation:
┌─────────────────────┐
│ Small Interface │ ← Few methods, simple params
├─────────────────────┤
│ │
│ Deep Implementation│ ← Complex logic hidden
│ │
└─────────────────────┘Shallow module = large interface + little implementation (avoid):
┌─────────────────────────────────┐
│ Large Interface │ ← Many methods, complex params
├─────────────────────────────────┤
│ Thin Implementation │ ← Just passes through
└─────────────────────────────────┘When designing an interface, ask:
- Can I reduce the number of methods?
- Can I simplify the parameters?
- Can I hide more complexity inside?
Show full SKILL.md (336 more words)Show less
Principles
- Depth is a property of the interface, not the implementation. A deep module can be internally composed of small, mockable, swappable parts — they just aren't part of the interface. A module can have internal seams (private to its implementation, used by its own tests) as well as the external seam at its interface.
- The deletion test. Imagine deleting the module. If complexity vanishes, it was a pass-through. If complexity reappears across N callers, it was earning its keep.
- The interface is the test surface. Callers and tests cross the same seam. If you want to test past the interface, the module is probably the wrong shape.
- One adapter means a hypothetical seam. Two adapters means a real one. Don't introduce a seam unless something actually varies across it.
Designing for testability
Good interfaces make testing natural:
Accept dependencies, don't create them.
typescript // Testable function processOrder(order, paymentGateway) {} // Hard to test function processOrder(order) { const gateway = new StripeGateway(); }Return results, don't produce side effects.
typescript // Testable function calculateDiscount(cart): Discount {} // Hard to test function applyDiscount(cart): void { cart.total -= discount; }Small surface area. Fewer methods = fewer tests needed. Fewer params = simpler test setup.
Relationships
- A Module has exactly one Interface (the surface it presents to callers and tests).
- Depth is a property of a Module, measured against its Interface.
- A Seam is where a Module's Interface lives.
- An Adapter sits at a Seam and satisfies the Interface.
- Depth produces Leverage for callers and Locality for maintainers.
Rejected framings
- Depth as ratio of implementation-lines to interface-lines (Ousterhout): rewards padding the implementation. We use depth-as-leverage instead.
- "Interface" as the TypeScript
interfacekeyword or a class's public methods: too narrow — interface here includes every fact a caller must know. - "Boundary": overloaded with DDD's bounded context. Say seam or interface.
Going deeper
- Deepening a cluster given its dependencies — see DEEPENING.md: dependency categories, seam discipline, and replace-don't-layer testing.
- Exploring alternative interfaces — see DESIGN-IT-TWICE.md: spin up parallel sub-agents to design the interface several radically different ways, then compare on depth, locality, and seam placement.
© fossasia, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 2 other files in .agents/skills/codebase-design of fossasia/eventyay-interpretation.
- SKILL.md
- DEEPENING.md
- DESIGN-IT-TWICE.md
Open the folder on GitHubat commit 1ca0139
Used in 36 other repositories
We found 44 copies of this SKILL.md (exact, near-identical or edited) in other folders, from 35 other GitHub owners. This page covers the copy in fossasia/eventyay-interpretation, which our catalogue first saw on October 7, 2026.
- bestofjs/bestofjs.agents/skills/codebase-design
- gusztavvargadr/packer.agents/skills/codebase-design
- fossasia/voxbento.agents/skills/codebase-design
- smontlouis/bible-strong.agents/skills/codebase-design
- gambitph/Stackable.cursor/skills/codebase-design
- brim-borium/spotify_sdk.agents/skills/codebase-design
- dzhalaevd/Donatello.agents/skills/codebase-design
- aidenlx/zotlit.agents/skills/codebase-design
- windmill-labs/windmill.agents/skills/codebase-design
- DouglasNeuroInformatics/OpenDataCapture.agents/skills/codebase-design
- jd-solanki/slidev-theme-dracula.ai/skills/codebase-design
- LibreChat-AI/LibreChat.claude/skills/codebase-design
- growupanand/ConvoForm.agents/skills/codebase-design
- nodetool-ai/nodetool.agents/skills/codebase-design
- biersoeckli/QuickStack.agents/skills/codebase-design
- jakehildreth/Locksmith2.agents/skills/codebase-design
- willdady/platypus.agents/skills/codebase-design
- ninehills/skillscodebase-design
- will-be-done/will-be-done.agents/skills/codebase-design
- ArcReel/ArcReel.agents/skills/codebase-design
- greenfield-inc/Panemain/src/services/paneChatBundle/skills/codebase-design
- Xircth/VibeX.agents/skills/codebase-design.claude/skills/codebase-design
- compozy/kb.agents/skills/codebase-design
- tt-a1i/matt-skills-with-to-goalskills/engineering/codebase-design
- rengwu/wayfinder-mapsskills/.optional/codebase-design
- egma-ai/egma.agents/skills/codebase-design
- sky-systems/sky_phone.agents/skills/codebase-design
- FeatherHunter/dsh-mattpocock-skills-deckpackage/bundled-skills/codebase-design
- wangmiaozero/pi-harnessresources/builtin-skills/mattpocock/skills/engineering/codebase-design
- bighadj22/codflow.agents/skills/codebase-design
- iamyoki/qwen-image-2.1-skill.agents/skills/codebase-design
- aiskillstore/marketplaceskills/mattpocock/codebase-design
- Asymmetric-al/core.agents/skills/codebase-design.claude/skills/codebase-design+2 more
- sickn33/agentic-awesome-skillsskills/codebase-designplugins/agentic-awesome-skills/skills/codebase-design+1 more
- mxyhi/ok-skillscodebase-design
- lingxling/awesome-skills-cnantigravity-awesome-skills/skills/codebase-designantigravity-awesome-skills/plugins/agentic-awesome-skills/skills/codebase-design+1 more
Compare with similar skills
Codebase Design 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 |
|---|---|---|---|---|---|---|
| Codebase Design this skillfossasia/eventyay-interpretation | 1.6k | 35 repos | ~1.5k | Automated safety check: Pass | Apache-2.0 | |
| Design Systemaffaan-m/ECC | 274k | — | ~698 | Automated safety check: Pass | MIT | |
| Design Guidepaperclipai/paperclip | 98k | 1 repos | ~3.1k | Automated safety check: Pass | MIT | |
| Design Audit Against Rams' Principlesthedotmack/claude-mem | 97k | — | ~4.6k | Automated safety check: Pass | Apache-2.0 | |
| Figma Design to Codewarpdotdev/warp | 65k | 4 repos | ~2.9k | Automated safety check: Pass | AGPL-3.0 | |
| Design Consultationgarrytan/gstack | 136k | — | ~15k | Automated safety check: Notes | MIT |
Similar skills
Design Guide
paperclipai/paperclip
Paperclip UI design system guide for building consistent, reusable frontend components.
Design Audit Against Rams' Principles
thedotmack/claude-mem
Audits a design against Dieter Rams' ten principles of good design, scores each with evidence, and hands off a make-plan prompt for a new, refined or redesigned outcome.
Figma Design to Code
warpdotdev/warp
Turns a Figma frame or component into production code that matches the design, using the Figma MCP server and the project's own design system.
Design Consultation
garrytan/gstack
Learns about your product, studies the landscape and writes a DESIGN.md with a full design system covering type, color, layout, spacing and motion.
Product Design Workflow Bundle
XiaomiMiMo/MiMo-Code
Entry point to a bundle of product design workflows covering context, research, audits, ideation, URL or image to code, design QA and sharing a prototype.
More from fossasia/eventyay-interpretation
All 41 skills in this repoGit Guardrails Claude Code
fossasia/eventyay-interpretation
Set up Claude Code hooks to block dangerous git commands (push, reset --hard, clean, branch -D, etc.) before they execute.
Diagnosing Bugs
fossasia/eventyay-interpretation
Diagnosis loop for hard bugs and performance regressions. An agent skill from fossasia/eventyay-interpretation.
Domain Modeling
fossasia/eventyay-interpretation
Build and sharpen a project's domain model. An agent skill from fossasia/eventyay-interpretation.
TDD
fossasia/eventyay-interpretation
Test-driven development. An agent skill from fossasia/eventyay-interpretation.
Improve
fossasia/eventyay-interpretation
Survey any codebase as a senior advisor and produce prioritized, self-contained implementation plans for OTHER models/agents to execute.
Migrate To Shoehorn
fossasia/eventyay-interpretation
Migrate test files from as type assertions to @total-typescript/shoehorn.
Questions about Codebase Design
What does Codebase Design do?
Shared vocabulary for designing deep modules. An agent skill from fossasia/eventyay-interpretation. Codebase Design is an agent skill from fossasia/eventyay-interpretation. Shared vocabulary for designing deep modules.
When should I use Codebase Design?
Codebase Design fits situations like: the user wants to design; improve a modules interface; find deepening opportunities; decide where a seam goes.
How do I install Codebase Design in Claude Code?
Run `npx skills add fossasia/eventyay-interpretation --skill codebase-design -a claude-code`. Or copy the skill folder (.agents/skills/codebase-design in fossasia/eventyay-interpretation) into .claude/skills/codebase-design in your project. Claude Code loads it when a task matches its description.
How do I install Codebase Design in Codex?
Run `npx skills add fossasia/eventyay-interpretation --skill codebase-design -a codex`. Or copy the skill folder (.agents/skills/codebase-design in fossasia/eventyay-interpretation) into .agents/skills/codebase-design in your project. Codex loads it when a task matches its description.
Can I use Codebase Design in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add fossasia/eventyay-interpretation --skill codebase-design -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/codebase-design, .gemini/skills/codebase-design, .github/skills/codebase-design and .opencode/skills/codebase-design in your project.
What does Codebase Design need to run?
SKILL.md names no scripts, command-line tools or credentials: Codebase Design is instructions for the agent only.
Does Codebase Design access the network?
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.
Is Codebase Design safe to install?
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.
What licence does Codebase Design use?
Codebase Design is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Codebase Design use?
About 1.5k tokens (SKILL.md is roughly 6.1k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Codebase Design?
Skills that share tags, products or a category with Codebase Design: Design System (affaan-m/ECC, 274k stars), Design Guide (paperclipai/paperclip, 98k stars), Design Audit Against Rams' Principles (thedotmack/claude-mem, 97k stars) and Figma Design to Code (warpdotdev/warp, 65k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Codebase Design?
fossasia (a GitHub organization) maintains it in fossasia/eventyay-interpretation, which has 1,552 GitHub stars. The repository holds 41 skills in this directory. The repository was last updated on October 5, 2026.
Source: fossasia/eventyay-interpretation on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.