Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx agentmods add skills/darcos-loft/fluid/refinenpx skills add Darcos-Loft/fluid --skill refinegit clone --depth 1 https://github.com/Darcos-Loft/fluidWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/darcos-loft/fluid/refine)<a href="https://agentmods.dev/skills/darcos-loft/fluid/refine"><img src="https://agentmods.dev/badge/skills/darcos-loft/fluid/refine.svg" alt="Measured on agentmods" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5 | $0.00106 | $0.01305 |
| Opus 5 | $0.00053 | $0.00652 |
| Sonnet 5 | $0.00021 | $0.00261 |
| Haiku 4.5 | $0.00011 | $0.00130 |
Grade A, and why
refine scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 3d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 81 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Refine
A shared vocabulary of small, named moves you make on UI that already exists. Each command is one verb with one job. "Make it better" is vague and drifts; typeset then quieter then polish is precise, repeatable, and reviewable.
This is the granular layer of the suite. design-system creates an identity, fluid sets the motion, output gates the ship. refine is the set of verbs you use in between to push a screen from done to right.
How to invoke
The user names the verb, in their words or as a slash command:
- "typeset this", "make the hero bolder", "calm the motion", "/polish the pricing section"
Apply exactly that move, nothing else. Do not colorize when asked to typeset. If the user named a region (a section, a component, a selection), scope to it; otherwise apply to the current view. State the change in one line, then run audit if motion or color was touched.
Commands compose. Chain them in the order the user implies, or in the natural order: structure, then type, then color, then motion, then polish. Full definitions, with what each one enforces and leaves alone, are in reference/commands.md.
The vocabulary
Type
- typeset — repair typography: a distinctive pairing from the database, a real scale, measure under ~75 characters, tracking eased on large headings. Kills justified, sub-10px, and crushed text.
- recase — fix casing tics: drop all-caps body, keep uppercase kickers to one if at all.
Color
- colorize — apply or repair the palette: commit to a dominant with one rationed accent, near-black not pure black, no purple-wash gradient, body contrast 4.5:1.
- tone — shift the mood (warmer, cooler, darker, more muted) without breaking the locks.
Motion
- animate — add motion on purpose, with the house easings and a reduced-motion path. Reveals, heroes, hovers, counters.
- settle — calm janky or excessive motion: instant on frequent interactions, named transitions over
transition: all,scale(0.93)notscale(0), fixedtransform-origin. - flow — give many small animations one shared physics source (one scroll velocity, one progress value) so they read as one system.
What ships with it
1 file beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 3d ago First seen · 81 lines · 106 tokens per session scan A a709f45ba2da
refine is a skill published in the GitHub repository Darcos-Loft/fluid (3 stars, last pushed 1mo ago), licensed MIT. It adds 106 tokens to every session and 1,305 once invoked, about $0.0005 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.
Other skills, from other repositories
extract-design
Extract the full design language from any website URL. Produces 8 output files including AI-optimized markdown, visual HTML preview, Tailwind config, React theme, shadcn/ui theme, Figma variables, W3C design tokens, and CSS variables. Also runs WCAG accessibility scoring. Use when user says 'extract design', 'get…
designlang-tokens
Use when styling UI for cal.com — references the extracted design system tokens instead of inventing colors, spacing, or typography.
morphous-catalog
Create or refresh Morphous website design-system/theme bundles from animal, insect, plant, landscape, mineral, weather, or other nature motifs. Use when Codex is asked to generate Morphous motif images, light/dark design-system boards, reusable image prompts, generated web assets, shadcn/tweakcn theme exports, or the…
brandmd
Extract a website's design system into a DESIGN.md file. Use when starting a new frontend project, rebuilding a site, or when the user wants AI-generated UI to match an existing brand.
google-fonts
Google Fonts typography system generator. Suggests single fonts (strict mode) and font pairs (contrast mode) with complete typographic scales following Tailwind Typography rhythm concepts. Generates CSS custom properties, Tailwind config, and embed links. Trigger: "choose a font", "font pairing", "typography system"…
uisandbox
Open a real, built web app in UISandbox — the interactive sandbox in the user's browser, 1:1, with the app's own knobs (brand, colours, fonts, radius, spacing…) — or test one change headlessly, verify it still renders 1:1, get a screenshot and the patch. Use when someone wants to look at their app in a sandbox and…