How do I install the CSS Architecture skill?

Run npx skillmds@latest add amey-thakur/css-architecture in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is CSS Architecture safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with CSS Architecture?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is CSS Architecture free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published CSS Architecture?

Amey-Thakur (@amey-thakur) published this skill. Their other Agent Skills are listed on their SkillMD profile.

CSS Architecture by amey-thakur — Agent Skill

Name: CSS Architecture
Author: Amey-Thakur

File contents

CSS architecture

The health metric for CSS is deletability: when a component dies, its styles must die with it, provably. Every practice here serves that.

Method

Co-locate styles with components. One style unit per component, living next to it (CSS Modules, scoped SFC styles, utility classes in markup, or a .css imported by the component). Global stylesheets accumulate; co-located ones get deleted with their component.
Pick one scoping mechanism and hold it. CSS Modules or scoped styles for build-time isolation; utility classes for token-constrained markup styling; Shadow DOM only for embeddable widgets. Mixing idioms per-feature multiplies the knowledge needed to touch anything.
Define the global layer order once. @layer reset, tokens, base, components, utilities; in the entry stylesheet. Globals are exactly: reset, token definitions, element defaults (base), and shared utilities. Anything else claiming global status needs an argument.
Style through stable interfaces. Components expose modifiers (data-variant, props) and semantic tokens; parents size and position children (grid-area, width on the slot), never reach inside them (.parent .child-internal is the coupling that makes CSS undeletable).
Keep specificity flat inside a scope. One class or attribute selector deep (see css-cascade); state via data-* or aria attributes ([aria-expanded="true"]), which doubles as an accessibility contract.
Delete with tooling, not archaeology. Scoped styles make unused CSS visible (unimported file, unreferenced local class); CI can run coverage or lint for orphaned modules. A quarterly "grep the class name, delete the rule" pass keeps the base honest even without tooling.

Boundaries

Naming conventions (BEM) solved scoping before build tools did; adopt them only where no build-time scoping exists (CMS themes, legacy server-rendered apps).
Print styles, email HTML, and rendered user content are separate stylesheets with their own rules; do not fold them into the app system.
Architecture cannot fix an undesigned system; without tokens and components, organizing files is rearranging the pile.

---name: css-architecturedescription: Organize stylesheets with scoping, co-location, and layer order so CSS stays deletable as the codebase grows. Use when structuring styles for a growing app or auditing a stylesheet nobody dares touch.---# CSS architectureThe health metric for CSS is deletability: when a component dies, itsstyles must die with it, provably. Every practice here serves that.## Method1. **Co-locate styles with components.** One style unit per component, living next to it (CSS Modules, scoped SFC styles, utility classes in markup, or a `.css` imported by the component). Global stylesheets accumulate; co-located ones get deleted with their component.2. **Pick one scoping mechanism and hold it.** CSS Modules or scoped styles for build-time isolation; utility classes for token-constrained markup styling; Shadow DOM only for embeddable widgets. Mixing idioms per-feature multiplies the knowledge needed to touch anything.3. **Define the global layer order once.** `@layer reset, tokens, base, components, utilities;` in the entry stylesheet. Globals are exactly: reset, token definitions, element defaults (`base`), and shared utilities. Anything else claiming global status needs an argument.4. **Style through stable interfaces.** Components expose modifiers (`data-variant`, props) and semantic tokens; parents size and position children (`grid-area`, width on the slot), never reach inside them (`.parent .child-internal` is the coupling that makes CSS undeletable).5. **Keep specificity flat inside a scope.** One class or attribute selector deep (see css-cascade); state via `data-*` or aria attributes (`[aria-expanded="true"]`), which doubles as an accessibility contract.6. **Delete with tooling, not archaeology.** Scoped styles make unused CSS visible (unimported file, unreferenced local class); CI can run coverage or lint for orphaned modules. A quarterly "grep the class name, delete the rule" pass keeps the base honest even without tooling.## Boundaries- Naming conventions (BEM) solved scoping before build tools did; adopt them only where no build-time scoping exists (CMS themes, legacy server-rendered apps).- Print styles, email HTML, and rendered user content are separate stylesheets with their own rules; do not fold them into the app system.- Architecture cannot fix an undesigned system; without tokens and components, organizing files is rearranging the pile.

Frequently asked questions

CSS Architecture