Acumen: Skill for Claude Code

MANDATORY PREPARATION

Invoke /product-thinking — it contains product principles and the Context Gathering Protocol. Follow the protocol before proceeding — if no product context exists yet, you MUST run /teach-acumen first.

Mindset: A brand is a contract with the people you serve, expressed in design decisions. DESIGN.md makes that contract legible to coding agents so UI work stays consistent without re-prompting. Tokens give agents exact values; prose tells them why those values exist.

DESIGN.md follows the Google DESIGN.md spec. It lives at the project root (not in .acumen/) and IS checked in — it's a contract, not gitignored context.

Behavior

When called with a section argument (colors, typography, components, spacing, rounded): Update only that section. Ask the user what changed and why.

When called without argument or with all: Full scan and refresh. Build from existing styles outward, not from a blank template.

Research Process

1. Read .acumen.md for product context — positioning, audience, brand voice cues
2. Read existing DESIGN.md if it exists
3. Scan the codebase for source-of-truth styles:
   • tailwind.config.{js,ts} — theme.extend colors, fontFamily, spacing, borderRadius
   • app/globals.css / src/styles/*.css — CSS custom properties (--color-*, --font-*)
   • Component primitives (Button, Card, Input) — extract token usage patterns
   • Any existing design tokens file (tokens.json, tokens.css)
4. Read brand prose if available — README, marketing site copy, brand guidelines doc
5. For each token category, capture both the value and the rationale:
   • Colors — primary, secondary, tertiary, neutral; what each is for, not just what it is
   • Typography — heading scale, body, captions; voice the type carries (authority, warmth, precision)
   • Spacing & rounded — rhythm and softness; what the system feels like
   • Components — map composite tokens (button-primary, button-primary-hover) to primitives via references like {colors.tertiary}