Claude Code skill · v0.27.0
ai-patterns
A design-engineering expert for AI product prototypes, installed straight into your coding agent.
Point it at a screen or flow you're building — a composer, a loading state, an agent trace, a diff review — and it shortlists from this catalogue, weighs each pattern's when to use against its when not to use, and scaffolds the one that actually fits. Not a component picker: a second opinion with taste.
/plugin marketplace add carlosmarch/ai-patterns
/plugin install ai-patterns@ai-patternsThen invoke /ai-patterns in any project — or just describe what you need and it routes itself.
Recommends
Shortlists candidates and justifies each pick against the pattern's own design rules — never forces a close-but-wrong fit.
Adapts
Defaults to this catalogue's look. Already have a design system? It keeps the UX contract and re-expresses it in yours.
Grows
Every pattern added to this catalogue is generated straight into the skill's reference material — nothing hand-duplicated, nothing to forget.
Three modes, one command
Everything runs through /ai-patterns — describe what you need and it routes itself, or name a mode directly.
list
Lists every pattern in the catalogue as a numbered inventory, grouped by category.
/ai-patterns list all patterns
review
Scans your project for hand-rolled UI a catalogue pattern could replace. Read-only — nothing gets edited.
/ai-patterns review my project
apply
Auto-detects the best-fit pattern, proposes it with a rationale, then scaffolds it once you confirm.
/ai-patterns add a loading state while the agent is working
Try it on a real request
Pick a request, copy the prompt, and paste it into your agent in any project. Each one says what the skill should land on, so you can check its judgment.
Agent loading state
Paste this into your coding agent with the skill installed — no command needed, it routes itself.
Our chat page shows a bare spinner while the agent runs tools, which can take 5–30 seconds. Users think it's frozen. Replace it with a loading state that tells them the agent is still working and roughly what it's doing. Propose the pattern you'd use and why before writing code, then build it with our existing components and tokens.
Expect Thinking Loader — and a note to stop it the moment the answer starts streaming.
How “patterns apply” works
- 1
Understand the task, not just the component named
“Add a loading state” is really “what does the user need to know while this is happening” — that’s what points at a Thinking Loader instead of a progress bar, or vice versa.
- 2
Shortlist, then read the full spec
Every pattern has a Summary, When to use, When not to use, Anatomy, Behavior, Content guidelines, and Accessibility section. The index alone is never enough to recommend from.
- 3
Check what your project already looks like
No established design system yet? It uses this catalogue's own Tailwind + Radix + Motion implementation as-is.
- 4
Scaffold with the contract intact
Already on shadcn, MUI, Chakra, or your own system? The behavior, content, and accessibility rules carry over — only the markup, styling, and motion API change.
- 5
Say so when nothing fits
If the catalogue doesn't have an answer, it says that plainly instead of stretching the nearest pattern to cover a case it wasn't designed for.
49 patterns, 21 categories — and growing
The skill never ships stale docs: its reference material is generated straight from this catalogue, so a new pattern here is a new capability there the moment it's regenerated and pushed.