القائمة
Use when adding SCSS styles, design tokens, dark mode, CSS variables, spacing, typography, radius, hover states, or ThemeProvider/Zustand-linked theme changes in neter-template.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
Use when designing or refactoring neter-template frontend pages that should feel compact, refined, content-dense, tool-like, doc-like, or suitable for search/detail/dashboard style content pages.
Use when a neter-template page component has substantial state, handlers, or side effects that should be extracted into a dedicated hook file so the TSX file is reduced to pure rendering.
Use when creating or refactoring React component styles in neter-template with CSS Modules, especially when converting local .scss files to .module.scss with classes imports and clsx class composition.
Use when polishing neter-template frontend UI or UX and deciding where UnoCSS icons should be added or refined, especially for buttons, status labels, section headers, helper text, and empty states.
| name | scss-theme-system |
| description | Use when adding SCSS styles, design tokens, dark mode, CSS variables, spacing, typography, radius, hover states, or ThemeProvider/Zustand-linked theme changes in neter-template. |
Use this skill when working on the visual token system of neter-template.
web/src/styles/_tokens.scssweb/src/styles/_mixins.scss (auto-injected into every SCSS file via Vite additionalData)web/src/styles/index.scssweb/src/store/useAppConfig.tsweb/src/provider/ThemeProvider.tsx:root[data-theme='light'].ThemeProvider.tsx instead of scattering overrides across components.--text, --bg, and --accent.background-color or color transitions to page-level surfaces or shared controls unless the motion is explicitly required.--font-sans · --font-heading · --font-mono
--font-weight-{regular|medium|semibold|bold}
--font-size-{2xs|xs|sm|md|lg|xl|2xl|3xl|4xl|display}
--line-height-{tight|snug|normal|relaxed}
--letter-spacing-{tight|normal|wide}
--space-{0|0-5|1|1-5|2|2-5|3|4|5|6|8|10|12|16}
Control padding: --padding-control-{xs|sm|md|lg}
Page/card: --padding-card, --padding-page
Gaps: --stack-gap-{sm|md|lg}
Margins: --margin-inline-section, --margin-block-section
--radius-xs · --radius-sm · --radius-md · --radius-lg · --radius-xl · --radius-2xl · --radius-pill
Surface: --color-canvas, --color-surface, --color-surface-muted, --color-surface-elevated
Text: --color-text, --color-text-muted, --color-text-strong
Border: --color-border-soft, --color-border-strong
Accent: --color-accent, --color-accent-hover, --color-accent-active, --color-accent-soft, --color-accent-border, --color-accent-contrast
Semantic: --color-{success|warning|danger|info}, --color-signal, --color-signal-soft
--duration-{fast|normal|slow} · --ease-standard
--shadow-xs · --shadow-sm · --shadow-md · --shadow-lg
--container-page, --header-h
--z-{raised|dropdown|header|modal|top}
--bg, --text, --text-h, --border, --code-bg
--accent, --accent-bg, --accent-border
--shadow, --sans, --heading, --mono
--color-text-primary → use --color-text-strong--color-text-secondary → use --color-text-muted--color-surface-raised → use --color-surface--color-border → use --color-border-strong (hover) or --color-border-soft (default)--color-error → use --color-danger--color-success-subtle → use color-mix(in srgb, var(--color-success) 12%, transparent)Three runtime-switchable presets — indigo (default), emerald, amber.
Switch via useAppConfig((s) => s.setAccent). ThemeProvider.tsx writes all --color-accent-* tokens to document.documentElement.
// Token accessors
color-token($name) → var(--color-#{$name})
space($step) → var(--space-#{$step})
radius($size) → var(--radius-#{$size})
font-size($size) → var(--font-size-#{$size})
// Interaction & surfaces
@mixin focus-ring($color, $offset)
@mixin interactive-surface
@mixin card-surface
@mixin elevated-surface
// Text
@mixin text-truncate
@mixin text-clamp($lines)
// Layout
@mixin flex-center
@mixin flex-between
// Responsive breakpoints
@mixin sm // ≥ 640px
@mixin md // ≥ 768px
@mixin lg // ≥ 1024px
@mixin xl // ≥ 1280px
web/src/styles/_tokens.scss.web/src/styles/_mixins.scss — auto-injected, no import needed.useAppConfig or useTheme() instead of duplicating state.pnpm build and pnpm check after theme changes.src/styles/_tokens.scsssrc/styles/_mixins.scsssrc/styles/index.scsssrc/store/useAppConfig.tssrc/provider/ThemeProvider.tsx:root[data-theme='light'] (dark is the default).ThemeProvider.tsx instead of scattering overrides across components.@/styles/mixins (auto-injected via additionalData).--text, --bg, and --accent unless the old consumers are migrated together.background-color or color transitions to page-level surfaces or shared controls unless the motion is explicitly required; theme switches will animate those token changes and cause visible flicker.--font-sans, --font-heading, --font-mono--font-weight-{regular|medium|semibold|bold}--font-size-{2xs|xs|sm|md|lg|xl|2xl|3xl|4xl|display}--line-height-{tight|snug|normal|relaxed}--letter-spacing-{tight|normal|wide}--space-{0|0-5|1|1-5|2|2-5|3|4|5|6|8|10|12|16}--padding-control-{xs|sm|md|lg}--padding-card, --padding-page, --padding-section--stack-gap-{xs|sm|md|lg}--margin-inline-section, --margin-block-section--radius-{none|xs|sm|md|lg|xl|2xl|pill}--color-text, --color-text-muted, --color-text-strong--color-border-soft, --color-border-strong--color-accent, --color-accent-hover, --color-accent-active, --color-accent-soft, --color-accent-border, --color-accent-contrast--color-hover-overlay, --color-active-overlay--color-{success|warning|danger|info} + --color-{success|warning|danger|info}-soft--duration-{fast|normal|slow}, --ease-standard--shadow-{xs|sm|md|lg}--container-page, --header-h, --sidebar-w--z-{raised|dropdown|header|modal|top}--bg, --text, --text-h, --border, --code-bg--accent, --accent-bg, --accent-border--shadow, --sans, --heading, --monoThree runtime-switchable accent presets in src/store/useAppConfig.ts:
indigo — Default. Blue-violet.emerald — Green teal.amber — Warm orange-gold.ThemeProvider.tsx writes the accent tokens to document.documentElement on accent/theme change.
// Token accessors
color-token($name) → var(--color-#{$name})
space($step) → var(--space-#{$step})
radius($size) → var(--radius-#{$size})
font-size($size) → var(--font-size-#{$size})
// Interaction
@mixin focus-ring($color, $offset)
@mixin interactive-surface
// Surfaces
@mixin card-surface
@mixin elevated-surface
// Text
@mixin text-truncate
@mixin text-clamp($lines)
// Layout
@mixin flex-center
@mixin flex-between
// Breakpoints
@mixin sm / md / lg / xl
src/styles/_tokens.scss.src/styles/_mixins.scss — they are auto-injected into every SCSS file.useAppConfigStore or useAppConfig instead of duplicating state.pnpm build and pnpm check after theme changes.