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/schalkneethling/webdev-agent-skills/css-codernpx skills add schalkneethling/webdev-agent-skills --skill css-codergit clone --depth 1 https://github.com/schalkneethling/webdev-agent-skillsWhat 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.00063 | $0.00979 |
| Opus 5 | $0.00032 | $0.00490 |
| Sonnet 5 | $0.00013 | $0.00196 |
| Haiku 4.5 | $0.00006 | $0.00098 |
Grade A, and why
css-coder 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 2d 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 Coder
Guidance for writing CSS that prioritizes web standards, accessibility, performance, and maintainability.
Core Principles
- Web standards first — Use native CSS features before reaching for libraries or frameworks. No Tailwind, no CSS-in-JS unless explicitly requested.
- Accessibility as a requirement — Ensure styles support, never hinder, assistive technologies. Respect user preferences (motion, color scheme, contrast).
- Performance matters — Minimize repaints, avoid layout thrashing, use efficient selectors.
- Readable over clever — Future maintainers (including the author) should understand the code at a glance.
- Explicit over implicit — Avoid magic numbers and unexplained values. Use custom properties for shared values.
Workflow
- Check references first — Before writing CSS, consult
references/patterns.mdfor established patterns and snippets. - Validate against specs — When uncertain, reference MDN Web Docs or CSS specifications.
- Suggest alternatives — Offer ideas beyond the skill's patterns when appropriate, but always aligned with the core principles above.
Writing Guidelines
Selectors
- Prefer class selectors over element or ID selectors for styling.
- Keep specificity low and predictable.
- Avoid deep nesting (aim for 2-3 levels maximum).
Custom Properties
- Use
--prefixed custom properties for colors, spacing, typography, and other repeated values. - Define at
:rootor appropriate scope. - Name descriptively:
--color-primary,--spacing-md,--font-size-body.
Logical Properties
- Always use logical properties (
margin-inline,padding-block,inset-inline-start,block-size, etc.) instead of physical properties (margin-left,padding-top,left,height, etc.). - Logical properties support internationalization and different writing modes automatically.
- Only fall back to physical properties where logical equivalents do not yet exist.
Units
- Use
remfor typography and spacing (respects user font-size preferences). - Use
emfor component-relative sizing when appropriate. - Use viewport units (
vw,vh,dvh) thoughtfully, with fallbacks where needed. - Avoid
pxfor font sizes; acceptable for borders, shadows, and fine details.
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.
- 2d ago First seen · 96 lines · 63 tokens per session scan A baf87ae9afa4
css-coder is a skill published in the GitHub repository schalkneethling/webdev-agent-skills (7 stars, last pushed 4mo ago), licensed MIT. It adds 63 tokens to every session and 979 once invoked, about $0.0003 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
systematic-debugging
Use when encountering any bug, test failure, or unexpected behavior, before proposing fixes.
brainstorming
You MUST use this before any creative work - creating features, building components, adding functionality, or modifying behavior. Explores user intent, requirements and design before implementation.
chat-pet-sprite-creation
Use when creating or changing VS Code chat pet sprite art, sprite sheets, state animations, eye treatments, Stable/Insiders variants, or pet transitions under src/vs/workbench/contrib/chat/browser/widget/media/chatPet.
cpu-profile-analysis
Analyze V8/Chrome CPU profiles (.cpuprofile) and DevTools trace files (Trace-.json). Use when: profiling performance, investigating slow functions, comparing code paths, finding bottlenecks, analyzing timeToRequest, understanding call trees from sampling profiler data, analyzing layout/paint/rendering, investigating…
agent-host-chat-contributions
Build and review cross-cutting agent-host chat behavior through lifecycle contributions. Use when adding turn lifecycle side effects, prompt or context injection, restored-history transformation, protocol-action observation, or when reviewing changes that add code to AgentSideEffects or AgentService.
auto-perf-optimize
Run agent-driven VS Code performance or memory investigations. Use when asked to launch Code OSS, automate a VS Code scenario, run the Chat memory smoke runner, capture renderer heap snapshots, take workflow screenshots, compare run summaries, or drive a repeatable scenario before heap-snapshot analysis.