codex-frontend-skills

Frontend/BFF security for forms and external input, auth, cookies, HTML, URLs, fetch, CORS, webhooks, uploads, secrets, logging, dependencies, and LLM-bound content. 日本語の依頼例:「認証実装」「問い合わせフォーム」「外部API」「webhook」「ログ」「LLMに渡す」「依存追加」。

Repository policy design or changes: CI, releases, dependency or license policy, secrets scanning, protected-branch/PR rules, and performance budgets. Not for routine metadata edits such as a one-line .gitignore change. 日本語の依頼例:「CI/CD設定」「リリース手順」「依存ライセンス」「ブランチ/PR運用」。

Next.js-specific App Router work: Server/Client Components, data fetching, caching, Server Actions, route handlers, metadata, and env vars. Not for framework-neutral styling or tests. 日本語の依頼例:「Next.jsで実装」「Server Action」「RSC」「ルートハンドラ」「キャッシュ」。

Pre-merge verification covering scope, typecheck, lint, affected tests, security, accessibility, and a single pass or fail report. 日本語の依頼例:「出荷前チェック」「マージ前確認」「完成か確認」「PR前チェック」。

React component, hook, state, effect, and rendering conventions. Use for React implementation or re-render and useEffect debugging. 日本語の依頼例:「Reactコンポーネント」「カスタムフック」「状態管理」「再レンダリング」「useEffect修正」。

Accessibility implementation and review for semantic HTML, keyboard use, focus, ARIA, contrast, forms, and screen readers. Use for UI components or accessibility fixes. 日本語の依頼例:「アクセシビリティ対応」「キーボード操作」「フォーカス管理」「スクリーンリーダー対応」。

Astro-specific pages, routing/rendering, islands, client directives, content collections, and .astro components. Not for framework-neutral styling or tests merely because Astro is installed. 日本語の依頼例:「Astroで実装」「アイランド」「コンテンツコレクション」「.astroコンポーネント」。

Generate or AI-edit raster images with Codex for banners, heroes, demo assets, photo edits, and cutouts. Not for compression or resizing. 日本語の依頼例:「画像を生成」「写真を加工」「バナー画像」「ヒーロー画像」。

CSS Modules styling, design tokens, variants, responsive layout, and theming. Use when editing styles or visual presentation; use motion for animation. 日本語の依頼例:「スタイルを整えて」「デザイン調整」「ダークモード」「レスポンシブ対応」。

Charts, dashboards, KPI displays, and any sortable, filterable, or paginated records table, including accessibility and SSR concerns. 日本語の依頼例:「グラフ追加」「ダッシュボード」「一覧・データテーブル」「KPI表示」。

Shared UI components, design tokens, typography, icons, and Figma-to-code consistency. Use for reusable design-system work. 日本語の依頼例:「共通コンポーネント」「デザインシステム」「トークン定義」「Figma通りに実装」。

Internationalization for catalogs, ICU messages, Intl formatting, locale routing, language switching, localized validation, and RTL. 日本語の依頼例:「多言語対応」「翻訳」「ロケール切替」「日付や通貨表示」「RTL対応」。

Images, SVG, icons, fonts, video, favicons, responsive delivery, lazy loading, and LCP or CLS optimization. 日本語の依頼例:「画像最適化」「フォント読み込み」「動画埋め込み」「LCP改善」「ファビコン」。

Add, change, or debug animations, transitions, keyframes, View Transitions, scroll effects, reduced motion, and animation performance. 日本語の依頼例:「アニメーション」「動きを修正」「ページ遷移」「スクロール演出」。

Scaffold a new UI component with the active styling approach, Storybook play coverage, tokens, and accessibility. Not for small edits to existing components. 日本語の依頼例:「新しいコンポーネント」「コンポーネント追加」「Figmaから実装」。

Turn session friction, repeated mistakes, and human corrections into minimal rule or skill improvements for approval. 日本語の依頼例:「振り返り」「レトロ」「学びをルール化」「同じミスを防ぎたい」。

Storybook CSF3 stories, play functions, decorators, and component behavior tests. Use for stories or component-test requests. 日本語の依頼例:「Storybook」「ストーリーを書く」「コンポーネントテスト」「play関数」。

Playwright E2E tests, locators, web-first assertions, isolation, network stubbing, and flake prevention. 日本語の依頼例:「E2Eテスト」「Playwright」「ブラウザテスト」「flakyを直す」。

Vitest tests for pure logic and headless hooks/providers, plus config, MSW, mocks, and timers. Not for Storybook-owned visible behavior or Playwright journeys. 日本語の依頼例:「ユニットテスト」「Vitest」「モック」「ロジックのテスト」。

ESLint, Stylelint, TypeScript config, environment validation, dead-code checks, and automated convention enforcement. 日本語の依頼例:「Lint設定」「tsconfig」「Stylelint」「ルールをCIで強制」。

Visual regression testing with Storybook or Playwright screenshots, deterministic baselines, and diff review. 日本語の依頼例:「スクショテスト」「ビジュアルリグレッション」「見た目の差分」「Chromatic」。

Standalone Vite + React SPA structure, env vars, splitting, and vite.config. Not for Astro/Next.js or merely because Vitest/Storybook use Vite internally. 日本語の依頼例:「Vite + React SPA」「素のViteプロジェクト」「vite.config」。