القائمة
Use when adding SCSS styles, design tokens, dark mode, CSS variables, spacing, typography, radius, hover states, or ConfigProvider/Zustand-linked theme changes in react-revjs.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
Use when creating or refactoring React component styles in react-revjs with CSS Modules, especially when converting local .scss files to .module.scss with classes imports and clsx class composition.
Use when polishing react-revjs frontend UI or UX and deciding where UnoCSS icons should be added or refined, especially for buttons, status labels, section headers, helper text, empty states, and compact tool surfaces.
Use when designing or refactoring react-revjs frontend pages that should feel compact, refined, content-dense, tool-like, doc-like, or suitable for search/detail/BBS style content pages instead of marketing landing pages.
| name | scss-theme-system |
| description | Use when adding SCSS styles, design tokens, dark mode, CSS variables, spacing, typography, radius, hover states, or ConfigProvider/Zustand-linked theme changes in react-revjs. |
Use this skill when working on the visual system of react-revjs.
src/styles/_tokens.scsssrc/styles/_mixins.scsssrc/styles/index.scsssrc/store/useAppConfig.tssrc/provider/ConfigProvider.tsx:root[data-theme='dark'].ConfigProvider.tsx instead of scattering overrides across components.@/styles/mixins.--text, --bg, and --accent unless the old consumers are migrated together.--space-*, stack gaps, control paddings--radius-*--shadow-*src/styles/_tokens.scss.src/styles/_mixins.scss for focus rings, cards, and interactive surfaces.useAppConfig or useAppConfigStore instead of duplicating state.pnpm build and pnpm check after theme changes.