# Design

Generates and maintains a design manifest for visual consistency.

- Repository: https://github.com/SethGammon/Citadel (927 stars)
- Category: Design
- License: MIT
- Last updated: 2026-10-30
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add SethGammon/Citadel --skill design -g -a claude-code -y`
Codex: `npx skills add SethGammon/Citadel --skill design -g -a codex -y`
Cursor: `npx skills add SethGammon/Citadel --skill design -g -a cursor -y`
Gemini CLI: `npx skills add SethGammon/Citadel --skill design -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add SethGammon/Citadel`

## Description

Generates and maintains a design manifest for visual consistency. In existing projects, reads current styles and documents the design language. In new projects, asks a few questions and generates a starter manifest. The post-edit hook reads the manifest and flags deviations.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# /design, Design Manifest Generator

## When to Use

- At the start of a new project (generate starter manifest from preferences)
- On an existing project that has no manifest (extract patterns from existing code)
- When visual inconsistency is noticed ("why do we have 4 different button styles?")
- When /do routes "design", "style guide", "visual consistency", "design manifest"

## Protocol

### Step 1: DETECT MODE

Check for existing styles: look for `tailwind.config.*`, global CSS files, or component files with style patterns. If any exist, use Extract Mode. If none exist or the user says "new project", use Generate Mode.

### Step 2: GATHER INPUT

**Extract Mode**: Read style sources (tailwind config, global CSS, component files). Present findings to user and confirm before writing.

**Generate Mode**: Ask up to 4 questions about feel, color mode, brand colors, and layout density. Use sensible defaults for anything not specified.

### Step 3: WRITE MANIFEST

Write to `.planning/design-manifest.md` using the template defined below. Every section must have real values, no placeholders.

### Step 4: CONFIRM

Present a summary of the manifest to the user: "Here's your design manifest. It will be used by the post-edit hook to flag deviations. Anything to change?"

## Modes

### Extract Mode (existing project has styles)

1. Read `tailwind.config.*`, extract colors, spacing, fonts, breakpoints
2. Read global CSS files, extract CSS variables, base styles
3. Scan 5-10 component files, values used 3+ times become the palette, scale, type scale, shape language, and elevation scale; note component patterns (card, button, input)
4. Present findings: "Here's what I found. Does this look right?"
5. Write manifest after user confirms

### Generate Mode (new project or no existing styles)

The rest: https://github.com/SethGammon/Citadel/blob/HEAD/skills/design/SKILL.md