Imported from Xwudao/neter-template (
.agents/skills/scss-module/SKILL.md). Install upstream withnpx skills add Xwudao/neter-template --skill scss-module. Copyright stays with the author.
SCSS Module
Use this skill when a neter-template React component or page should use local scoped styles instead of a plain .scss import.
When to use
- Converting component-level or page-level
.scssfiles to.module.scss - Adding new scoped styles for a TSX component
- Refactoring class-heavy JSX into
classes + clsxusage - Styling local UI pieces without leaking selectors globally
Core rules
- Name the stylesheet with
.module.scssand keep it next to the component or page. - Import the module as
classes. - Import
clsxand wrap every local class reference withclsx(...), even when there is only one class. - Prefer kebab-case selectors in SCSS. Access them from TSX with the generated camelCase names (Vite CSS Modules
localsConvention: 'camelCase'is configured). - Keep global
.scssimports only for true app-wide styles such assrc/styles/index.scss.
Import pattern
import clsx from 'clsx';
import classes from './example.module.scss';
export function Example() {
return <div className={clsx(classes.root)}>...</div>;
}
Class composition
<button className={clsx(classes.action, isPrimary && classes.actionPrimary)}>
Save
</button>
For icon utility classes or UnoCSS utilities, merge through clsx:
<span className={clsx('i-mdi-check', classes.icon)} aria-hidden="true" />
Styling guidance
- Start from tokens in
src/styles/_tokens.scss - Mixins from
@/styles/_mixins.scssare auto-injected — usecard-surface,focus-ring,interactive-surface, etc. without importing - Prefer CSS variables over hard-coded values
- Keep surfaces compact and tool-like unless the task explicitly asks for a more decorative layout
- Keep selectors shallow and local; avoid deep nesting beyond 2 levels
Allowed exceptions
Use :global(...) only when styling DOM owned by a third-party library.
.root {
:global(.some-third-party-class) {
min-height: 16rem;
}
}
Avoid
- Importing local
.module.scssfiles for side effects only - Mixing
styles,s, or other import names whenclassesis the project convention - Building class strings manually when
clsxis clearer - Leaving page/component-scoped styles in plain
.scssfiles if they are not intended to be global
