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/thedecipherist/claude-code-mastery-project-starter-kit/css-structurenpx skills add TheDecipherist/claude-code-mastery-project-starter-kit --skill css-structuregit clone --depth 1 https://github.com/TheDecipherist/claude-code-mastery-project-starter-kitWrote 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/thedecipherist/claude-code-mastery-project-starter-kit/css-structure)<a href="https://agentmods.dev/skills/thedecipherist/claude-code-mastery-project-starter-kit/css-structure"><img src="https://agentmods.dev/badge/skills/thedecipherist/claude-code-mastery-project-starter-kit/css-structure.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.00104 | $0.00882 |
| Opus 5 | $0.00052 | $0.00441 |
| Sonnet 5 | $0.00021 | $0.00176 |
| Haiku 4.5 | $0.00010 | $0.00088 |
Grade A, and why
css-structure 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 4d 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 — 57 lines — stays where its author put it; the contents beside it link to each section on GitHub.
CSS Structure: Where Styles Live
Claude's default is to pour everything into one HTML file, either a big <style> block or style="..." attributes on each element. In a real project that's the wrong default. Styles belong in a .css file.
Default: an external stylesheet, linked
When building a page or component in a project that has a file structure, put the CSS in its own file and link it:
<link rel="stylesheet" href="/styles/app.css" />
It's reusable across pages, cached separately by the browser, keeps the markup readable, and lets the cascade and media queries work. This is the default to reach for instead of an inline block, not the thing to do only when asked.
Avoid scattered inline style="..." attributes
Inline style attributes are the worst of the three options, for concrete reasons, not style preference:
- They can't be responsive or interactive. No media queries, no
:hover/:focus, no::before/::after, no keyframes. An inline-styled element literally cannot be made responsive (see responsive-css), so it fights everything that skill is about. - They have the highest specificity short of
!important. Overriding an inline style later means escalating to!important, which starts a specificity war. - No reuse, no caching, noisy markup. The same declarations get repeated on every element, ship on every page load, and bury the HTML structure.
A single <style> block is fine for a deliberately single-file deliverable
Don't over-correct into "never embed." One <style> block in the head is the right call for a genuinely single-file thing: a standalone demo, a self-contained artifact, a quick reproduction. Email HTML is the opposite special case, mail clients strip <style> and external sheets, so email actually requires inline attributes. The rule is about defaults: the moment there's a project with folders, move the CSS into a file rather than defaulting to one big file because it's easier to paste.
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.
- 4d ago First seen · 57 lines · 104 tokens per session scan A 6ef343c1d633
css-structure is a skill published in the GitHub repository TheDecipherist/claude-code-mastery-project-starter-kit (337 stars, last pushed 2mo ago), licensed MIT. It adds 104 tokens to every session and 882 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-30.
Other skills, from other repositories
chakra-ui-builder
Build responsive, accessible UI components and layouts using Chakra UI v3, install or configure Chakra UI in new and existing projects, and design scalable themes using tokens, semantic tokens, recipes, and slot recipes. Use this skill whenever a user asks to build, create, or generate any UI component, page, form…
material-ui-tailwind
Integrates Material UI with Tailwind CSS v4 using cascade layers (enableCssLayer, @layer order) and documents Tailwind v3 interoperability (preflight, important, injectFirst, portals). Use when combining MUI with Tailwind utilities, slotProps className, or theme token bridges.
review-animations
Reviews animation and motion code against a high craft bar derived from Emil Kowalski's design engineering philosophy. Default to flagging; approval is earned.
oil-motion
Design, implement, optimize, and explain interactive web animations driven by scroll, pointer, drag, touch, device orientation, audio, data, or component state. Use when a webpage needs responsive visual motion for products, interfaces, diagrams, characters, or scene transitions.
weapp-tailwindcss-migrate
将现有 weapp-tailwindcss 项目迁移到当前 v5/Tailwind CSS 4 生成链路，处理旧 weapp-tw patch、旧版 CLI init/Sass/Less/目录扫描、tailwindcss-patch、官方 PostCSS/Vite 插件、相对 cssEntries、H5 disabled、Webpack 4、Node/HBuilderX/ESM 要求。Use for upgrade, migration, legacy CLI cleanup, v4-to-v5, or deprecated setup removal；不用于全新接入或单点故障排查。.
theme-check
Theme adaptation checklist for light/dark mode and UI component changes. Use when modifying colors, surfaces, dialogs, or theme infrastructure. Not for simple text changes.