Codebase Design

mattpocock/codebase-design · Agent Skill (multi-file)

by mattpocock · bundle

Published · Last updated


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.

SKILL.md

Files

This skill is a package of 4 files. Install with the command above, or download the folder.

  • 📄SKILL.md entry
  • 📁agents
  • openai.yaml GitHub 102 B
  • 📄DEEPENING.md GitHub 2.5 KB
  • 📄DESIGN-IT-TWICE.md GitHub 2.6 KB

Related

  1. Frontend Design · anthropic bundle
    Guides distinctive, intentional visual design for new UI or existing interfaces, covering aesthetic direction, typography, and avoiding templated defaults.
    158k
    repo stars
  2. Theme Factory · anthropic bundle
    Apply consistent, professional color palettes and font pairings to presentation slide decks and other artifacts using pre-set themes or custom on-the-fly generation.
    158k
    repo stars
  3. Canvas Design · anthropic bundle
    Creates visual art in .png and .pdf documents by first generating a design philosophy and then expressing it on a canvas.
    158k
    repo stars
  4. Frontend Design Review · microsoft bundle
    Review UI implementations against design quality standards and design system compliance, or create distinctive, production-grade frontend interfaces from scratch.
    2.7k
    repo stars
  5. Epic Design · alirezarezvani bundle
    Build cinematic, scroll-driven 2.5D websites with parallax depth, text animations, and premium effects using CSS and JavaScript.
    20.4k
    repo stars
  6. UI Design System · alirezarezvani bundle
    Generate design tokens, color palettes, typography scales, component systems, and developer handoff documentation for UI design systems.
    20.4k
    repo stars

Frequently asked questions

How do I install the Codebase Design skill?

Run npx skillmds add mattpocock/codebase-design in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

What does the Codebase Design skill do?

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. It is listed under Design & Media on SkillMD.

Is Codebase Design safe to use?

This skill has not completed SkillMD's automated safety review yet. Capability flags: docs only. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Codebase Design?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Codebase Design free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Codebase Design?

mattpocock (@mattpocock) published this skill. Their other Agent Skills are listed on their SkillMD profile.