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".
ソース情報
- リポジトリ
- QuilibriumNetwork/quorum-desktop
- ソースの最終更新活動
- 2026年5月25日 16:04
- 検出された SKILL.md の言語
- 英語
- スター
- 35
- フォーク
- 13
インストール方法
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
ソースファイルを確認
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
SKILL.md を表示中
SKILL.md
ソースの指示 · 読み取り専用プレビュー- 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
GitHubで見る