css-convert
Use when the user asks to convert a CSS or SCSS file to use the project's `_variables.scss` tokens, replace `@apply` with raw CSS, or align a stylesheet with the styling guidelines. Triggers on "convert this CSS", "use variables in this stylesheet", "remove @apply", "align with styling guidelines".
Informações da origem
- Repositório
- QuilibriumNetwork/quorum-desktop
- Última atividade na origem
- 25 de maio de 2026 às 16:04
- Idioma detectado do SKILL.md
- inglês
- Estrelas
- 35
- Forks
- 12
Opções de instalação
Por padrão, está selecionado o prompt que primeiro revisa a origem. Você pode mudar para um comando direto ou baixar uma cópia local.
Revise os arquivos de origem
Leia o SKILL.md e os arquivos complementares exibidos pelo SkillsMP antes de decidir se vai instalar.
Exibindo SKILL.md
SKILL.md
Instruções da origem · Visualização somente leitura- name
- css-convert
- description
- Use when the user asks to convert a CSS or SCSS file to use the project's `_variables.scss` tokens, replace `@apply` with raw CSS, or align a stylesheet with the styling guidelines. Triggers on "convert this CSS", "use variables in this stylesheet", "remove @apply", "align with styling guidelines".
# Convert CSS to Variables + Raw CSS
Rewrite a CSS/SCSS file so it uses the project's design tokens from `src/styles/_variables.scss` and `src/styles/_colors.scss` instead of hardcoded values, and converts any `@apply` Tailwind directives to raw CSS using the same variables.
## Steps
1. **Load the styling rules first** — read `.agents/docs/styling-guidelines.md`. It defines when to use Tailwind vs raw CSS, the variable system, the color tokens, form-field conventions, and breakpoints.
2. **Read the target file** the user named (path comes from the invocation).
3. **Map hardcoded values to variables**:
- Spacing → `$s-2`, `$s-4`, etc.
- Font sizes → `$text-sm`, `$text-base`, etc.
- Radii → `$rounded-md`, `$rounded-lg`, etc.
- Colors → tokens from `src/styles/_colors.scss` (surfaces, accents, theme colors)
4. **Convert `@apply`** Tailwind utility usage to plain CSS declarations that reference the same SCSS variables.
5. Leave classes untouched when no variable maps cleanly; flag those for the user.
## Reference files
- `.agents/docs/styling-guidelines.md` — core rules
- `src/styles/_variables.scss` — `$s-*`, `$text-*`, `$rounded-*`, etc.
- `src/styles/_colors.scss` — theme colors, surfaces, accents
Ver no GitHub