菜单
Feature-based frontend architecture conventions. Auto-triggers when creating new files, directories, or organizing project structure. Defines rules for feature-based code organization, module boundaries, dependency direction, and public API design.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Functional programming conventions for TypeScript logic layers. Auto-triggers when writing utilities, services, domain logic, or data transformation logic to ensure pure functions, immutability, and proper side-effect isolation.
Next.js App Router conventions covering file-based routing, caching strategies, Server Actions, Metadata API, and framework-specific patterns. Auto-triggers when working within Next.js App Router projects (app/ directory, next.config, route handlers). Covers file-based routing, caching, Server Actions, Metadata API, and framework-specific patterns.
React component design conventions focusing on Server/Client component boundaries, composition patterns, and data flow. Auto-triggers when writing or modifying React components to ensure correct RSC patterns and optimal component architecture.
Testing conventions covering unit tests, component tests, and E2E tests. Auto-triggers when writing or modifying test files. Uses Vitest for unit/component tests and Playwright for E2E tests.
General TypeScript coding conventions for type safety, exported API design, and module structure. Auto-triggers when writing or refactoring TypeScript code outside framework-specific rules.
| name | frontend-architecture |
| description | Feature-based frontend architecture conventions. Auto-triggers when creating new files, directories, or organizing project structure. Defines rules for feature-based code organization, module boundaries, dependency direction, and public API design. |
Feature ベースのフロントエンドアーキテクチャ規約集。
app/（ルーティング層） → features/（機能層） → shared/（共通層）
上記は代表的なレイヤー構成の一例であり、プロジェクトの規模や要件に応じて独自のレイヤーを自由に追加してよい。ただし依存方向は常に上から下への単方向とし、下位レイヤーが上位レイヤーに依存してはならない。
以下の作業時に自動で参照する：
| Category | Prefix |
|---|---|
| ディレクトリ構成 | structure- |
| モジュール境界 | boundary- |
個別ルールの詳細は rules/ ディレクトリ内のファイルを参照。上記 Quick Reference のリンクから各ルールにアクセスできる。