indiestack: Skill for Claude Code

IndieStack Frontend Design

Use this skill for ANY visual or UI work on IndieStack — new pages, redesigns, component updates, or polish passes. This enforces the exact aesthetic, tokens, and constraints so nothing drifts.

Aesthetic Target

Linear.app meets Stripe Docs. Clean, precise, confident. Dark mode that looks intentional, not inverted. Warm personality without gratuitous decoration.

References to study: Linear (spatial hierarchy, dark mode confidence, typography weight), Stripe Docs (spacing, code blocks, information density), Vercel (motion, transitions, compositional balance).

Anti-references (NEVER do these):

• Purple gradients on white backgrounds
• Gradient blobs / mesh backgrounds on content pages
• Stock photos or placeholder illustrations
• Over-rounded everything (16px+ radius on small elements)
• Parallax, scroll-jacking, or animations that delay content
• Generic SaaS template layouts (three-column feature grids with emoji icons)

Architecture Constraint

Pure Python f-string HTML. No React, no Jinja2, no build step. All pages are FastAPI route functions returning HTMLResponse(page_shell(...)). CSS lives in components.py design tokens or inline styles.

File structure:

• src/indiestack/routes/components.py — design tokens (:root), nav, footer, shared components
• src/indiestack/routes/<page>.py — page-specific routes with inline HTML
• New CSS classes go in components.py design_tokens() function
• Reusable components go in components.py as Python functions

Design Tokens (Enforced)

Colors — USE THESE EXACT VARIABLES

/* Primary */             --terracotta: #1A2D4A;     /* Navy — legacy name, DO NOT rename */
/* Primary light */       --terracotta-light: #2B4A6E;
/* Primary dark */        --terracotta-dark: #0F1D30;
/* Accent */              --accent / --slate: #00D4F5; /* Cyan */
/* Highlight */           --gold: #E2B764;
/* Surfaces */            --cream: #F7F9FC;  --cream-dark: #EDF1F7;  --card-bg: white;
/* Text */                --ink: #1A1A2E;  --ink-light: #475569;  --ink-muted: #64748B;
/* Border */              --border: #E2E8F0;