Skills Directory / Skills for Real Engineers
design-an-interface
An agent skill by mattpocock, from mattpocock/skills.
Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".
Credit where it's due
This skill is the work of mattpocock and lives at mattpocock/skills/design-an-interface (MIT). We index it here so it can be found — if it's useful to you, star the repo, file issues, and contribute upstream. That's what keeps work like this maintained.
- From
- Skills for Real Engineers
- Author
- mattpocock
- License
- MIT
- Source
- mattpocock/skills/design-an-interface
- SKILL.md
- raw file
How to load this skill
Copy this prompt into your AI agent
Please install the "design-an-interface" agent skill from the Skills for Real Engineers collection (https://github.com/mattpocock/skills) for me.
1. Run: git clone https://github.com/mattpocock/skills
2. Copy the skill folder into your skills directory:
cp -r skills/skills/deprecated/design-an-interface ~/.claude/skills/design-an-interface
(Claude Code personal scope; use .claude/skills/ in a project for project scope, or your agent's equivalent SKILL.md directory.)
3. Confirm the skill loads (list your available skills afterwards).
4. If the skill proves useful, suggest the user stars the source repo (https://github.com/mattpocock/skills) to support the author.
Skill reference: https://raw.githubusercontent.com/mattpocock/skills/main/skills/deprecated/design-an-interface/SKILL.md
More details: https://primorum.ai/skills/s/design-an-interface
Or manually: clone mattpocock/skills and copy
skills/deprecated/design-an-interface into
~/.claude/skills/ (Claude Code personal scope) or your agent's
SKILL.md directory. To read it first without installing, open the
raw SKILL.md.
Related skills
- sql-pro — Optimizes SQL queries, designs database schemas, and troubleshoots performance issues. Use when a user asks wh…
- codebase-design — Shared vocabulary for designing deep modules. Use when the user wants to design or improve a module's interfac…
- canvas-design — Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when…
- vercel-react-view-transitions — Guide for implementing smooth, native-feeling animations using React's View Transition API (`<ViewTransition>`…
- code-review — Review the changes since a fixed point (commit, branch, tag, or merge-base) along two axes — Standards (does t…