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 skills add ndisisnd/cook --skill cssgit clone --depth 1 https://github.com/ndisisnd/cookWrote 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/ndisisnd/cook/css)<a href="https://agentmods.dev/skills/ndisisnd/cook/css"><img src="https://agentmods.dev/badge/skills/ndisisnd/cook/css/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/ndisisnd/cook/css"><img src="https://agentmods.dev/badge/skills/ndisisnd/cook/css.svg" alt="Reviewed on agentmods" width="80" 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.1 | $0.00080 | $0.01892 |
| Opus 5.5 | $0.00032 | $0.00757 |
| Sonnet 5.5 | $0.00016 | $0.00378 |
| Haiku 4.5 | $0.00008 | $0.00189 |
Grade A, and why
css 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 1mo 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 — 96 lines — stays where its author put it; the contents beside it link to each section on GitHub.
CSS
CSS is forgiving and subjective — there is rarely one "correct" stylesheet. Optimise for consistency, low specificity, and not breaking the user, not for rule-compliance. This file is the whole standard for most styling work; pull a ref only when you need depth.
The single biggest lever is matching what the codebase already does. A convention you'd not have picked, applied consistently, beats a "better" one applied unevenly. Propose a methodology or tooling migration (BEM ↔ utilities, adding Tailwind, swapping Sass) as its own explicit task — never as a drive-by inside a feature change.
Principles (battle-tested)
- Keep specificity low and flat. Style with a single class, keep selectors shallow, and avoid IDs and
!important. Low, even specificity is what keeps styles overridable — most CSS pain is a specificity war that someone started and everyone else inherited. When cascade order genuinely matters, control it with@layer, not by piling on selectors. →refs/architecture.md - Scope by default. Leaking styles is the root cause of most "why did that change?" bugs. Reach for CSS Modules, a naming convention (BEM/utilities), or
@scope; keep bare element selectors to resets and base. →refs/architecture.md - Tokenize; don't hardcode. Keep one source of truth for colour, spacing, and type. Use custom properties for anything themeable, and derive values from a scale instead of scattering magic numbers. →
refs/theming.md - Lay out with Flexbox and Grid. They solve cleanly what floats, absolute positioning, and fixed heights only ever hacked around. Reach for
gap, intrinsic sizing, and container queries before adding media queries. →refs/layout.md - Use the platform; don't over-tool. Modern CSS (nesting, custom properties,
clamp(),color-mix()) covers most of what preprocessors were for. Add Sass/PostCSS/Tailwind because the team gets real leverage from it, not by reflex — and don't ship a shiny new feature to production without checking your browser support. →refs/tooling.md,refs/tailwind.md - Prefer deleting and composing over overriding. CSS only ever grows, and every override is future debt. If you're writing a rule to defeat another rule, fix the first one instead.
What ships with it
9 files 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.
- 1mo ago First seen · 96 lines · 80 tokens per session scan A c1bc850c53fd
css is a skill published in the GitHub repository ndisisnd/cook (2 stars, last pushed 2mo ago), licensed MIT. It adds 80 tokens to every session and 1,892 once invoked, about $0.0003 per session on Opus 5.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
moai-design-tools
Design tool integration specialist covering Figma MCP, Pencil renderer, and Pencil-to-code export. Use when fetching design context from Figma, rendering Pencil designs, or exporting to React/Tailwind code.
design-loop
Autonomous multi-page site builder using a baton-passing loop. Each iteration reads a task from .design/next-prompt.md, generates a page in HTML/Tailwind, integrates it into the site, verifies visually, then writes the next task to keep the loop alive. Use whenever the user asks to build an entire site autonomously…
color-palette
Generate complete, accessible colour palettes from a single brand hex. Produces 11-shade scale (50-950), semantic tokens, dark mode variants, Tailwind v4 CSS output, WCAG contrast checks. Use whenever the user supplies a brand hex and asks for a palette, mentions setting up a design system, wants Tailwind theme…
design-system
Extract a complete design system from an existing website or screenshot into a DESIGN.md file. Analyses colours, typography, component styles, spacing, and atmosphere through browser automation and HTML inspection. Produces a semantic design system document optimised for consistent page generation. Triggers: 'extract…
responsiveness-check
Test website responsiveness across viewport widths using browser automation. Resizes a single session through breakpoints, screenshots each width, and detects layout transitions (column changes, nav switches, overflow). Produces comparison reports showing exactly where layouts break. Trigger with 'responsiveness…
design-review
Review a web app or page for visual design quality — layout, typography, spacing, colour, hierarchy, consistency, interaction patterns, and responsive behaviour. Not a UX audit (that checks usability) — this checks whether it looks professional and polished. Produces a design findings report with screenshots.…