fable-frontend-skills

Astro conventions — routing and adding pages, islands architecture, client directives, content collections, .astro components. Use when working in an Astro project. 日本語の依頼例:「Astroで〜」「ページを追加/新規作成して」「ルーティング」「アイランド」「コンテンツコレクション」「.astroコンポーネント」。

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」。

Design system and visual consistency — token tiers, typography, iconography, shared component API design, implementing Figma designs. Use when building shared/reusable UI components, defining tokens, type scales, or icon sets, or translating Figma/design mockups into code. 日本語の依頼例:「共通コンポーネント作って」「デザインシステム」「デザイントークン定義」「Figma通りに実装して」「アイコン整備」「タイポグラフィ設計」。

Scaffolds a new UI component the repo-standard way — component + styles + Storybook story with play function (+ unit test only for extracted pure logic), wired to design tokens and a11y checks. Use when creating a new component from scratch or implementing one from a Figma design. 日本語の依頼例:「新しいコンポーネント作って」「◯◯コンポーネント追加」「Figmaのこれ実装して」。

React component and hooks conventions. Use when creating or editing React components, custom hooks, state management, or debugging re-render/effect issues. 日本語の依頼例:「Reactコンポーネント作って」「カスタムフック」「状態管理」「再レンダリングが多い」「useEffectの直し方」。

Tailwind CSS (v4) conventions — @theme design tokens, class ordering, variants, dark mode, responsive/container queries, when NOT to use arbitrary values. Use when styling or visually adjusting components with utility classes, or editing global CSS/@theme in a Tailwind project. For animations/transitions/motion use the `motion` skill instead. 日本語の依頼例:「スタイルを当てて」「見た目を整えて」「デザイン調整」「Tailwindで」「ダークモード」「レスポンシブ対応」。

Charts and data visualization — library choice, chart accessibility, SSR/hydration concerns, dashboard performance, large datasets and data tables. Use when building or fixing charts, graphs, dashboards, KPI displays, or ANY data table (sortable/filterable/paginated tables of records or metrics included — a table is data viz). 日本語の依頼例:「グラフ/チャートを追加して」「ダッシュボード作って」「データテーブル」「一覧テーブル(ソート/フィルタ付き)」「可視化して」「KPI表示」。

Frontend security rules — XSS, injection, validation, CSRF, SSRF, CORS, secrets, sessions/JWT, rate limiting, headers, uploads, third-party scripts, prompt injection, dependency hygiene. Use whenever code touches user input, HTML rendering, auth, cookies, URLs, outbound fetch, webhooks, env vars, file uploads, logging, untrusted content fed to an LLM, or new dependencies. 日本語の依頼例:「認証/ログイン実装」「入力フォーム作って」「問い合わせ/お問い合わせフォーム作って」「送信フォーム」「cookie/セッション」「外部APIを叩いて」「webhook受信」「ファイルアップロード」「環境変数」「依存パッケージ追加」「LLMに渡す」。

Retrospective that turns this session's friction into rule improvements — reviews human corrections, rejected approaches, repeated mistakes, and agent-memory learnings, then proposes minimal skill/rule amendments for sign-off. Use at the end of a work session, after a review with many findings, or when the same mistake happened twice. 日本語の依頼例:「振り返りして」「レトロ」「今日の学びをルールに反映」「また同じミスした」。

Pre-merge verification pipeline — runs typecheck, lint, affected tests, then security and a11y review passes scoped to what changed, and reports a single pass/fail table. Use before claiming any change is done, before opening a PR, and whenever the user asks to verify/finalize work. 日本語の依頼例:「出荷前チェック」「マージ前に確認して」「これで完成か確認」「PR出す前のチェック」。

Lint and enforcement configuration — ESLint, Stylelint, tsconfig flags, env validation, dead-code checks; maps project rules to the tools that enforce them. Use when configuring linters, tsconfig, or when a convention should be automated instead of remembered. 日本語の依頼例:「ESLint/Lint設定」「tsconfig設定」「ルールを自動で強制したい」「Stylelint」「CIで弾きたい」。

Vitest unit and component testing conventions — Testing Library, mocking policy, MSW, timers. Use when writing or fixing unit/component tests or vitest config. 日本語の依頼例:「ユニットテスト書いて」「Vitest」「テスト追加して」「モック」「ロジックのテスト」。

Internationalization and localization — message catalogs, ICU plurals/interpolation, Intl formatting, locale routing, RTL, locale-aware input validation. Use when adding or fixing translations, multi-locale UI, date/number/currency formatting, language switching, or RTL support. 日本語の依頼例:「多言語対応」「i18n入れて」「翻訳」「ロケール切り替え」「日付/通貨の表示」「RTL対応」「言語切替」。

Accessibility conventions — semantic HTML, keyboard support, focus management, ARIA, testing. Use when building UI components, forms, dialogs, navigation, or fixing a11y violations. 日本語の依頼例:「アクセシビリティ対応して」「キーボード操作できるように」「フォーカス管理」「スクリーンリーダー対応」「コントラスト」。

Images, icons, fonts, and video — responsive images, modern formats, lazy loading, CLS/LCP optimization, SVG handling, font loading. Use when adding or optimizing images, fonts, video, favicons, or fixing layout-shift / slow-LCP issues. 日本語の依頼例:「画像が重い/遅い」「画像を最適化して」「フォント読み込み」「動画埋め込み」「LCP改善」「レイアウトがガタつく」「ファビコン」。

Playwright E2E conventions — locators, web-first assertions, isolation, network stubbing, flake prevention. Use when writing or fixing E2E tests or playwright.config. 日本語の依頼例:「E2Eテスト書いて」「Playwright」「ブラウザテスト」「ユーザー操作の通しテスト」「テストが不安定/flaky」。

Visual regression testing — Storybook-based VRT, Playwright screenshot comparison, determinism/flake control, baseline review workflow. Use when setting up or maintaining visual tests, screenshot diffs, Chromatic, or investigating "the screenshot test broke" failures. 日本語の依頼例:「スクショテスト導入」「ビジュアルリグレッション」「見た目の差分テスト」「スクリーンショットが毎回変わる」「Chromatic」。

Standalone Vite + React SPA conventions — project structure, env vars, code splitting, vite.config. Use ONLY for standalone Vite + React SPAs — NOT for Astro or Next.js projects, and not merely because Vitest/Storybook use Vite under the hood. 日本語の依頼例:「Vite + ReactのSPA」「素のViteプロジェクト」「vite.config」(※Astro/Next.jsプロジェクトでは使わない)。