菜单
Astro conventions — routing and adding pages, islands architecture, client directives, content collections, .astro components. Use when working in an Astro project. 日本語の依頼例:「Astroで〜」「ページを追加/新規作成して」「ルーティング」「アイランド」「コンテンツコレクション」「.astroコンポーネント」。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Next.js App Router conventions — routing and adding pages, Server/Client Components, data fetching, caching, Server Actions, route handlers, metadata, env vars. Use for any work inside a Next.js app. 日本語の依頼例:「Next.jsで〜」「ページを追加/新規作成して」「ルーティング」「Server Action」「ルートハンドラ」「RSC/サーバーコンポーネント」「キャッシュ」。
Generate or AI-edit images by delegating to the Codex CLI ($imagegen / gpt-image) — sample banners, hero visuals, demo assets, image-to-image edits. Use whenever a task needs image GENERATION or AI photo editing (Claude Code cannot generate images itself). 日本語の依頼例:「画像を生成して」「サンプル画像を作って」「この写真を加工して」「バナー/ヒーロー画像が必要」。NOT for resizing/compressing existing assets (use `images-media`).
CSS Modules and styling conventions — design tokens, naming, variants, responsive design, layout, dark mode/theming. Use when styling or visually adjusting components, or editing any *.module.css, tokens, or global styles. For animations/transitions/motion use the `motion` skill instead. 日本語の依頼例:「スタイルを当てて」「見た目を整えて」「デザイン調整」「ダークモード」「レスポンシブ対応」「CSS書いて」。
Repository governance — CI merge gates, toolchain pinning, dependency lifecycle and license policy, secrets scanning, change control for rules and sensitive paths, Git/PR conventions, observability, performance budgets, browser support. Use when setting up CI/CD, repo configuration, releases, adding dependencies, or defining team policy. 日本語の依頼例:「CI/CD設定」「リリース手順」「依存ライセンス確認」「秘密情報スキャン」「リポジトリ設定」「ブランチ/PR運用」「パフォーマンスバジェット」。
Animation and motion conventions — CSS transitions/keyframes, View Transitions, scroll-driven effects, animation libraries, exit animations, performance. Use when adding, changing, or debugging any animation, transition, or page-transition effect. 日本語の依頼例:「アニメーション付けて」「動きを付けて」「トランジション」「ページ遷移アニメ」「スクロール演出」「ふわっと表示」。
Storybook conventions — CSF3 stories, play functions as Vitest component tests, decorators, a11y. Use when writing or editing *.stories.tsx or Storybook config, AND whenever asked to write tests for a component — stories with play functions are this repo's component-test layer. 日本語の依頼例:「Storybook/ストーリー書いて」「コンポーネントのテスト書いて」「play関数」「interaction test」。
| name | astro |
| description | Astro conventions — routing and adding pages, islands architecture, client directives, content collections, .astro components. Use when working in an Astro project. 日本語の依頼例:「Astroで〜」「ページを追加/新規作成して」「ルーティング」「アイランド」「コンテンツコレクション」「.astroコンポーネント」。 |
.astro components rendering static HTML. Ship JS only for genuinely interactive islands.client: directive that works: client:visible (below the fold) > client:idle (non-critical) > client:load (immediately needed). client:only is a last resort (no SSR, layout shift risk) — except for components that cannot render on the server, e.g. DOM-measuring charts (see data-viz).<details>, CSS, or a few lines of vanilla JS in a <script> tag? Many "interactive" widgets need no framework..astro for layout/static content; framework components (React) only inside islands that need them.interface Props + Astro.props destructuring in .astro files; React island components follow react-patterns (type Props).*.module.css imports work in both .astro and React files; .astro scoped <style> is fine for purely local, single-file styling — pick one per component, don't mix. (This scoped-<style> allowance is the documented exception to the repo-wide CSS-Modules-only rule.)src/content.config.ts with a Content Layer loader (glob() / file() from astro/loaders) and a zod schema — never loose globs of untyped markdown. (The legacy loader-less collection config was removed in Astro 5+.)z.coerce.date()), enums for categories. Build fails on bad content — that's the point.import.meta.glob results are build-time; don't treat them as dynamic. (Astro.glob no longer exists — removed in Astro 5+; use import.meta.glob or getCollection.)astro:assets (<Image>, <Picture>) for images — width/height required, prevents CLS.set:html is dangerouslySetInnerHTML — sanitize non-static input first (see frontend-security skill).src/pages/api/) follow the same validate/authenticate rules as any server endpoint.PUBLIC_ prefix; everything else is server-only — same discipline as Next.js.