Borrowing it
Nothing to install: this file belongs to TheDecipherist/claude-code-mastery-project-starter-kit. Take a copy, put it at the same path in your own repository, and replace the rules that are about this project with yours.
curl -O https://raw.githubusercontent.com/TheDecipherist/claude-code-mastery-project-starter-kit/main/.claude/skills/css-structure/SKILL.mdgit 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/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/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="Reviewed on agentmods" width="80" height="20"></a>- NVIDIA SkillSpector pass
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.00104 | $0.00882 |
| Opus 5.5 | $0.00042 | $0.00353 |
| Sonnet 5.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 2mo 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.
- 2mo 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 (342 stars, last pushed 4mo ago), licensed MIT. It adds 104 tokens to every session and 882 once invoked, about $0.0004 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-30.
css-structure compared with skills from other repositories
| Mod | Type | Stars | Last push | Licence | Scan | Tokens | Works with |
|---|---|---|---|---|---|---|---|
| css-structureTheDecipherist/claude-code-mastery-project-starter-kit | Skill | 342 | 4mo ago | MIT | A | 104 | Claude Code |
| anti-slop-designsickn33/agentic-awesome-skills | Skill | 49k | yesterday | MIT | A | 34 | Claude Code |
| chakra-ui-builderchakra-ui/chakra-ui | Skill | 41k | yesterday | MIT | A | 214 | Claude Code, Codex |
| visual-ralphYeachan-Heo/oh-my-codex | Skill | 34k | 3d ago | MIT | A | 52 | Codex |
| open-design-setupcompozy/compozy | Skill | 2.8k | yesterday | MIT | A | 67 | Claude Code, Codex |
| edit-sitemicrosoft/power-platform-skills | Skill | 1.1k | yesterday | MIT | A | 104 | Claude Code |
| frontend-visual-qadaymade/claude-code-skills | Skill | 1.5k | yesterday | MIT | A | 125 | Claude Code, Codex |