ui-structure-lint

UI Structure Lint Skill

このスキルは、プロジェクトの「ファイル・ディレクトリ構成」ルールに基づき、コードの配置と構造が正しいかを監査し、必要に応じて修正案を提示します。

監査チェックリスト

1. ディレクトリ構造とコロケーション

• ルール: src/components/<page-name>/<component-name>/ の階層構造になっているか？
• ファイルセット: 以下の役割分担が守られているか？
  • [name].tsx: UI（プレゼンテーション）
  • [name].container.tsx: 状態管理・副作用（コンテナ）
  • [name].logic.ts: ビジネスロジック・型定義・Fetch
  • [name].test.tsx: UIのテスト（vitest-axe必須）
  • [name].logic.test.ts: ロジックのユニットテスト
• 例外: src/components/ui/ はShadcn UI等の共通コンポーネント用。

2. Barrel Export (再エクスポート)

• ルール: 各コンポーネントディレクトリおよびページ単位ディレクトリに index.ts が存在するか？
• 内容: 外部に公開すべきものだけを export { ... } from "./..." しているか？ロジックを直接書いていないか？

3. Namespace Import

• ルール: page.tsx や layout.tsx でインポートする際、import * as PageName from "../../components/..." のようにネームスペースインポートを使用しているか？

4. 命名規則

• ケバブケース: ディレクトリ名はケバブケース（例: profile-list）か？
• 一貫性: フォルダ名とファイル名のプレフィックスが一致しているか？

フィードバックと修正のガイドライン

• 違反を発見した場合は、まず implementation_plan.md に「構造の不一致」として記載します。
• 修正を行う際は、git mv 等を用いて履歴を維持しつつ、各種参照（インポートパス）を一括更新します。