Corder Code Templates Skill

概要

このSkillは、corderエージェントが新機能を実装する際に使用するコードテンプレート集です。REST APIエンドポイント、Reactコンポーネント、データベースモデル、認証ロジック、エラーハンドリングなど、頻出パターンのテンプレートを提供します。

主な機能

REST APIエンドポイント: Express.js、FastAPIのテンプレート
Reactコンポーネント: 関数コンポーネント、Hooks、状態管理
データベースモデル: Sequelize、TypeORM、Mongoose
認証ミドルウェア: JWT、OAuth、セッション管理
エラーハンドリング: グローバルエラーハンドラー、カスタムエラークラス

使用方法

テンプレート一覧

templates/
├── rest-api-endpoint.js      # Express REST APIエンドポイント
├── rest-api-endpoint.py      # FastAPI エンドポイント
├── react-component.jsx       # React関数コンポーネント
├── react-component-ts.tsx    # React + TypeScript
├── database-model.js         # Sequelize モデル
├── auth-middleware.js        # JWT認証ミドルウェア
└── error-handler.js          # エラーハンドリング

使用例

1. REST APIエンドポイント作成

テンプレートファイル rest-api-endpoint.js をコピーして、プロジェクトに追加します:

// templates/rest-api-endpoint.js をベースに実装
const express = require('express');
const router = express.Router();

/**
 * @route   GET /api/users
 * @desc    Get all users
 * @access  Public
 */
router.get('/', async (req, res) => {
  try {
    const users = await User.findAll();
    res.json({ success: true, data: users });
  } catch (error) {
    res.status(500).json({ success: false, error: error.message });
  }
});

module.exports = router;

2. Reactコンポーネント作成

// templates/react-component.jsx をベースに実装
import React, { useState, useEffect } from 'react';

const UserList = () => {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetchUsers();
  }, []);

  const fetchUsers = async () => {
    try {
      const response = await fetch('/api/users');
      const data = await response.json();
      setUsers(data.data);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error}</div>;

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
};

export default UserList;

3. データベースモデル作成

// templates/database-model.js をベースに実装
const { DataTypes } = require('sequelize');

module.exports = (sequelize) => {
  const User = sequelize.define('User', {
    id: {
      type: DataTypes.INTEGER,
      primaryKey: true,
      autoIncrement: true
    },
    name: {
      type: DataTypes.STRING,
      allowNull: false,
      validate: {
        notEmpty: true,
        len: [2, 100]
      }
    },
    email: {
      type: DataTypes.STRING,
      unique: true,
      allowNull: false,
      validate: {
        isEmail: true
      }
    }
  });

  return User;
};

テンプレートの特徴

✅ ベストプラクティス適用

エラーハンドリング: try-catch、適切なHTTPステータスコード
バリデーション: 入力値検証、型チェック
セキュリティ: SQLインジェクション対策、XSS対策
パフォーマンス: 非同期処理、N+1クエリ回避
保守性: コメント、明確な変数名、DRY原則

📚 ドキュメント完備

JSDocコメント
API仕様（ルート、説明、アクセス制御）
使用例
受入基準

テンプレート詳細

REST API Endpoint (Express.js)

ファイル: templates/rest-api-endpoint.js

機能:

CRUD操作（GET, POST, PUT, DELETE）
バリデーション
エラーハンドリング
認証ミドルウェア統合

React Component

ファイル: templates/react-component.jsx

機能:

関数コンポーネント + Hooks
状態管理（useState）
副作用処理（useEffect）
ローディング・エラー状態
プロップスの型定義（PropTypes）

Database Model

ファイル: templates/database-model.js

機能:

Sequelizeモデル定義
バリデーション
アソシエーション（hasMany, belongsTo）
フック（beforeCreate等）

Authentication Middleware

ファイル: templates/auth-middleware.js

機能:

JWT検証
トークンリフレッシュ
ロールベースアクセス制御（RBAC）
セッション管理

Error Handler

ファイル: templates/error-handler.js

機能:

グローバルエラーハンドラー
カスタムエラークラス
ロギング統合
環境別エラーレスポンス

カスタマイズ方法

テンプレートをコピー: プロジェクトの適切な場所にコピー
プレースホルダーを置換: [RESOURCE], [MODEL_NAME] 等を実際の名前に変更
ビジネスロジック追加: TODO コメントに従って実装
テスト作成: corder-test-generation Skillを使用

ベストプラクティス

DO（推奨）

✅ テンプレートをそのままコピー: 最新のベストプラクティスが適用済み ✅ プロジェクト規約に合わせる: 命名規則、インデント等を統一 ✅ セキュリティを最優先: 認証、バリデーション、エスケープ ✅ テストを作成: corder-test-generation Skillで自動生成

DON'T（非推奨）

❌ テンプレートの安全機能を削除: エラーハンドリング、バリデーション等 ❌ 古いパターンを使用: async/awaitを使用、Promiseチェーンを避ける ❌ セキュリティを軽視: SQLインジェクション、XSS対策は必須

Progressive Disclosure

このSKILL.mdはメインドキュメント（約200行）です。詳細なテンプレートコードは templates/ ディレクトリ内のファイルを参照してください。

corder-code-templates