Use Style

use-style turns a visual direction into implementation constraints. The agent loads one named system before touching the UI, then follows its typography, palette, spacing, geometry, motion, and anti-patterns instead of falling back to a generic SaaS look.

Invoke the skill

Name a direction explicitly when you know what you want:

$use-style ios-app
$use-style vercel
$use-style black-grid
$use-style list

Plain language works too: “use the Linear style”, “make this feel like Luma”, or “show the available styles”. If the name is missing or ambiguous, the skill shows the full picker and waits for a choice.

The current collection

Style	Built for	Visual language
ios-app	Expo and native mobile apps	Monochrome ink and paper, one yellow spark, OS-native tabs, flat hairline cards.
grid	Product landings and structured specs	Square geometry, 1px borders, mono data, condensed display type.
vercel	Infrastructure dashboards and marketing	Exact black canvas, quiet hairlines, dense deployment data, vast editorial whitespace.
black-grid	Technical tools, calculators, and indexes	Austere monochrome surfaces, Geist plus mono, sharp line-defined structure, no decoration.
stripe	Billing, checkout, fintech, and account flows	Pale canvas, white surfaces, blurple actions, green success, soft elevation.
linear	Issue trackers and dense app shells	Near-black aligned panes, indigo accent, compact operational chrome.
new-york-times	Editorial and long-form experiences	Paper canvas, serif headlines, hairline rules, multi-column rhythm.
anthropic	AI products, research, and reading surfaces	Warm cream, grotesque plus serif typography, clay-coral accent, soft dark panels.
gumroad	Creator commerce and expressive launches	Yellow and pink fills, thick black borders, hard offset shadows.
raycast	Premium dark marketing and command products	Glossy near-black surfaces, red glow, floating glass navigation, oversized type.
dusk	CRM, analytics, and data workspaces	Twilight backdrop, floating dark window, vivid blue charts, colorful category pills.
luma	Events, calendars, discovery, and RSVP flows	Dark photo-led cards, teal aurora, white pill actions, blue and gold status accents.
testspirite	Calm developer-tool dashboards	Warm paper canvas, forest-green actions, grouped sidebar, quiet cards and status pills.

How selection works

The skill resolves familiar aliases such as vercel-simple → black-grid and testsprite → testspirite. It can also infer a direction from product language: Vercel deployment UI selects vercel, a lu.ma-inspired event feed selects luma, and an Expo app with native tabs selects ios-app.

Once selected, the agent reads styles/<name>.md, checks the project for a local override under .agents/styles/, and treats the resulting spec as a hard constraint. Reusable feature patterns such as split authentication live in use-feature; they are intentionally separate from visual styles.

Install or refresh

The standard setup keeps the shared skill current for Claude Code and Codex:

npx aiblueprint-cli@latest agents setup

Install only this skill with the public skill registry:

npx skills@latest add Melvynx/aiblueprint --skill use-style

Both routes place it in ~/.agents/skills/use-style, including the portable style specifications, HTML references, and Codex profile metadata.