Dec css architecture
Skill jpoindexter/design-engineering-canon/skills/dec-css-architecture
20 agent-agnostic skills encoding the foundational canon of design engineering — usability heuristics, UX laws, product strategy, accessibility, performance, motion, software principles, design systems, AI-native patterns. Installs globally for Claude Code and any SKILL.md-aware agent.
npx -y skills add jpoindexter/design-engineering-canon --skill dec-css-architectureAssembled 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
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.
SKILL.md
1.6 KB, 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.