What is the css-architecture skill?
The css-architecture skill is a SKILL.md folder inside aj-geddes/useful-ai-prompts. It teaches an AI coding agent to organize CSS with BEM, SMACSS and CSS-in-JS, and points to reference guides for CSS variables and a utility-first Tailwind pattern. It also ships one TSX component template.
The css-architecture skill is one folder in aj-geddes/useful-ai-prompts, a library of AI prompts and agent skills. Its SKILL.md is short. It names the methods, shows a BEM button, and hands the detail to five reference guides.
The frontmatter describes it as organizing CSS with BEM, SMACSS and CSS-in-JS patterns, for scalable, maintainable styling systems with proper naming conventions. Its guides span plain CSS, styled components and Tailwind style utilities.
What your agent gets to work from
- A Quick Start in plain CSS: a .button block, a .button__icon element and a .button--primary modifier with its own hover color.
- Five reference guides: BEM, SMACSS, CSS-in-JS with styled components, CSS custom properties and a utility-first Tailwind pattern.
- A templates/component-template.tsx file as a starting point for a component.
- A When to Use list: large stylesheets, component-based styling, design systems and multi-team work.
How the BEM example is laid out
In the Quick Start, the block is the standalone component, the element is a part of it, and the modifier is a variant. That gives class names such as .button, .button__icon and .button--primary, each tied to a single role in the component.
Who the css-architecture skill is for
Best for
- Teams that share a stylesheet and need one naming convention, since multiple team collaboration is a listed use case.
- Design system work where components need consistent class names. Pair it with the uiux-design-system skill for the system layer.
- Projects changing approach, for example from CSS modules to utility classes, which converting CSS modules to Tailwind covers as its own job.
Not for
- Anyone who wants strict, opinionated rules. The main file's best practices are general: follow established patterns, add documentation and test before deploying.
- Choosing colors, type or layout. It organizes code and does not set a visual direction. For responsive layout, see frontend responsive UI.
- Linting or enforcement. The skill folder holds references and one template, with no scripts or checkers.
Use it with UiChemy
Composer, UiChemy's AI visual editor, writes real HTML, CSS and JS inside Elementor or Gutenberg, so a clear class naming scheme makes that code easier to review. Click Get Started on uichemy.com.
How to install CSS Architecture Skill: BEM, SMACSS and CSS-in-JS
git clone https://github.com/aj-geddes/useful-ai-prompts.gitClone the repository
Run
git clone https://github.com/aj-geddes/useful-ai-prompts.git. The skill sits in the skills/css-architecture folder.Copy the skill folder
Copy skills/css-architecture, with its references and templates folders, into the folder your agent loads skills from. Keep SKILL.md and the reference files together so the links in the file resolve.
Check the folder
You should see SKILL.md, five files in references and templates/component-template.tsx.
Ask for CSS structure
Name the task, for example organizing a large stylesheet with BEM, so the skill description matches your request.
Check that it loaded
Ask the agent to structure the styles for a button component. It should reach for the block, element and modifier pattern from the Quick Start, such as .button, .button__icon and .button--primary.
Key features
- BEM namingThe Quick Start builds a .button block, a .button__icon element and a .button--primary modifier, with a darker color on the modifier's hover state.
- BEM reference guideA dedicated guide in the references folder covers the Block Element Modifier pattern.
- SMACSS reference guideA second guide covers SMACSS, short for Scalable and Modular Architecture for CSS.
- CSS-in-JS with styled componentsA guide covers the CSS-in-JS route with styled components, for projects that keep styles in JavaScript.
- CSS custom propertiesA guide on CSS variables, also called custom properties, sits next to the naming methods.
- Utility-first patternA guide labeled the Tailwind pattern covers utility-first CSS, for projects that compose styles from utility classes.
- Component templatetemplates/component-template.tsx gives the agent a TSX starting point for a new component.
- Clear trigger listThe When to Use section names large-scale stylesheets, component-based styling, design system development, multiple team collaboration and CSS scalability and reusability.
- Short best-practice checklistFollow established patterns, write clean code, add documentation, test before deploying, and avoid hard-coded configuration values.
Frequently asked questions
What is the css-architecture skill?
It is a SKILL.md folder in the aj-geddes/useful-ai-prompts repository. The skill describes organizing CSS with BEM, SMACSS and CSS-in-JS patterns for scalable, maintainable styling systems. It links to five reference guides and includes a TSX component template.
How do I install the css-architecture skill?
The README gives no single-skill command. Clone aj-geddes/useful-ai-prompts, then copy the skills/css-architecture folder, including references and templates, into the place your agent loads skills from. Ask for a CSS organization task so the skill description matches.
Which CSS methods does the css-architecture skill cover?
It has reference guides for BEM, SMACSS, CSS-in-JS with styled components, CSS variables (custom properties) and a utility-first pattern labeled Tailwind. The SKILL.md itself only demonstrates BEM in its Quick Start and sends you to the guides for the rest.
Does the css-architecture skill work with Tailwind?
It includes a guide titled Utility-First CSS (Tailwind Pattern), so utility classes are covered next to BEM and SMACSS. The skill does not say it configures Tailwind or reads a Tailwind config. It is guidance for how your agent writes and organizes styles.
Which AI coding agents can use the css-architecture skill?
The repository README calls its skills folder Claude Code skills that auto-trigger when Claude Code detects relevant keywords. It lists no other agents for skills. Another agent that loads SKILL.md folders may work, but the repository does not confirm it.
Does the skill check or lint my CSS?
No. The skill folder holds SKILL.md, five reference files and one component template, with no scripts. It guides how your agent writes and organizes CSS. Its best practices are general: test before deploying, add documentation and avoid hard-coded configuration values.
What should I use alongside the css-architecture skill?
This skill supplies naming and organization patterns. For the system layer around them, look at kwp-design-system. To review the result against usability and visual rules, design-auditor is a natural next step.
What license does the css-architecture skill use?
The repository is MIT licensed, and the README ends with an MIT License notice that points to the LICENSE file. The skill folder is part of that repository, so check LICENSE before you redistribute it inside a product.