From craft-skills
Generates or verifies project's one-time AESTHETIC_DIRECTION.md design-language contract for UI work, auto-invoked by architect/craft when UI planned and file missing.
How this skill is triggered — by the user, by Claude, or both
Slash command
/craft-skills:aesthetic-directionThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Produce a one-time, project-level design-language contract at `.claude/aesthetic-direction.md`. All downstream UI work (ux-brief, design-review) reads this file as the source of truth for the project's visual system.
Produce a one-time, project-level design-language contract at .claude/aesthetic-direction.md. All downstream UI work (ux-brief, design-review) reads this file as the source of truth for the project's visual system.
Write it once per project. Regenerate only when the design system meaningfully changes (new theme, new UI library, rebranding).
Architect/craft/implement call this skill only when both are true:
.claude/aesthetic-direction.md does NOT existIf the file exists, skip this skill and load the file as context.
No arguments needed. The skill reads the project directly.
# Check if frontend-design skill is available
FD_AVAILABLE=$(find ~/.claude/plugins -type d -name "frontend-design" 2>/dev/null | head -1)
if [ -n "$FD_AVAILABLE" ]; then echo "FD_AVAILABLE"; else echo "FD_UNAVAILABLE"; fi
FD_AVAILABLE → proceed with skill invocation (Step 2a)FD_UNAVAILABLE → fallback template generation (Step 2b)Read, in this order:
tailwind.config.* if present, postcss.config.*src/**/globals.css or equivalent theme fileInvoke the frontend-design:frontend-design skill via the Skill tool. Ask it to produce an aesthetic direction document constrained to the project's existing visual vocabulary. Explicit constraints:
Structure the output (write to .claude/aesthetic-direction.md) using this template:
# {Project Name} — Aesthetic Direction
> One-time design-language contract. Updated manually when the design system changes.
> Generated: {YYYY-MM-DD} by craft-skills:aesthetic-direction
## One-sentence north star
{What this product *feels* like in one sentence.}
## Reference atmosphere
{2-3 sentences capturing the tone: clinical-calm / editorial-dense / playful-minimal / etc.
Who the user is, what they expect visually.}
## Voice & tone
| Dimension | Direction |
|---|---|
| Voice | {editorial / conversational / instructional} |
| Warmth | {low / medium / high, with rationale} |
| Density | {high / medium / low} |
| Humor | {none / dry / warm} |
| Numbers | {how precision is conveyed — tabular, bold, inline} |
| Labels | {microcopy conventions} |
## Typography system (observed, not invented)
- **Primary:** {font family, source, when to use}
- **Body:** {font family, weights used}
- **Data/numerics:** {tabular-nums required y/n, mono font if applicable}
Name the exact fonts currently declared in the project. If none are declared, note "system fonts currently — direction should preserve this restraint or name a specific font to adopt."
## Color philosophy
- **Canvas/background:** {token + hex}
- **Ink/text:** {token + hex}
- **Primary accent:** {token + hex + when to use}
- **Semantic tokens:** {success / warning / error — usage rules}
- **What NOT to use:** {colors/tokens explicitly ruled out}
List tokens exactly as they appear in the project (e.g. `--color-primary`, `oklch(...)`, DaisyUI theme name).
## Density & spacing
- Padding rhythm: {e.g. "4-8-16-24", or specific to DaisyUI/Tailwind scale}
- Radii: {small/medium/large tokens with values}
- Card/container shape: {bordered / shadowed / flat}
- Motion budget: {animations allowed, durations, reduced-motion handling}
## What this direction RULES OUT
Explicit list. Prevents downstream agents from introducing:
- Specific fonts/colors that don't fit
- Patterns the project deliberately avoids (e.g., "no purple gradients," "no glassmorphism")
- Component libraries or utilities that would clash
## Signature elements (memorable)
1-3 visual signatures that, if lost, would change the product's identity. E.g., "teal primary + warm base-100," "small-caps section labels," "hairline dividers instead of cards."
## Accessibility baseline
- Minimum contrast ratio for this project
- Focus-visible convention
- Color-is-not-the-only-encoder rule
- Motion-reduce handling
## How to use this file
Downstream skills (`ux-brief`, `design-review`) read this file as input. When reviewing new UI work, they check the result against this direction. When proposing UI patches, they respect these rules.
If the design system meaningfully changes (new theme, new brand, new UI library), update this file manually — DO NOT regenerate from scratch without preserving intentional decisions.
If the skill is not available, generate a minimal direction by extracting observable facts from the codebase. No creative authorship — just document what is.
> AUTO-GENERATED without frontend-design skill. Please refine voice/tone/signature sections manually..claude/aesthetic-direction.mdQuality will be lower but downstream skills still have a contract to read. User can refine later.
Tell the user in one sentence:
"Generated
.claude/aesthetic-direction.mdfrom {method: frontend-design skill | observed tokens}. Downstream UI work will use it as the design-language contract. Refine it anytime; changes stick."
Do NOT block on user approval — pipeline continues. User reviews asynchronously.
.claude/aesthetic-direction.mdOther skills that consume this file:
craft-skills:ux-brief — reads it as context when drafting per-feature UX briefscraft-skills:design-review — uses it as the reference for regression and distinctiveness checkscraft-skills:simplify — consults it during UI quality reviewArchitect / craft / implement / finalize invoke aesthetic-direction as a prerequisite when UI work is detected and the file is missing. They do NOT invoke it for features with no UI layer.
npx claudepluginhub alexiolan/craft-skills --plugin craft-skillsReads a DESIGN.md file (open standard from Google Labs) and builds brand-consistent UI from its design tokens. Use when a DESIGN.md is present or user provides one.
Captures aesthetic intent, generates DESIGN.md with anti-patterns and platform notes, reviews components against guidelines, and enforces design constraints at configurable strictness levels.
Generates and maintains a design manifest for visual consistency. Extracts existing styles from Tailwind config, CSS, and components, or creates a starter manifest for new projects. Post-edit hook flags deviations from the manifest.