메뉴
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 のリンクから各ルールにアクセスできる。