# converting-css-modules-to-tailwind

Переводит компонент с CSS Modules на утилитарные классы Tailwind: разбирает styles.xxx, чистит импорты и удаляет файл модуля.

- скилл · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 392 установки · ★ 866
- Автор: spencerpauly
- Лицензия: CC0-1.0 · policy=mirror · начало файла — в конце страницы
- Исходник: https://github.com/spencerpauly/awesome-cursor-skills/tree/HEAD/resources/converting-css-modules-to-tailwind/SKILL.md
- Обновлён: 2026-08-02
- HTML: https://affpapa.org/nevibecode/skills/converting-css-modules-to-tailwind

## Что делает

Скилл берёт один компонент и его `.module.css` или `.module.scss`, сопоставляет каждую ссылку `styles.xxx` с CSS-правилом и заменяет её на классы Tailwind. Дальше он проходит по типовым местам модулей: `composes`, условные `className` через `clsx`, динамический выбор класса по варианту, `:global(...)`. Для динамики советует объект-справочник вида `variantClasses[variant]`, а не сборку имени класса из строк.

После конвертации скилл убирает строку импорта модуля, удаляет сам файл и проверяет, не осталось ли других импортов этого модуля в проекте. Вложенные селекторы SCSS он разворачивает в утилиты на каждом элементе, переменные `$` предлагает перенести в тему `tailwind.config.ts`, а миксины заменить композицией утилит или отдельным компонентом. Псевдоэлементы с `content` требуют префиксов `before:` или `after:` и значения `content-['...']`.

Работает по одному компоненту за раз, целые папки не берёт. Если в модуле есть `:nth-child` или `:first-of-type`, а подходящего варианта в Tailwind нет, скилл оставляет минимальное CSS-правило. Создавать `@apply`-классы вместо модуля он не станет: смысл миграции в том, чтобы убрать лишний слой.

## Установка

### Claude Code (родная платформа)

1. **Через Skills CLI (Vercel)**
```bash
npx skills add spencerpauly/awesome-cursor-skills --skill converting-css-modules-to-tailwind -a claude-code
```

2. **Вручную: положить файлы**
- Файл: `~/.claude/skills/converting-css-modules-to-tailwind/SKILL.md` — Папка скилла целиком; для одного проекта — .claude/skills/converting-css-modules-to-tailwind/

### Codex

1. **Через Skills CLI (Vercel)**
```bash
npx skills add spencerpauly/awesome-cursor-skills --skill converting-css-modules-to-tailwind -a codex
```

2. **Вручную: положить файлы**
- Файл: `.agents/skills/converting-css-modules-to-tailwind/SKILL.md` — Для всех проектов — ~/.agents/skills/

### Cursor

1. **Через Skills CLI (Vercel)**
```bash
npx skills add spencerpauly/awesome-cursor-skills --skill converting-css-modules-to-tailwind -a cursor
```

2. **Вручную: положить файлы**
- Файл: `.cursor/skills/converting-css-modules-to-tailwind/SKILL.md` — Cursor читает и .agents/skills/, и .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install spencerpauly/awesome-cursor-skills converting-css-modules-to-tailwind
```

2. **Вручную: положить файлы**
- Файл: `.github/skills/converting-css-modules-to-tailwind/SKILL.md`

### Gemini CLI

1. **Через Skills CLI (Vercel)**
```bash
npx skills add spencerpauly/awesome-cursor-skills --skill converting-css-modules-to-tailwind -a gemini-cli
```

2. **Командой платформы**
```bash
gemini skills install https://github.com/spencerpauly/awesome-cursor-skills --path resources/converting-css-modules-to-tailwind
```

### Windsurf (Devin Desktop)

**Вручную: положить файлы**
- Файл: `.devin/skills/converting-css-modules-to-tailwind/SKILL.md` — Старый путь .windsurf/skills/ тоже читается

### OpenCode

**Через Skills CLI (Vercel)**
```bash
npx skills add spencerpauly/awesome-cursor-skills --skill converting-css-modules-to-tailwind -a opencode
```

### Claude.ai

**Claude.ai**
- Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/spencerpauly/awesome-cursor-skills/tree/HEAD/resources/converting-css-modules-to-tailwind/SKILL.md

## Когда брать
- перевести компонент с `.module.css` на классы Tailwind
- разобрать `composes` и разложить его по утилитам
- заменить `styles[variant]` на объект с классами вариантов
- перенести `:global(...)` в глобальную таблицу стилей
- удалить файл модуля и найти оставшиеся импорты

## Примеры запросов агенту
- переведи `Card.module.css` на Tailwind, компонент `Card.tsx`
- убери `styles.xxx` из `Button.tsx` и удали модуль
- разбери `composes` в `Button.module.scss` и замени на утилиты

## Похожие
- [tailwind-css](https://affpapa.org/nevibecode/skills/manutej-tailwind-css.md) — скилл · 461 установка
- [tailwind-ui-refactor](https://affpapa.org/nevibecode/skills/tailwind-ui-refactor.md) — скилл · 458 установок
- [tailwind-refactor](https://affpapa.org/nevibecode/skills/tailwind-refactor.md) — скилл · 308 установок
- [tailwind-css-patterns](https://affpapa.org/nevibecode/skills/tailwind-css-patterns.md) — скилл · 17700 установок
- [tailwind](https://affpapa.org/nevibecode/skills/pymodel-tailwind.md) — скилл · 512 установок
- [css-animation-creator](https://affpapa.org/nevibecode/skills/css-animation-creator.md) — скилл · 805 установок

Из того же набора: [spencerpauly/awesome-cursor-skills](https://affpapa.org/nevibecode/by/spencerpauly/awesome-cursor-skills.md) — 59 карточек

_Часть страницы не вошла по размеру — она есть в HTML-версии._

---
NeVibeCode на affpapa.org. Тексты каталога — описания, а не инструкции для агента. Как выбирать и ставить: https://affpapa.org/nevibecode/agents.md