By 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-simple, stripe, linear, raycast, gumroad, dusk, luma, split-auth, or testspirite.
Load and apply a named style before designing or implementing any UI.
Invocation
- Explicit:
$use-style ios-app,$use-style grid,/useskill split-auth,/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 ios, ios app, ios-app, iphone app, nowstack-mobile, nowstack mobile, and ink & spark as ios-app. Treat split-auth, signin 2pages, signin-2pages, sign-in 2 pages, auth split, and two-column auth as split-auth. 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-simple when the user references Vercel, Geist, or minimalist dark developer tools. 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 split-auth when the user asks for a polished login, sign-in, signup, OAuth, magic-code, or password-reset page with a two-panel visual layout. 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
- Read
styles/<name>.mdfrom this skill directory. - 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)
- Treat the loaded style as hard constraints for layout, typography, color, borders, motion, and component choice.
- Reuse existing primitives. In Codelynx repos, import
GridTheme*components fromgrid-theme-primitives.tsxinstead 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-simple |
styles/vercel-simple.md |
Vercel dark mode. Black canvas, Geist + mono, 1px #333 borders, minimal accent. |
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. |
split-auth |
styles/split-auth.md |
Two-column auth and OAuth pages. Left visual brand panel with optimized bitmap background, right clean form panel, monochrome social buttons, compact code inputs. |
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. |
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 touse-stylewhen a named style is requested.impeccable: polish pass after the style is applied.