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 AleksandarBisevac/claude-plugins --skill writing-cssgit clone --depth 1 https://github.com/AleksandarBisevac/claude-pluginsWrote 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/aleksandarbisevac/claude-plugins/writing-css)<a href="https://agentmods.dev/skills/aleksandarbisevac/claude-plugins/writing-css"><img src="https://agentmods.dev/badge/skills/aleksandarbisevac/claude-plugins/writing-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/aleksandarbisevac/claude-plugins/writing-css"><img src="https://agentmods.dev/badge/skills/aleksandarbisevac/claude-plugins/writing-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.00167 | $0.01919 |
| Opus 5 | $0.00084 | $0.00959 |
| Sonnet 5 | $0.00033 | $0.00384 |
| Haiku 4.5 | $0.00017 | $0.00192 |
Grade A, and why
writing-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 9d 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 — 114 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Writing CSS here
Two stylesheets, ~2,000 lines, concatenated by Python after a generated token layer into one
inline <style>. Neither is valid alone — both reference custom properties they do not declare,
and panel.css on its own fails the color-scheme check. Assembly, splitting and the byte pins
belong to refactoring-the-assembled-ui; this is how you write a rule.
Tokens are the language
_ui_theme.py declares 78 custom properties on :root (58 of them user-themable) and
prepends them to both sheets. The discipline is already strong — panel.css uses var(--…) 605
times against 13 raw hex literals, report.css 429 against 8 — and it is the thing to protect.
- Never write a raw colour. If a role does not exist, add the token; do not inline a hex.
- The spacing migration is half done, so finish it rather than widening it.
--sp-0…--sp-7exist and are used throughout the usage sections, yet.5rem,.25rem,.75rem,1remand1.5remare still written raw 204 times elsewhere — and each of those five has an exact token. Use the token. - Type has a four-step scale and the sheets contain about 23 distinct font-size literals. Pick a step; add one if the design genuinely needs it.
- A metric both surfaces use is a token, or it will drift. It already has:
.shellismax-width:92remin the panel and96remin the report,.bud's grid disagrees in four places, the nav breakpoint is70remagainst72rem,.triis.9emagainst1em. - Adding a token has obligations.
compile_theme(DEFAULT_THEME) == TOKEN_CSSis pinned byte-for-byte, so no comment insideTOKEN_CSSmay contain a brace, and a new token must be placed in a theme group or the neutral list or the round-trip case fails.
Modern syntax that is safe here
Check the feature before using it — grep '^| container-queries ' in
refactoring-the-assembled-ui/references/baseline-snapshot.md. As of the 2026-07-08 snapshot:
- Widely available, use freely: cascade layers (
@layer), container queries (@container),:has(), nesting,:where()/:is(). - Newly available, needs
@supportsplus a fallback:light-dark(), view transitions. - Limited, do not use: anchor positioning.
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.
- 9d ago First seen · 114 lines · 167 tokens per session scan A e76070101c23
writing-css is a skill published in the GitHub repository AleksandarBisevac/claude-plugins (4 stars, last pushed today), licensed MIT. It adds 167 tokens to every session and 1,919 once invoked, about $0.0008 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
motion-animations
Use when building website animations, scroll effects, entrance reveals, layout transitions, gesture interactions, parallax, hero choreography, or any animated UI component. Auto-trigger on any website build or frontend feature that involves motion, transitions, or animated elements.
design-taste-frontend
Senior UI/UX Engineer. Architect digital interfaces overriding default LLM biases. Enforces metric-based rules, strict component architecture, CSS hardware acceleration, and balanced design engineering.
ui-refactor
Tactical user interface design guide for fixing layouts, selecting colors/fonts, and creating professional UIs. Use when the user asks to "make this look better," needs help with CSS/styling decisions, wants to create a design system, or needs to fix a cluttered interface.
impeccable
Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, landing pages, dashboards, product UI, app shells, components, forms, settings, onboarding, and empty states.…
emil-design-eng
This skill encodes Emil Kowalski's philosophy on UI polish, component design, animation decisions, and the invisible details that make software feel great.
gpt-taste
Elite UX/UI & Advanced GSAP Motion Engineer. Enforces Python-driven true randomization for layout variance, strict AIDA page structure, wide editorial typography (bans 6-line wraps), gapless bento grids, strict GSAP ScrollTriggers (pinning, stacking, scrubbing), inline micro-images, and massive section spacing.