What is corder-code-templates?

This Claude skill accelerates software development by providing production-ready code templates for common architectural patterns. It simplifies the creation of REST API endpoints, React components, database models, and authentication middleware, ensuring best practices like error handling, security, and performance are integrated from the start to reduce boilerplate and technical debt.

When should I use corder-code-templates?

corder-code-templates is useful in the following scenarios: • Rapidly bootstrapping a new backend service with Express or FastAPI using standardized REST API endpoint templates. • Building consistent and reusable React or Vue UI components with built-in state management, hooks, and loading states. • Defining database schemas and models for Sequelize, TypeORM, or Mongoose with pre-configured validation and associations. • Implementing secure authentication flows using JWT or OAuth middleware templates to protect application routes and manage sessions. • Standardizing error handling across a project using global error handlers and custom error classes to improve system maintainability and debugging.

name	corder-code-templates
description	\|
Generate code templates for common patterns	REST API endpoints, React components, database models, authentication, error handling. Use when implementing new features or creating boilerplate code.
Triggers	"create API", "new component", "implement auth", "add model", "generate code", "コードテンプレート", "API作成", "コンポーネント作成"

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

When & Why to Use This Skill

Use Cases