메뉴
Expert Astro UI framework integrations — @astrojs/react, @astrojs/vue, @astrojs/svelte, @astrojs/solid-js, @astrojs/preact, @astrojs/alpinejs, @astrojs/lit, @qwikdev/astro, @analogjs/astro-angular. Setup, multi-framework config, usage patterns.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Systematic development workflow: Analyze → Plan → Execute → eLicit → eXamine. Use for ANY development task: features, bug fixes, refactoring, hotfixes. Triggers: "implement", "create", "build", "fix", "add feature", "refactor", "develop". Auto-detects project type (Laravel, Next.js, React, Swift) and loads framework-specific references. Enforces: files <100 lines, interfaces separated, SOLID principles, expert self-review, sniper validation. Modes: --auto (default), --manual, --skip-elicit
Auto-review skill for expert agents. After coding, expert applies elicitation techniques to self-correct before sniper validation. Inspired by BMAD-METHOD. Use when: an expert agent needs to self-review and self-correct code after the Execute phase, before sniper validation.
Use when marking a task as complete, finishing a feature, or claiming a bug is fixed. Ensures functional resolution is verified with evidence before closing. Do NOT use for: lint/type/code-quality validation (use code-quality / sniper AFTER functional verification passes).
Smart conventional commit with security validation, branch flow enforcement, and auto-detection. Use when committing changes, saving work, staging and committing, or choosing a conventional commit message.
Use when committing, branching, opening PRs, or deciding merge strategy. Covers GitHub Flow (default), trunk-based, branch naming conventions, squash vs rebase, branch lifecycle, and protected branch enforcement.
Universal post-commit actions. CHANGELOG update for all repos (git tag is created POST-MERGE, not here — see `commit` command Step 8). Plugin version bumping for marketplace repos. Triggered after any code commit (except wip/amend/undo).
| name | astro-integrations |
| description | Expert Astro UI framework integrations — @astrojs/react, @astrojs/vue, @astrojs/svelte, @astrojs/solid-js, @astrojs/preact, @astrojs/alpinejs, @astrojs/lit, @qwikdev/astro, @analogjs/astro-angular. Setup, multi-framework config, usage patterns. |
Targets: Astro 7.
Framework-agnostic: use React, Vue, Svelte, Solid, and more in the same Astro project.
Before ANY implementation, spawn 3 parallel agents (Codex spawn_agent):
After implementation, run sniper for validation.
| Integration | Package | Notes |
|---|---|---|
| React | @astrojs/react | Requires react + react-dom |
| Vue | @astrojs/vue | Requires vue |
| Svelte | @astrojs/svelte | Requires svelte |
| SolidJS | @astrojs/solid-js | Requires solid-js |
| Preact | @astrojs/preact | Lightweight React alternative |
| AlpineJS | @astrojs/alpinejs | Minimal JS sprinkles |
| Lit | @astrojs/lit | Web components |
| Qwik | @qwikdev/astro | Resumability |
| Angular | @analogjs/astro-angular | Via AnalogJS |
# Official integrations via CLI (recommended)
npx astro add react
npx astro add vue
npx astro add svelte
npx astro add solid-js
npx astro add preact
The CLI auto-installs packages and updates astro.config.ts.
| Need | Reference |
|---|---|
| Architecture overview | overview.md |
| React setup + options | react.md |
| Vue setup + options | vue.md |
| Svelte setup + options | svelte.md |
| SolidJS setup + options | solid.md |
| Preact setup + options | preact.md |
| Lit, Qwik, Alpine, Angular | others.md |
| Multi-framework config | multi-framework.md |
| React full setup | templates/react-setup.md |
| Multi-framework project | templates/multi-framework.md |
astro add CLI — Auto-configures everything correctlysrc/components/react/, src/components/vue/include for multiple JSX frameworks — Avoid React/Preact/Solid conflicts