agentsclimarketplace
Sign in

Dec css architecture

Skill jpoindexter/design-engineering-canon/skills/dec-css-architecture

CSS and styling architecture — scaling methodologies (BEM, ITCSS, CUBE CSS) and fluid/responsive technique (mobile-first, clamp() fluid type/space, container queries for component-level responsiveness). Use when structuring stylesheets at scale, choosing a CSS methodology, building responsive layouts, or deciding between media queries and container queries.From its SKILL.md

Install
npx -y skills add jpoindexter/design-engineering-canon --skill dec-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.

SKILL.md

1.6 KB, 261 tokens by cl100k_base, as published. Nobody here has run it

CSS / Styling Architecture

How to keep styles scalable and responsive without a utility-first system doing it for you.

  • Methodologies: BEM (block__element--modifier naming), ITCSS (inverted-triangle layering by specificity/reach), and CUBE CSS (Composition, Utility, Block, Exception) for scaling stylesheets when not on a utility-first framework.
  • Fluid & Responsive:
    • Mobile-first — start from the smallest viewport, layer up.
    • clamp() — fluid type and space that scale between a min and max without breakpoints.
    • Container queries — component-level responsiveness based on the container's size, not the viewport. The component adapts wherever it's placed.

How to apply

  • On a custom (non-utility) codebase, pick one methodology and hold the line — consistency beats the "best" choice.
  • Reach for container queries when a component must adapt to its slot (sidebar vs main), not the whole screen — media queries can't express that.
  • Use clamp() for type and spacing scales to cut breakpoint count and avoid stepwise jumps.
  • Start mobile-first; treat larger screens as progressive enhancement.

What ships with it

Read from the repository

Just SKILL.md. No reference files, no scripts.

Keep looking

Skills are one crate of 325,949. 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.