Templates

---
description: "Project design identity. USE THIS whenever building, modifying, or reviewing any UI. Do not wait to be asked. If you are touching UI, this skill is active."
user-invocable: false
---

# {Project Name} Aesthetic — Design Identity

<!--
PACT Template: Create this file at .claude/skills/{project}-aesthetic.md

This is NOT a style guide. It's a design philosophy that shapes how the agent
approaches UI work. The key insight: being prescriptive ("use 12px padding,
#3b82f6 blue, 8px radius") produces generic output. Being evocative ("warm,
confident, playful") produces thoughtful output.

Fill in the sections below with YOUR project's design personality. Delete
the examples and write your own. The more specific to your project, the
better the agent's UI output will be.

PreFlight integration: The preflight-checks.yaml "aesthetic_engagement" check
will remind the agent to read this skill when editing UI files.
-->

## The Soul of {Project Name}

<!-- What is this project about? What feeling should the UI evoke? -->
<!-- Example: "This app documents play. It should feel alive, warm, personal." -->

{Describe the emotional core of your project in 2-3 sentences.}

### What "Good" Means Here

<!-- What does quality look like for YOUR project? Not generic "clean UI" —
     specific to your domain and users. -->

{Describe what mature, polished UI looks like in your context.}

## Design Instincts

<!-- These are principles, not rules. They should influence choices, not dictate them.
     Write them as imperatives that engage creative reasoning. -->

### {Instinct 1 Name}
{Description — what this means in practice for your project.}

### {Instinct 2 Name}
{Description.}

### {Instinct 3 Name}
{Description.}

## Color & Theming

<!-- How does color work in your project? Reference your theme system. -->

{Describe your color system, palette constraints, semantic color roles.}

## Typography

<!-- What's the typographic personality? Tight and dense? Generous and airy? -->

{Describe your type system, hierarchy, and any text style constraints.}

## Motion Vocabulary

<!-- What animations mean what? When should things move, and when should they be still? -->

| Motion | Meaning | When to Use |
|--------|---------|-------------|
| {type} | {what it communicates} | {when to apply it} |

## What This UI Is NOT

<!-- Anti-patterns. What should the agent actively avoid? -->

- Not {anti-pattern 1}
- Not {anti-pattern 2}
- Not {anti-pattern 3}

## The Repeat Test

<!-- Your version of "will this still feel good on the Nth use?" -->

{Describe how to evaluate whether UI decisions will age well.}