Use Style

---
name: use-style
description: Apply named visual style guides to landing pages, app shells, and UI. Use for $use-style, /useskill, list styles, or styles like ios-app, grid, vercel, black-grid, stripe, linear, raycast, gumroad, dusk, or luma.
disable-model-invocation: true
user-invocable: true
---

Load and apply a named style before designing or implementing any UI.

## Invocation

- Explicit: `$use-style ios-app`, `$use-style vercel`, `$use-style black-grid`, `/useskill list`, or "use the grid style"
- Implicit: user references NowStack Mobile, Ink & Spark, an iOS app shell, Expo / React Native / NativeWind app UI, `/aiblueprint`, `/agents`, `/aibuilder`, "grid theme", Vercel, Geist, a minimalist dark tool UI, Stripe / fintech / checkout / dashboard UI, Linear / issue tracker / app-shell sidebar UI, NYT / newspaper / editorial / broadsheet / magazine layouts, Anthropic / Claude / warm cream AI-lab pages, Gumroad / neo-brutalist / loud commerce / bold yellow-pink pages, Raycast / glossy dark / glow gradients / floating glass nav / premium product marketing, Dusk / Attio / dark CRM dashboard floating on a twilight backdrop / blue data viz / colorful category pills, Luma / lu.ma / event timeline / calendar / RSVP / discover / a dark consumer events-and-calendar app with photo-led cards, a top teal aurora, and a white pill button, or TestSprite / TestSpirite / calm light dev-tool dashboard / warm paper canvas with one forest-green accent / grouped sidebar + promo rail / isometric line-art empty states

Parse the style name from `$ARGUMENTS` or the message. Treat `super-simple`, `super simple`, `SUPER_SIMPLE`, and `supersimple` as `super-simple`. Treat `ios`, `ios app`, `ios-app`, `iphone app`, `nowstack-mobile`, `nowstack mobile`, and `ink & spark` as `ios-app`. Treat `use-vercel`, `vercel style`, and `current vercel` as `vercel`. Treat `vercel-simple`, `old vercel`, `black grid`, and `black-grid` as `black-grid`. Treat `testsprite`, `test-sprite`, and `test sprite` as `testspirite`. Treat `luma`, `lu.ma`, and `luma.com` as `luma`. Treat `list`, `styles`, `available styles`, and missing style names with no implicit match as a request to list available styles and ask the user to choose before designing. Default to `ios-app` when the user references NowStack Mobile, Ink & Spark, an iOS app shell, Expo, React Native, NativeWind, or OS-native tabs. Default to `grid` for Codelynx product landings. Default to `vercel` when the user references Vercel, the Vercel dashboard, Geist, Vercel's changelog, or black infrastructure marketing with large editorial whitespace. Default to `black-grid` for austere monochrome developer tools, calculators, indexes, or line-driven data products. Default to `linear` when the user references Linear, an issue tracker, or a dense sidebar + list + detail app shell. Default to `new-york-times` when the user references a newspaper, broadsheet, magazine, or serif editorial layout. Default to `anthropic` when the user references Anthropic, Claude, or a warm cream + serif AI-lab aesthetic. Default to `gumroad` when the user references Gumroad, neo-brutalism, hard offset shadows, or a loud yellow/pink bordered look. Default to `raycast` when the user references Raycast, a glossy dark page with glow gradients, a floating glass nav, or premium dark product marketing. Default to `dusk` when the user references Attio, a dark CRM/data dashboard floating on a twilight/aurora backdrop, vivid-blue charts, or colorful category pills. Default to `testspirite` when the user references TestSprite, a calm light dev-tool dashboard, a warm paper canvas with a single forest-green accent, a grouped sidebar with a free-trial/upgrade promo rail, or isometric line-art empty states. Default to `luma` when the user references Luma, lu.ma, an event timeline/feed, a calendar or RSVP/invite app, a discover page, or a dark consumer events UI with photo-led cards, a top teal aurora, and a white pill button.

If the parsed style is `list`, or if no style can be inferred, do not load a style file. Reply with the available styles table below, add one short line asking which style to use, and stop until the user chooses.

## Workflow

1. Read `styles/<name>.md` from this skill directory.
2. Check for project overrides and prefer them over the portable spec:
   - `.agents/styles/<name>.md`
   - `.agents/styles/<name>-theme.md`
   - `.agents/styles/<name>-theme-migration.md` (migration playbooks only)
