New: 97,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

CSS Structure

by TheDecipherist in TheDecipherist/claude-code-mastery-project-starter-kit

Where CSS should live. An agent skill from TheDecipherist/claude-code-mastery-project-starter-kit.

MITAuto-check passedFrontend & Design

Install CSS Structure

skills CLI
$ npx skills add TheDecipherist/claude-code-mastery-project-starter-kit --skill css-structure -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install TheDecipherist/claude-code-mastery-project-starter-kit css-structure --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/TheDecipherist/claude-code-mastery-project-starter-kit.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/css-structure .claude/skills/css-structure && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
css-structure
GitHub stars
338
Token cost
~1k tokens
SKILL.md length
462 words
Files
1
Skills in repo
24
Repo updated
First seen
Licence
MIT

At a glance

Where CSS should live. An agent skill from TheDecipherist/claude-code-mastery-project-starter-kit.

  • Editing a web page
  • SKILL.md covers Default: an external…, Avoid scattered inline…, A single block is fine for a… and When inline is actually…, plus 1 more section
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
  • Whenever about to write a style attribute

What it does

CSS Structure is an agent skill from TheDecipherist/claude-code-mastery-project-starter-kit. Where CSS should live. Claude defaults to dumping a giant <style block or scattering style="..." attributes instead of putting styles in a .css file and linking it. Use when building or editing a web page or component, or whenever about to write a style attribute or an embedded style block. Covers defaulting to an external stylesheet, why inline style attributes are a trap, and the few cases where inline is actually correct (dynamic values via custom properties, critical CSS, single-file artifacts, email).

Its SKILL.md is about 1k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Frontend & Design, covering CSS and styling. The repository describes itself as: The definitive starting point for Claude Code projects. Based on Claude Code Mastery Guides V1-V5. The licence is MIT.

When your agent uses it

  • Editing a web page
  • Whenever about to write a style attribute
  • An embedded style block

Example prompts

  • “/css-structure”

What it can do on your machine

Read from SKILL.md and the folder at commit 61fbb99. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md (its code samples are html and css).

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

CSS Structure loads about 1k tokens when it runs. Until then it costs about 132 tokens; SKILL.md has 462 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~132
When it runs · the whole SKILL.md, loaded when a task matches
~1k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from TheDecipherist/claude-code-mastery-project-starter-kit at commit 61fbb99, republished under its MIT licence (© TheDecipherist). 462 words, ~1,010 tokens.

