spencer-approved-frontends

Files (7)

• SKILL.md
• openai.yaml · agents/
• anti-patterns.md · references/
• full-index-css.md · references/
• full-tailwind-config.md · references/
• starter-app.md · references/
• textarea-autoresize.md · references/

SKILL.md (first lines)

# Spencer-Approved Frontends

The default "AI-generated frontend" look is wrong for Spencer. Glassy gradients, oversized hero text, generous padding, drop shadows on every card, blue-to-purple linear gradients, rounded-2xl everything, lucide icons everywhere — none of that. Spencer ships dense, neutral, system-font UIs that read like serious internal tooling. Think Linear, Notion's admin views, the macOS settings panel — not a SaaS landing page.

When in doubt, fewer pixels of decoration, smaller text, tighter spacing, and one neutral color ramp.

## When this overrides other skills

If `frontend-design` (or anything similar) is also active, this skill wins on style decisions. The other skill's process is fine; the visual defaults are not. Spencer's frontends look like the `due-diligence` and `security-review` repos in `~/Repos/`. If you have access to those repos and the user is starting something new, you may peek at them as ground truth. Otherwise, follow the patterns in this file.

## Stack defaults for new projects

For a new project from scratch, start here unless Spencer says otherwise:

- **React 18** with **Vite 5+** (not Next.js, not CRA)
- **TypeScript** strict mode + `noUncheckedIndexedAccess` + `noImplicitOverride`
- **Tailwind CSS 3.4** (NOT Tailwind 4 by default — Spencer's repos pin to 3.4)
- **npm** (not pnpm/yarn/bun)
- **No component library.** No shadcn, no Radix, no MUI, no Mantine, no Chakra, no Headless UI. Build the few primitives you need by hand (Modal, Badge, Button, InlinePicker).
- **No icon library** by default. Use small SVG inline or text glyphs (`::` for a drag handle, `×` for close). If Spencer asks for icons, ask which library before adding one.
- **No form library.** `useState` + a plain `<form onSubmit>` is enough.
- **No state library.** `useState` / `useReducer` / `useContext` is enough until proven otherwise. No Redux, Zustand, Jotai, Recoil.
- **No data fetching library.** Plain `fetch` wrapped in a small `lib/api.ts` module. No React Query, SWR, axios.
- **No animation library.** No framer-motion, no react-spring. CSS `transition` on hover/focus is the whole animation budget.
- **No router library** for small apps — manual `window.location.pathname` parsing in `App.tsx`. If the app grows past ~3 routes, ask Spencer if it's time for a router.

If Spencer asks for a different stack, follow Spencer. But propose this stack first.

## Project layout

```
src/
  App.tsx               root, manual routing
  main.tsx              entry
  index.css             global tokens + utilities
  components/           one .tsx per component, PascalCase
  lib/                  cx.ts, format.ts, api.ts, hooks
shared/                 types shared with backend, aliased as @shared/*
```

No barrel exports. No `pages/` directory for small apps. No co-located CSS files — Tailwind utilities only.

## The visual contract

Every Spencer UI obeys these defaults. Memorize them.

### Color tokens

Define these in `tailwind.config.ts` and `index.css` as CSS variables. Do not skip this step — Tailwind's default neutral palette is too cool and too saturated.

```ts
// tailwind.config.ts (excerpt)
colors: {
  surface: {
    DEFAULT: "#ffffff",
    soft:    "#fafafa",
    deep:    "#f5f5f4",
    hover:   "#f4f4f4",
  },
  ink: {
    DEFAULT: "#0a0a0a",
    soft:    "#404040",
    muted:   "#737373",
    faint:   "#a3a3a3",
  },
  line: {
    DEFAULT: "#eaeaea",
    strong:  "#d4d4d4",
  },
  // domain-specific severity ramp — rename per project
  // e.g. "risk" for due-diligence, "sev" for security-review,
  // "status" or "tier" for whatever the app is about
  risk: {
    critical: "#7f1d1d",
    high:     "#b91c1c",
    medium:   "#b45309",
    low:      "#1d4ed8",
  },
},
```

Pair each semantic color with a *soft background variant* via CSS variable, e.g. `--risk-high-soft`, used as `bg-[var(--risk-high-soft)]`. Soft backgrounds + saturated text = the badge look.

### Typography

```ts
fontFamily: {
  sans: ["-apple-system", "BlinkMacSystemFont", "'SF Pro Text'", "'Segoe UI'", "Roboto", "Helvetica", "Arial", "sans-serif"],
  mono: ["'SFMono-Regular'", "'SF Mono'", "Menlo", "Consolas", "monospace"],
},
```

System fonts only. No Google Fonts, no Inter, no Geist, no font imports.

**Allowed sizes** (use `text-[Npx]` arbitrary values where Tailwind defaults don't fit):

- `11px` — tracked labels, badges, dense buttons
- `12px` — primary buttons, dense controls
- `12.5px` — secondary buttons
- `13px` — body text (this is the base — the `<body>` itself is `font-size: 14px` with `line-height: 1.5`, but most app chrome is 13px)
- `15px` — modal titles, section headings

That is the whole scale. No `text-base`, no `text-lg`, no `text-2xl`, no hero text. If you need emphasis, use `font-semibold tracking-tight` at 15px, not bigger type.

For form/section labels, use this utility (defined in `index.css`):

```css
.tracked-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
```

### Spacing & density

Spencer's UIs are *dense*. Allowed spacing values, in order of frequency:

From schneidenbach/skills, MIT.

More from schneidenbach/skills