3. Treat the loaded style as hard constraints for layout, typography, color, borders, motion, and component choice.
4. Reuse existing primitives. In Codelynx repos, import `GridTheme*` components from `grid-theme-primitives.tsx` instead of reinventing patterns.

## Available styles

| Style | File | Vibe |
|-------|------|------|
| `ios-app` | `styles/ios-app.md` | NowStack Mobile Ink & Spark. iOS/Expo app UI with monochrome ink/paper, one yellow `#FFE040` spark, NativeWind tokens, OS-native tabs, flat hairline cards. |
| `grid` | `styles/grid.md` | Blueprint landing. Square geometry, 1px borders, mono data, condensed display type. |
| `vercel` | `styles/vercel.md` | Current Vercel product language. Black canvas, Geist Sans, hairline dashboard structure, dense deployment lists, vast editorial marketing space, restrained semantic color. |
| `black-grid` | `styles/black-grid.md` | Austere monochrome developer tools. Black canvas, Geist + mono, sharp line-defined indexes and calculators, no decoration. |
| `stripe` | `styles/stripe.md` | Stripe fintech UI. Pale `#f6f9fc` canvas, white cards on soft shadows, blurple `#635BFF` accent, green CTA, rounded geometry. |
| `linear` | `styles/linear.md` | Linear app shell. Near-black `#08090a` canvas, dense aligned sidebar + list + detail panes, indigo `#5e6ad2` accent, Inter Display headings, quiet line-defined chrome. |
| `new-york-times` | `styles/new-york-times.md` | Print-newspaper editorial. Paper-white, serif headlines (Cheltenham/Georgia), Franklin sans kickers, blackletter masthead, hairline rules, multi-column grid, red/blue accents only. |
| `anthropic` | `styles/anthropic.md` | Warm AI-lab. Cream `#f0efe9` paper, bold grotesque sans display + reading serif, clay-coral `#cc785c` accent, big soft-rounded dark panels, pill buttons. Light marketing + dark Claude app surfaces. |
| `gumroad` | `styles/gumroad.md` | Loud neo-brutalist commerce. Yellow `#ffc900` + pink `#ff90e8`, thick black borders, hard offset shadows `4px 4px 0 #000`, flat fills, bold geometric sans, pill buttons. Light marketplace + dark dashboard surfaces. |
| `raycast` | `styles/raycast.md` | Glossy dark product marketing. Near-black `#0a0a0a` + red `#ff6363` glow, floating glass nav (`backdrop-blur`), oversized bold pricing, large-radius `rounded-3xl` cards, soft glow over hard shadows. |
| `dusk` | `styles/dusk.md` | Refined dark data app (Attio-style). Rounded near-black window floating on a twilight gradient backdrop, vivid sky-blue `#38bdf8` charts, `#3b6eff` primary, colorful category pills, Inter + mono numbers. |
| `luma` | `styles/luma.md` | Dark consumer events + calendar app (Luma/lu.ma). Near-black `#0a0a0b` canvas with one soft teal aurora at the top, near-borderless `rounded-2xl` photo-led cards, white pill primary buttons, blue `#2f6bff` status pills, gold `#f5b13d` event times, centered timeline column. |
| `testspirite` | `styles/testspirite.md` | Calm light dev-tool app shell (TestSprite). Warm paper-white `#f7f7f3` canvas, one forest-green `#3d7c4e` accent, grouped sidebar + promo rail, soft `rounded-xl` cards on quiet borders, pale-green `#eaf3ea` status pills, isometric line-art empty states. |
| `super-simple` | `.agents/styles/super-simple-theme.md` | Sales letter. White canvas, Inter, highlighter marks, blue `#258eff` pills, numbered steps. Reference: `/aibuilder/v2`. |

Add new styles as `styles/<name>.md` and register them here.

## Output rules

- Match the style vibe precisely. Do not blend with generic SaaS aesthetics.
- Honor the anti-patterns section in the style file.
- When a project spec lists concrete tokens or components, use those over prose approximations.
- For landing pages, scaffold the page shell from the style first, then fill sections.

## Related skills

- `frontend-design` / `frontend-skill`: general UI craft. Defer to `use-style` when a named style is requested.
- `use-feature`: reusable feature and UX implementation patterns that are not visual styles.
- `impeccable`: polish pass after the style is applied.