For Claude Code · Cursor · Codex

Tell your AI coding tool which look you want. It builds it properly.

ui-styles is a skill you install once. Each of its 18 style packs spells out the tokens, type scale, layout rules, motion specs and coded components for one distinct UI direction, so "make it look like a trading terminal" produces a finished, consistent interface instead of a guess.

npx @dpeluola/ui-styles install

Get all 18 packs See the styles

3 packs are free, no account needed. The rest unlock with a licence key.

> give the dashboard the terminal-fintech look

reading  .claude/skills/ui-styles/styles/terminal-fintech.md
reading  shared/ux-baseline.md
applying tokens → app/globals.css
building Rail, TradeCard, Sticker, ParseInput
checking contrast · focus states · reduced motion · 375px

✓ 4 components, 1 token file, 0 hard-coded colours
→ run python3 scripts/lint.py to verify

How it works

A skill, not a template.

The packs are instructions your AI tool reads when you ask for a look. Nothing is pasted into your project until you ask for it, and everything it builds is yours.

01
Install
npx @dpeluola/ui-styles install drops the skill into .claude/skills, .cursor/skills and .agents/skills, and adds the Cursor rule and AGENTS.md snippet. One command, one dependency.
02
Ask for a look
Name a pack ("glass-2"), describe a mood ("dark fintech"), or say "pick for me". Hybrids work: "glass-2 colours with kinetic-editorial type".
03
Ship it checked
Every pack carries a checklist, and the skill ships with scripts that verify token contrast and the rubric. Run them on your build before you ship.

The packs · v1.0.0

18 directions, each fully specified.

Written for Next.js, TypeScript, Tailwind v4, Framer Motion and GSAP, with React Three Fiber where a pack needs 3D.

degen-launchpadlicence
Near-black, bone white, acid-yellow; mascot + live ticker chips; pixel labels
Best for: memecoin / launchpad / crypto consumer
terminal-fintechlicence
Dark grid lines, mono rails, up/down greens & reds, rotated "stickers", live cards
Best for: trading, perps, dashboards, bots
poster-playgroundlicence
White canvas, uppercase geometric display, fanned card deck, palette switcher
Best for: illustrators, creative portfolios, agencies
kinetic-editoriallicence
Oversized type that moves: split-text reveals, marquee, scroll-scrubbed headlines
Best for: studios, campaigns, personal brands
webgl-scrollytellinglicence
Pinned 3D scenes scrubbed by scroll; copy appears in beats
Best for: product launches, brand films, hardware
neo-brutalistlicence
Thick 2–3px borders, hard offset shadows, flat saturated colour, raw grids
Best for: indie SaaS, tools, communities, zines
bento-productfree
Modular rounded tiles, each tile a self-contained mini demo
Best for: SaaS features, app marketing, dashboards
dark-devtoollicence
Deep navy-black, 1px hairlines, soft radial glows, grain, mono accents
Best for: dev tools, infra, B2B software
swiss-gridfree
Visible 12-col grid, numbered sections, Inter/Helvetica, huge whitespace
Best for: agencies, architecture, type-led brands
glass-2licence
Liquid glass: layered translucent panels, refraction highlights, depth blur
Best for: personal brand, fintech consumer, dashboards
y2k-chromelicence
Liquid chrome type, metallic gradients, dopamine colours, pixel UI, stickers
Best for: music, fashion drops, Gen-Z products
organic-bloblicence
Morphing SVG blobs, pastel gradients, soft rounded everything
Best for: wellness, education, kids, friendly SaaS
luxury-minimallicence
Serif display, heavy whitespace, slow fades, muted palette
Best for: fashion, jewellery, hospitality, high-ticket
immersive-3d-productlicence
Pinned product spin / exploded view driven by scroll; spec callouts
Best for: hardware, sneakers, watches, devices
scrapbook-collagelicence
Rotated photos, tape, handwritten notes, torn paper, layered textures
Best for: festivals, zines, lifestyle brands
editorial-magazinelicence
Multi-column, drop caps, serif/sans contrast, pull quotes, rules
Best for: publications, long-form, research, blogs
hacker-terminalfree
Phosphor green/amber mono, typewriter, ASCII, scanlines
Best for: crypto infra, security, dev CLIs, privacy tools
clay-soft-3dlicence
Soft 3D "clay" objects, long soft shadows, candy pastels, rounded cards
Best for: consumer apps, onboarding, playful fintech

What's in the box

Specified, then checked.

Every pack contains

Tokens as CSS variables: colour, radius, blur, easing, fonts, wired to Tailwind v4.
Type scale with fluid sizes and the faces to load (free alternatives for every licensed font).
Layout rules for hero, sections, cards, nav and footer, mobile first.
Motion specs with durations, easings and reduced-motion behaviour.
4–6 coded components that carry the style's signature move.
Voice, do/don't list and a checklist so the result reads as one thing.

What has been checked

Every pack's token pairs pass an automated contrast check at WCAG 2.2 AA thresholds, across every theme variant. The script ships in the box.
Every interactive component specifies hover, focus-visible, active and disabled; data components specify loading, empty and error states.
Every pack has reduced-motion and 375px rules, verified by a lint script that also ships.
Scored against a published rubric (accessibility, performance budgets, responsive, motion, tokens, components, voice, portability) by an independent review. The audit report is included.

These are checks on the specification. Whether your finished site meets a standard depends on how you build it; the pack checklists tell you what to measure.

Pricing

One payment. Yours to keep.

Licences include 12 months of updates and new packs. After that you keep everything you have.

Free

3 packs: swiss-grid, bento-product, hacker-terminal
Full UX baseline, motion cookbook, stack setup
Contrast and lint scripts
No account, no key

npx @dpeluola/ui-styles install

Personal

$39 one-time

All 18 packs
12 months of updates and new packs
1 person, unlimited projects, client work included
Everything you build is yours

Buy Personal

Team

$149 one-time

Everything in Personal
5 seats, reassignable
One licence key for the whole team
Priority email support

Buy Team

Card payments in USD, EUR, GBP and local currencies are handled by our payment partner, which issues your invoice and handles tax. Naira and crypto checkout are being added.14-day refund if you haven't activated your key. See the licence and refund policy.

Questions

Before you buy

Which tools does it work with?

Tested with Claude Code and Cursor, and with Codex-style tools that read .agents/skills and AGENTS.md. Any tool that reads an AGENTS.md file can be pointed at the packs.

Is this a component library?

No. It's a set of specifications your AI tool follows, with reference code for the signature components. The code it generates lives in your project, in your stack, under your name.

What stack is it written for?

Next.js (App Router), TypeScript, Tailwind v4, Framer Motion, GSAP, and React Three Fiber for the 3D packs. The design rules apply anywhere; the code snippets assume that stack.

Can I use it for client work?

Yes. Personal and Team licences cover unlimited projects, including paid client work. What you can't do is resell or redistribute the packs themselves.

Does it make my site accessible?

It gives you a specification that has been checked for token contrast, focus states, reduced motion and mobile rules, and scripts to verify a build. Accessibility of the finished site is still yours to test; the packs tell you what to check.

How do updates work?

npx @dpeluola/ui-styles update pulls the latest bundle your licence allows. New packs are added over time; you get them for 12 months, and keep your last version after that.