hyva-compile-tailwind-css AI 스킬 사용법

어떤 스킬인가요?

Compile Tailwind CSS for Hyvä themes in Magento 2. Use when the user wants to build styles, generate CSS, compile Tailwind, run Tailwind, or create production/development stylesheets for a Hyvä theme. Also use when Tailwind classes are not taking effect or some styles appear missing after template changes — this typically means CSS needs to be recompiled. Triggers include "compile tailwind", "build styles", "generate css", "styles not working", "styles are missing", "styles not applied".

설치 방법

프로젝트 폴더에서 아래 명령어를 실행하고, 설치할 에이전트를 선택하세요.

npx skills add hyva-themes/hyva-ai-tools --skill hyva-compile-tailwind-css

설치 명령을 직접 실행해야 적용됩니다. 지원 에이전트와 필요한 권한·라이선스는 제작자의 안내를 확인하세요.

스킬 원문 파일

`SKILL.md`

---
name: hyva-compile-tailwind-css
description: Compile Tailwind CSS for Hyvä themes in Magento 2. Use when the user wants to build styles, generate CSS, compile Tailwind, run Tailwind, or create production/development stylesheets for a Hyvä theme. Also use when Tailwind classes are not taking effect or some styles appear missing after template changes — this typically means CSS needs to be recompiled. Triggers include "compile tailwind", "build styles", "generate css", "styles not working", "styles are missing", "styles not applied".
requires: hyva-exec-shell-cmd, hyva-theme-list
---

# Compile Tailwind CSS for Hyvä Themes

Compiles Tailwind CSS for Hyvä themes in Magento 2. Handles both production builds and development watch mode.

## Step 1: Detect Environment & Set Command Wrapper

Use the `hyva-exec-shell-cmd` skill to detect the environment and determine the appropriate command wrapper. All npm commands below show the core command; wrap them according to the detected environment.

## Step 2: Identify Theme

If no theme path provided, invoke the `hyva-theme-list` skill to discover available themes. Filter the results to only include themes in `app/design/frontend/` by default. Themes in `vendor/hyva-themes/` require explicit user request.

**If no themes found:** Inform the user that no Hyvä themes with Tailwind configuration were found in `app/design/frontend/`. Ask if they want to check `vendor/hyva-themes/` instead, or if they need to create a child theme first using the `hyva-child-theme` skill.

## Step 3: Install Dependencies & Build

**Default to production build** unless user explicitly requests "watch", "watch mode", or "live reload".

```bash
# Install deps only if node_modules missing
if [ ! -d "<theme-path>/web/tailwind/node_modules" ]; then
cd <theme-path>/web/tailwind && npm ci
fi

# Production build (default)
cd <theme-path>/web/tailwind && npm run build

# OR watch mode (only if explicitly requested)
cd <theme-path>/web/tailwind && npm run watch
```

## Step 4: Verify Output

Compiled CSS location: `<theme-path>/web/css/styles.css`

Confirm the file was updated by checking its modification time.

## Troubleshooting

- **Missing node_modules:** Run `npm ci`
- **Outdated styles:** Clear browser cache; in production mode run `bin/magento setup:static-content:deploy`