Css architecture
Skill ulpi-io/plugin-marketplace/plugins/aj-geddes/skills/css-architecture
A curated collection of 7,800+ agent skills for Claude Desktop, sourced from skills.sh
npx -y skills add ulpi-io/plugin-marketplace --skill css-architectureAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
2 things to look at
- no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
- 1 stars1 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.
What its author says it does
Copied from the file, not written here
Organize CSS using BEM, SMACSS, and CSS-in-JS patterns. Use when building scalable, maintainable styling systems with proper naming conventions.
SKILL.md
2.3 KB, 518 tokens by cl100k_base, as published. Nobody here has run it
CSS Architecture
Table of Contents
Overview
Build maintainable CSS systems using methodologies like BEM (Block Element Modifier), SMACSS, and CSS-in-JS patterns with proper organization and conventions.
When to Use
- Large-scale stylesheets
- Component-based styling
- Design system development
- Multiple team collaboration
- CSS scalability and reusability
Quick Start
Minimal working example:
/* Block - standalone component */
.button {
display: inline-block;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
transition: all 0.3s ease;
}
/* Element - component part */
.button__icon {
margin-right: 8px;
vertical-align: middle;
}
/* Modifier - variant */
.button--primary {
background-color: #007bff;
color: white;
}
.button--primary:hover {
background-color: #0056b3;
// ... (see reference guides for full implementation)
Reference Guides
Detailed implementations in the references/ directory:
| Guide | Contents |
|---|---|
| BEM (Block Element Modifier) Pattern | BEM (Block Element Modifier) Pattern |
| SMACSS (Scalable and Modular Architecture for CSS) | SMACSS (Scalable and Modular Architecture for CSS) |
| CSS-in-JS with Styled Components | CSS-in-JS with Styled Components |
| CSS Variables (Custom Properties) | CSS Variables (Custom Properties) |
| Utility-First CSS (Tailwind Pattern) | Utility-First CSS (Tailwind Pattern) |
Best Practices
✅ DO
- Follow established patterns and conventions
- Write clean, maintainable code
- Add appropriate documentation
- Test thoroughly before deploying
❌ DON'T
- Skip testing or validation
- Ignore error handling
- Hard-code configuration values