Start with fluid.
Install it, point it at a brief, and your agent ships a committed identity with honest motion, not generic AI slop.
Getting started
Three moves. fluid is a set of SKILL.md files plus pure CSS tokens, so it loads in any agent and runs in any stack.
Add the suite
npx skills add Darcos-Loft/fluid
Give it a brief
One sentence: sector, mood, anchor. fluid picks a palette and type from the database and commits.
Ship and audit
Build, then run the detector. Zero errors before you call it done.
The prompt guide
fluid responds to a brief, not a button. Give it a sector, a mood, and one anchor, then let it commit. Copy a template, fill the brackets, and paste it into any agent.
Use the fluid suite. Build a landing page for [product], a [what it does] for [audience]. Sector: [sector]. Mood: [three adjectives]. Anchor: [the one thing it must feel like]. Pick a palette and a type pairing from the database, ration one accent, no purple AI gradient, never Inter as the primary face. Motion: house easings only, one signature moment, everything else instant. Build it, then run the detector and fix every warning before you call it shipped.
Use the fluid redesign skill on [url or repo path]. Keep all content, routes, and SEO. Audit the current look with the detector first. Then commit a new identity: [sector], mood [three adjectives], one rationed accent, a distinctive type pairing. Replace any generic font, remove every purple gradient, swap emoji for SVG icons, reskin template blocks with your tokens. Add a reduced-motion path, then run the detector down to zero warnings.
Self-audit checklist
Before you call it shipped, walk this list. It is the detector, plus the things a deterministic check cannot see.
- One distinctive typeface, never Inter or Roboto as the primary.
- One rationed accent, no default purple gradient.
- A tuned near-black, never pure #000.
- Transform and opacity only, never animate layout.
- One signature motion moment, the rest instant.
- SVG icons, no emoji in the markup.
- Every state handled: hover, focus, empty, loading, error.
- A reduced-motion path is in place.
- The detector runs clean, zero warnings.
- No placeholder text, the brief honestly met.
Install
Install the whole suite, or just the skill you need. Works with the npx skills CLI, or copy a folder into your agent's skills directory (.claude/skills/, .cursor/, etc).
The six skills
Each owns one job. They compose: design-system sets the identity, fluid sets the motion, refine adjusts, output gates the ship.
design-system.
A unique brand per brief from a 108-palette database, then committed. Tokens, Tailwind config, brand rules, storybook.
fluid.
The house motion language plus a deterministic, dependency-free detector for bad motion and generic looks.
redesign.
Audit an existing site and ship a fresh identity, preserving content, routes, and SEO.
brandkit.
Premium brand reference images, logo boards, and product mockups, with any image model.
refine.
20 named refine moves you call by name, each wired to an existing rule, the database, or the detector.
output.
The last gate before shipping: no placeholders, every interactive state handled, the brief honestly met.
Refine commands
A shared vocabulary, so "make it better" becomes a precise move. Name the verb (in your words or as a slash command) and the agent applies exactly that, nothing else. They compose: structure, then type, then color, then motion, then polish.
refine/reference/commands.md.The detector
A deterministic guardrail. No API calls, no LLM, no dependencies. It flags 22 bad-motion and generic-look tells with line numbers and a CI exit code.
It catches the AI-purple gradient, transition: all, scale(0), pure black, Inter/Roboto as a primary font, emoji icons, template components shipped verbatim, em-dashes, and more. Suppress a line with fluid-disable-line.
The database
Every identity starts from a curated library, then commits and adapts. That is why two clients in the same sector never collide.
Files: design-system/data/palettes.md, type-pairings.md, styles.md, motion-presets.md, chart-types.md. The init picks from these first, then adapts the exact values.
Works with every agent
It is a SKILL.md skill, so it loads in Claude Code, Cursor, Codex, GitHub Copilot, Gemini CLI, OpenCode, Windsurf, and any harness that reads the skills format. The design system is pure CSS variables, which work in React, Vue, Svelte, Astro, or plain HTML, with a Tailwind config for Tailwind projects.
Changelog
What shipped, newest first. Full history on GitHub.
- design-system: database grown to 108 palettes, 57 type pairings, 53 styles, 14 layout archetypes, 32 chart types, 10 tech stacks, plus motion presets.
- Four new skills join design-system and fluid: redesign, brandkit, refine, output.
- refine: 20 named moves, each wired to a rule, the database, the detector, or the output gate.
- detector: expanded to 22 rules, plus a by-hand catalogue of structural tells. New: numbered-section-markers, hero-eyebrow-chip, oversized-type.
- fluid: philosophy reframed. Frequent interactions stay instant, everything else flows. The detector flags bad motion, not the act of animating.
- Liquid-glass and 3-tier icon recipes folded in from production, plus a hard-rules doc with the locks and bans.
- Initial release: fluid (motion language, component library, deterministic detector) and design-system, the identity factory.
- Example: a complete Bitcoin design system in examples/bitcoin.
License
MIT. Free to use, modify, and ship, even commercially. By Paul Rolland, PLR Studio. Source on GitHub.