design-systems:create
Create an opinionated design system as a DESIGN.md file. Triggers on: "create a design system", "generate DESIGN.md", "design system for [description]", "new design system", "design system", or /design-systems:create. Generates a complete DESIGN.md with Creative North Star, Core Prohibitions, Anti-Moodboard, and full token definitions. Actively avoids AI slop patterns.
What this skill does
# Create Design System
Generate a complete, opinionated DESIGN.md from a short description.
## Input
The user provides a short description of the desired aesthetic direction.
Examples:
- "dark editorial for a privacy-focused developer tool"
- "warm minimal for a recipe app"
- "brutalist for a crypto exchange"
If no description is provided, ask for one:
```
question: "Describe the design direction in a few words"
options:
- label: "Dark editorial"
description: "Moody, magazine-inspired, serif-forward"
- label: "Clean minimal"
description: "Extreme reduction, one accent color, invisible UI"
- label: "Bold brutalist"
description: "Hard edges, high contrast, raw structure"
- label: "Warm organic"
description: "Natural textures, warm palette, flowing forms"
```
## Generation Flow
### Step 1: Load References
Read these files before generating anything:
- `${CLAUDE_SKILL_DIR}/references/anti-slop.md` — patterns to avoid
- `${CLAUDE_SKILL_DIR}/references/aesthetic-seeds.md` — non-default starting directions
- `${CLAUDE_SKILL_DIR}/references/design-md-schema.md` — strict output schema
### Step 2: Select Aesthetic Seed
Based on the user's description, select the most appropriate seed from
`aesthetic-seeds.md`. The seed provides:
- Font pairing candidates (display + body + mono)
- Color derivation strategy
- Spatial philosophy
- Elevation approach
- Natural prohibitions
The seed is a **starting direction**, not a template. Adapt and build
on it based on the user's specific needs. Combine elements from
multiple seeds if the description warrants it.
### Step 3: Generate DESIGN.md
Follow the strict schema from `design-md-schema.md` exactly. Generate
all 7 sections with all required subsections.
**Anti-Slop Enforcement — CRITICAL:**
For EVERY design decision, cross-check against `anti-slop.md`. This
is not optional. The following checks are mandatory:
| Section | Anti-Slop Checks |
|---------|-----------------|
| Typography | No Inter, Roboto, Open Sans, Lato, Arial as primary. Weight contrast must be extreme (not 400 vs 600). Size jumps 3x+ between levels. |
| Colors | No purple/indigo gradient defaults. No pure #000000 or #ffffff. Palette has one dominant + sharp accent, not evenly distributed. No cyan-on-dark neon default. |
| Layout | Prohibitions must ban at least one layout anti-pattern. No uniform spacing throughout. |
| Shadows | No `box-shadow: 0 4px 6px rgba(0,0,0,0.1)`. All shadows hue-tinted or otherwise distinctive. |
| Components | No `border-radius: 8-12px` + generic shadow combo. No left-border accent on all cards. Button hierarchy (primary/secondary/tertiary) must be visually distinct. |
| Do's/Don'ts | Must include relevant AI Slop checklist items as Don'ts. |
If a generated value matches a flagged anti-slop pattern, choose an
alternative. Do not proceed with slop values.
### Step 4: Auto-Detect Placement
Scan the project to determine where DESIGN.md should live:
1. Look for framework indicators:
- `src/components/`, `src/app/`, `src/pages/` → project root
- `app/` (Next.js app router) → project root
- `packages/ui/`, `packages/web/`, `packages/frontend/` → that package root
2. In a monorepo, find the topmost directory containing all UI packages
3. Fall back to project root
4. Present the proposed path to the user, allow override
Use Glob to scan: `**/src/components`, `**/src/app`, `**/packages/*/src`,
`**/app`, `**/pages`.
### Step 5: Write DESIGN.md
Write the generated content to the detected/chosen path.
### Step 6: Update CLAUDE.md
At the same directory level as DESIGN.md, add to (or create) a CLAUDE.md:
```markdown
## Design System
Read and follow DESIGN.md for all UI work.
Never violate the Core Prohibitions defined in DESIGN.md.
Check the Anti-Moodboard before proposing any visual direction.
```
If a CLAUDE.md already exists, append this block. If it doesn't exist,
create it with this content.
### Step 7: Report
Tell the user:
- Where DESIGN.md was written
- The Creative North Star name
- How many Core Prohibitions were defined
- That CLAUDE.md was updated
- Suggest running `/design-systems:specimen` to preview the system
## Post-Generation Validation
After writing, run the validation checklist from `design-md-schema.md`:
- Verify all 7 sections present
- Verify no banned fonts in type scale
- Verify no anti-slop patterns in palette
- Verify Core Prohibitions are mechanically checkable
- Verify Anti-Moodboard has at least 2 rejections
If any check fails, fix the issue before presenting to the user.
Related in Design
contribute
IncludedLocal-only OSS contribution command center. Auto-refreshes the user's in-flight PR and issue state on invoke so conversations start with full context — no need to brief Claude on what's in flight. Helps the user find issues to contribute to on GitHub, builds per-repo dossiers of what each upstream expects (CLA, DCO, branch convention, AI policy, draft-first, review bots, issue templates), runs deterministic gates before any external action so AI-assisted contributions don't reach maintainers as slop. State is markdown-only: candidate files at ~/.contribute-system/candidates/, repo dossiers at ~/.contribute-system/research/, append-only event log at ~/.contribute-system/log.jsonl. No database, no cloud calls. Use when the user asks about their PRs / issues / contributions, wants to find new work to take on, claim an issue, build/refresh a repo's dossier, or draft a Design Issue or PR. Trigger with "/contribute", "what's my PR status", "find a contribution", "claim issue X", "draft a Design Issue for Y", "refresh dossier for Z".
architectural-analysis
IncludedUser-triggered deep architectural analysis of a codebase or scoped subtree across eight modes — information architecture, data flow, integration points, UI surfaces, interaction patterns, data model, control flow, and failure modes. This skill should be used when the user asks to "diagram this codebase," "map the architecture," "show the data flow," "give me an ERD," "trace control flow," "find the integration points," "verify the layout pattern," "audit the UX architecture," or any similar request whose primary deliverable is mermaid diagrams plus cited reports under docs/architecture/. Dispatches haiku/sonnet sub-agents in parallel for per-mode exploration, then verifies every citation mechanically before any node lands in a diagram. Not for one-off prose explanations of code (use code-explanation) or for high-level system design from scratch (use system-design).
mcp
IncludedModel Context Protocol (MCP) server development and tool management. Languages: Python, TypeScript. Capabilities: build MCP servers, integrate external APIs, discover/execute MCP tools, manage multi-server configs, design agent-centric tools. Actions: create, build, integrate, discover, execute, configure MCP servers/tools. Keywords: MCP, Model Context Protocol, MCP server, MCP tool, stdio transport, SSE transport, tool discovery, resource provider, prompt template, external API integration, Gemini CLI MCP, Claude MCP, agent tools, tool execution, server config. Use when: building MCP servers, integrating external APIs as MCP tools, discovering available MCP tools, executing MCP capabilities, configuring multi-server setups, designing tools for AI agents.
react-native-skia
IncludedDesign, build, debug, and optimise high-polish animated graphics in React Native or Expo using @shopify/react-native-skia, Reanimated, and Gesture Handler. Use when the user wants canvas-driven UI, shaders, paths, rich text, image filters, sprite fields, Skottie, video frames, snapshots, web CanvasKit setup, or performance tuning for custom motion-heavy elements such as loaders, hero art, cards, charts, progress indicators, particle systems, or gesture-driven surfaces. Also use when the user asks for fluid, glow, glass, blob, parallax, 60fps/120fps, or GPU-friendly animated effects in React Native, even if they do not explicitly say "Skia". Do not use for ordinary form/layout work with standard views.
plaid
IncludedProduct Led AI Development — guides founders from idea to launched product. Six capabilities: Idea (discover a product idea), Validate (pressure-test the idea against fatal flaws, problem reality, competition, and 2-week MVP feasibility), Plan (vision intake + document generation), Design (translate image references into a design.md spec), Launch (go-to-market strategy), and Build (roadmap execution). Use when someone says "PLAID", "plaid idea", "help me find an idea", "product idea", "idea from my business", "idea from my expertise", "plaid validate", "validate my idea", "pressure-test", "is this idea good", "find fatal flaws", "validate the problem", "plan a product", "define my vision", "generate a PRD", "product strategy", "plaid design", "design from image", "translate image to design", "create design.md", "extract design tokens", "plaid launch", "go-to-market", "launch plan", "GTM strategy", "launch playbook", "plaid build", "build the app", "start building", or "execute the roadmap".
nextjs-framer-motion-animations
IncludedAdds production-safe Motion for React or Framer Motion animations to Next.js apps, including reveal, hover and tap micro-interactions, whileInView, stagger, AnimatePresence, layout and layoutId transitions, reorder, scroll-linked UI, and lightweight route-content transitions. Use when the user asks to add, refactor, or debug Motion or Framer Motion in App Router or Pages Router codebases, especially around server/client boundaries, reduced motion, LazyMotion, bundle size, hydration, or route transitions. Avoid for GSAP-style timelines, WebGL or 3D scenes, heavy scroll storytelling, or CSS-only effects unless Motion is explicitly requested.