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".
Quellinformationen
- Repository
- QuilibriumNetwork/quorum-desktop
- Letzte Quellaktivität
- 25. Mai 2026 um 16:04
- Erkannte Sprache von SKILL.md
- Englisch
- Sterne
- 35
- Forks
- 12
Installationsoptionen
Standardmäßig ist der Prompt ausgewählt, der zuerst die Quelle prüft. Sie können zu einem direkten Befehl wechseln oder eine lokale Kopie herunterladen.
Quelldateien prüfen
Lesen Sie SKILL.md und alle von SkillsMP angezeigten Begleitdateien, bevor Sie sich für eine Installation entscheiden.
SKILL.md wird angezeigt
SKILL.md
Quellanweisungen · Schreibgeschützte Vorschau- 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
Auf GitHub ansehen