はじめに
こんにちは、株式会社SasaTech 代表の佐々木です。
会社説明（営業）
SasaTechは、テクノロジー領域における全てをワンストップで提供可能しています。
実績としては以下のようなものです。
- 1年で数万MAUを超えるサービスの企画から開発、改善
- 金融サービスの上流工程
興味があれば、佐々木のDMやホームページのお問い合わせにご相談ください！
社員も募集しています！カジュアル面談させてください！
AI活用の課題
SasaTechはバリバリにAIを活用して、開発の生産性をバリバリ上げようとしていますが、バリバリに課題を感じていました。
以下の課題により、AIを活用出来ているかでプロジェクトの生産性が30倍ほど違うと考えています。（冗談ではなく）
コンテクストのインプットコストが高い
- 人間は過去の会話やプロジェクトの文脈を自然に保持しているが、AIはセッションごとにリセットされるため、同じ指摘を何回もする
- コードを全て見ているわけではないので、車輪を再発明してくる
エンジニアによる生産性のバラツキ
- AIに指示を出している人間のスキルや経験により、アウトプットの品質が変わる
- エンジニアが細かくコードを見ないこと（Human in the Loopの欠如）により、技術負債が貯まる
解決策としてのskills
課題を解決するために、アーキテクチャレベルで情報を定義し、常にベストプラクティスを生成してくれることを期待して、Claude CodeのSkill機能を使って、カスタムスキルを作成しました。
精度はまだまだだと思いますが、ある程度のプラクティスに従った、人間フレンドリー / アーキテクチャフレンドリーなコードを書いてくれます。
技術スタック
このスキルでは、以下の技術スタックを使用することを前提としています。
| カテゴリ | 技術 |
|---|---|
| フレームワーク | Next.js (App Router) |
| データベース / 認証認可 | Supabase |
| バリデーション | Zod |
| テスト | Vitest / PlaywRight(E2E) |
| ログ | pino |
| データ取得 | SWR |
| UI | shadcn/ui |
ダウンロード
以下のコマンドでスキルをダウンロードすることが出来ます。
npx skills add sasatech-labs/skills
Vercel社が開発しているSkillsというものを使用してインストールができます。
Github
免責事項
- 破壊的な変更が発生する可能性があります。
- SasaTechは、このスキルを使用したことによる一切の責任を負いません。
アーキテクチャ概要
ここからは、このスキルで作られるアーキテクチャの全体に踏み込みます。
Feature-based Layered Architecture
Feature-based Layered Architecture（機能単位の3層アーキテクチャ）を採用しています。
Clean Architecture のような依存性逆転は行わず、シンプルなHandler → Service → Repository / Adapter の3層構造を採用しています。
また、機能（Feature）単位でファイルを整理するアプローチを取ることで、AIの検索性をあげています。
クリーンアーキテクチャは、小規模 ~ 中規模の開発においては維持コストが上回ると判断し、3層に絞りました。
主なディレクトリ構造
src/
├── app/ # Next.js App Router
│ ├── (auth)/ # 認証必要なルート
│ ├── (public)/ # 公開ルート
│ └── api/ # API Routes（Handler層）
│
├── features/ # 機能単位のモジュール
│ └── [feature]/
│ ├── index.ts # 公開API
│ ├── core/
│ │ ├── schema.ts # Zodスキーマ + 型
│ │ ├── service.ts # ビジネスロジック
│ │ └── repository.ts # データアクセス
│ ├── fetcher.ts # クライアント用API
│ ├── hooks.ts # React Hooks
│ └── components/ # UIコンポーネント
│
├── lib/ # 共通ユーティリティ
│ ├── adapters/ # 外部サービス連携
│ ├── supabase/ # DBクライアント
│ └── ...
コントリビューティングについて
大歓迎です。PRください！
Discussion