Agent skill
scss-patterns
SCSS architecture and CSS variable policies. Use when writing SCSS stylesheets, CSS custom properties, or design system tokens. Do NOT use for plain CSS without SCSS or for CSS-in-JS solutions (styled-components, Emotion).
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/other/other/scss-patterns
SKILL.md
SCSS Patterns
Module System Policy
- Always use
@use-@importis deprecated, causes duplicate CSS - Use
@forwardfor public API exposure in index files - Namespace imports -
@use 'colors' as cnot bare@use 'colors'
CSS Variable Naming Policy
Pattern: --{prefix}-{property}[-{state}][-{variant}]
| Example | Structure |
|---|---|
--btn-background |
prefix + property |
--btn-background-hover |
+ state |
--btn-background-hover-primary |
+ variant |
Project-specific conventions (color palette structure, prefixes) belong in project's CLAUDE.md.
Selector Policy
- BEM naming -
Block__Element--Modifier - Max 3 levels nesting - flatten if deeper
- Single class selectors - avoid
.parent .child .grandchild - Use
&for BEM -&__element,&--modifier
Loop Policy
- Use
@eachfor variants - sizes, colors, breakpoints - Use maps for configuration - not scattered variables
Anti-Patterns
| Avoid | Why | Fix |
|---|---|---|
@import |
Deprecated, duplicate CSS | Use @use |
Magic numbers (13px) |
Unmaintainable | Use variables |
| Deep nesting (> 3 levels) | Specificity wars | Flatten with BEM |
!important |
Specificity problem | Refactor selectors |
| Hardcoded colors | Breaks theming | Use CSS/SCSS variables |
Bare @use without namespace |
Name collisions | Always use as alias |
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?