agentsclimarketplace

Css architecture

Skill jgamaraalv/delivery-loop/.claude/skills/css-architecture

Continuous fullstack delivery loops — orchestrates frontend, backend, and quality subagents (behaviour drivers, engineers, UI/UX specialist, code/security reviewers, architects) in a test → diagnose → fix → review → secure → re-test cycle until the work is production-ready

Install
npx -y skills add jgamaraalv/delivery-loop --skill css-architecture

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

  • 0 stars0 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.4 KB, 498 tokens by cl100k_base, as published. Nobody here has run it

CSS Architecture

Overview

Build maintainable CSS systems using methodologies like BEM (Block Element Modifier), SMACSS, and CSS-in-JS patterns with proper organization and conventions.

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)

References

Each file is loaded on demand — read one only when the task needs that depth (progressive disclosure).

  • references/bem-block-element-modifier-pattern.md — the BEM (Block · Element · Modifier) naming methodology and conventions · read when establishing class-naming rules or component-scoped CSS.
  • references/smacss-scalable-and-modular-architecture-for-css.md — the SMACSS category split (base, layout, module, state, theme) · read when organizing a large stylesheet into scalable layers.
  • references/css-in-js-with-styled-components.md — CSS-in-JS with styled-components: themed, co-located, component-scoped styles · read when styling in a JS/React runtime rather than static CSS.
  • references/css-variables-custom-properties.md — CSS custom properties for design tokens, theming, and runtime theme switching · read when building a token system or dark/light theming.
  • references/utility-first-css-tailwind-pattern.md — the utility-first (Tailwind) approach and when to extract components · read when adopting or reviewing utility-class styling.

A starter component lives at templates/component-template.tsx · copy it when scaffolding a new styled component.

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

Keep looking

Skills are one crate of 328,083. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.