Download SKILL.mdSave it as .claude/skills/css-structure/SKILL.md (or your agent's skills folder).
name
css-structure
description
Where CSS should live. Claude defaults to dumping a giant <style> block or scattering style="..." attributes instead of putting styles in a .css file and linking it. Use when building or editing a web page or component, or whenever about to write a style attribute or an embedded style block. Covers defaulting to an external stylesheet, why inline style attributes are a trap, and the few cases where inline is actually correct (dynamic values via custom properties, critical CSS, single-file artifacts, email).
when_to_use
- Building or editing a web page or component and deciding where the styles go - About to write a `style="..."` attribute, a large embedded `<style>` block…

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:

html
<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.

Show full SKILL.md (162 more words)Show less

When inline is actually correct: dynamic and critical

Two cases where a value belongs inline:

  • Runtime values. A width, transform, or color computed from state (a progress bar, a drag position) can't live in a static sheet. Set a CSS custom property inline and consume it in the stylesheet, so only the value is inline and the styling stays in CSS:
html
<div class="bar" style="--progress: 73%"></div>
css
.bar::after { width: var(--progress); }
  • Critical CSS. Deliberately inlining the above-the-fold styles in <head> for first paint, then loading the rest, is a real performance technique, not the same mistake as scattering style=. Which styles are critical and what to defer is a first-paint decision, see web-performance.

In React/JSX

Same split: dynamic values through style={{}} or a CSS variable, everything static in CSS Modules, a stylesheet, or utility classes (Tailwind). A large inline style object hand-written on every element is the JSX version of the same anti-pattern.

This skill is built to grow. Add a rule when a real styling-location decision has a stable, defensible answer.

© TheDecipherist, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in .claude/skills/css-structure of TheDecipherist/claude-code-mastery-project-starter-kit.

Open the folder on GitHubat commit 61fbb99

Compare with similar skills

CSS Structure next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

CSS Structure compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
CSS Structure this skillTheDecipherist/claude-code-mastery-project-starter-kit338—~1kAutomated safety check: PassMIT
Tailwindcss Developmentanonaddy/anonaddy4.9k10 repos~865Automated safety check: PassMIT
UI StylingOhh-889/skyroc79513 repos~2.5kAutomated safety check: PassMIT
MCP Developmentcoollabsio/coolify63k1 repos~949Automated safety check: PassMIT
Web Animation DesignbaptisteArno/typebot.io11k2 repos~2.7kAutomated safety check: PassCustom licence
UI UX Pro Maxsaoudi-h/solar-icons18218 repos~11kAutomated safety check: NotesCustom licence

Similar skills

  • Tailwindcss Development

    anonaddy/anonaddy

    Always invoke when the user's message includes 'tailwind' in any form.

    4.9k GitHub starsUsed in 10 repos~865 tokens
    Frontend & DesignAuto-check passed

  • UI Styling

    Ohh-889/skyroc

    Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs.

    795 GitHub starsUsed in 13 repos~2.5k tokens
    Frontend & DesignAuto-check passed

  • MCP Development

    coollabsio/coolify

    A skill your agent uses for Laravel MCP development. An agent skill from coollabsio/coolify.

    63k GitHub starsUsed in 1 repo~949 tokens
    Frontend & DesignAuto-check passed

  • Web Animation Design

    baptisteArno/typebot.io

    Guides easing, timing and animation choices for UI motion, based on a web animation course, and reviews existing animations in a before-and-after table.

    11k GitHub starsUsed in 2 repos~2.7k tokens
    Frontend & DesignAuto-check passed

  • UI UX Pro Max

    saoudi-h/solar-icons

    UI/UX design intelligence for web and mobile. An agent skill from saoudi-h/solar-icons.

    182 GitHub starsUsed in 18 repos~11k tokens
    Frontend & DesignAuto-check: notes

  • Ink Tui Wizard

    novuhq/novu

    Build terminal user interfaces (TUIs) using Ink (React for CLIs) and @inkjs/ui with a reactive, session-driven wizard pattern.

    40k GitHub stars~1.9k tokensUpdated today
    Frontend & DesignAuto-check passed

More from TheDecipherist/claude-code-mastery-project-starter-kit

All 24 skills in this repo

  • Create Service

    TheDecipherist/claude-code-mastery-project-starter-kit

    Scaffold a new microservice that follows the project's server/handlers/adapters architecture.

    338 GitHub stars~1.8k tokensUpdated 3 mo ago
    Auto-check: notes

  • Docker

    TheDecipherist/claude-code-mastery-project-starter-kit

    Production Docker best practices for writing Dockerfiles, Compose files, and Swarm stacks.

    338 GitHub stars~1.6k tokensUpdated 3 mo ago
    Auto-check: notes

  • Docker Swarm

    TheDecipherist/claude-code-mastery-project-starter-kit

    Production Docker Swarm deployment rules: what changes when a compose file goes from a single node to a multi-node Swarm.

    338 GitHub stars~1.8k tokensUpdated 3 mo ago
    Auto-check passed

  • Mongodb Backups

    TheDecipherist/claude-code-mastery-project-starter-kit

    Production MongoDB backup and restore practices that the documentation gets wrong.

    338 GitHub stars~1.3k tokensUpdated 3 mo ago
    Auto-check passed

  • Mongodb Replica Sets

    TheDecipherist/claude-code-mastery-project-starter-kit

    Production MongoDB replica-set operation: topology, durability, host tuning, and the container-specific gotchas Claude gets wrong.

    338 GitHub stars~1.6k tokensUpdated 3 mo ago
    Auto-check passed

  • Nginx

    TheDecipherist/claude-code-mastery-project-starter-kit

    Production NGINX configuration best practices, especially as a reverse proxy in front of containerized backends.

    338 GitHub stars~1.9k tokensUpdated 3 mo ago
    Auto-check passed

Categories

Questions about CSS Structure

What does CSS Structure do?

Where CSS should live. An agent skill from TheDecipherist/claude-code-mastery-project-starter-kit. CSS Structure is an agent skill from TheDecipherist/claude-code-mastery-project-starter-kit. Where CSS should live.

When should I use CSS Structure?

CSS Structure fits situations like: editing a web page; whenever about to write a style attribute; an embedded style block.

How do I install CSS Structure in Claude Code?

Run `npx skills add TheDecipherist/claude-code-mastery-project-starter-kit --skill css-structure -a claude-code`. Or copy the skill folder (.claude/skills/css-structure in TheDecipherist/claude-code-mastery-project-starter-kit) into .claude/skills/css-structure in your project. Claude Code loads it when a task matches its description.

How do I install CSS Structure in Codex?

Run `npx skills add TheDecipherist/claude-code-mastery-project-starter-kit --skill css-structure -a codex`. Or copy the skill folder (.claude/skills/css-structure in TheDecipherist/claude-code-mastery-project-starter-kit) into .agents/skills/css-structure in your project. Codex loads it when a task matches its description.

Can I use CSS Structure in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add TheDecipherist/claude-code-mastery-project-starter-kit --skill css-structure -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/css-structure, .gemini/skills/css-structure, .github/skills/css-structure and .opencode/skills/css-structure in your project.

What does CSS Structure need to run?

SKILL.md names no scripts, command-line tools or credentials: CSS Structure is instructions for the agent only.

Does CSS Structure access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is CSS Structure safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does CSS Structure use?

CSS Structure is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does CSS Structure use?

About 1k tokens (SKILL.md is roughly 4k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to CSS Structure?

Skills that share tags, products or a category with CSS Structure: Tailwindcss Development (anonaddy/anonaddy, 4.9k stars), UI Styling (Ohh-889/skyroc, 795 stars), MCP Development (coollabsio/coolify, 63k stars) and Web Animation Design (baptisteArno/typebot.io, 11k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains CSS Structure?

TheDecipherist (a GitHub user) maintains it in TheDecipherist/claude-code-mastery-project-starter-kit, which has 338 GitHub stars. The repository holds 24 skills in this directory. The repository was last updated on June 29, 2026.

Source: TheDecipherist/claude-code-mastery-project-starter-kit on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.