MCPInstall

coding-rules

プロジェクト共通のコーディング規約。TypeScript、命名規則、関数設計、React/Next.js等。 使用タイミング: (1) コードレビュー時 (2) 新規ファイル作成時 (3) リファクタリング時 (4) コーディングスタイルの確認時 (5) チーム開発のルール確認時。 トリガー例: 「コーディング規約」「命名規則は?」「TypeScriptのルール」 「インポート順序」「コミットメッセージの書き方」

Installs
68
Last 24h
—
Trending rank
—
Security
Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/kimny1143/claude-code-template --skill coding-rules
  1. 01

    Install

    Run the command in your project. The CLI asks which agents to install for.

  2. 02

    Describe the task

    Ask your agent for something this skill covers. It loads coding-rules automatically when relevant.

  3. 03

    Review the result

    The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

coding-rules - コーディング規約

プロジェクト共通のコーディングルール。


1. TypeScript

型定義

// ✅ 明示的な型定義
interface User {
  id: string;
  email: string;
  name: string;
  createdAt: Date;
}

// ✅ 型推論が明確な場合は省略OK
const users = await repository.findAll(); // 戻り値の型は関数から推論

// ❌ any は使わない
const data: any = response.json();

// ✅ unknown を使って安全に処理
const data: unknown = await response.json();
if (isUser(data)) {
  console.log(data.email);
}

Null/Undefined

// ✅ Optional chaining
const email = user?.profile?.email;

// ✅ Nullish coalescing
const name = user.name ?? 'Anonymous';

// ❌ 非推奨
const name = user.name || 'Anonymous'; // 空文字もfalsy

2. インポート順序

// 1. 外部ライブラリ
import { useState } from 'react';
import { z } from 'zod';

// 2. 内部モジュール(エイリアス)
import { db } from '@/db';
import { User } from '@/types';

// 3. 相対インポート
import { helper } from './utils';
import styles from './styles.module.css';

3. 命名規則

種類規則例
変数・関数camelCasegetUserById, isActive
定数UPPER_SNAKE_CASEMAX_RETRY_COUNT
クラス・型PascalCaseUserService, CreateUserInput
ファイルkebab-caseuser-service.ts
ReactコンポーネントPascalCaseUserCard.tsx
環境変数UPPER_SNAKE_CASEDATABASE_URL

Boolean命名

// ✅ is/has/can/should プレフィックス
const isActive = true;
const hasPermission = user.role === 'admin';
const canEdit = isOwner || isAdmin;
const shouldRefetch = isStale && !isLoading;

4. 関数

単一責任

// ❌ 複数の責任
async function processUser(userId: string) {
  const user = await db.select().from(users).where(eq(users.id, userId));
  await sendEmail(user.email);
  await updateLastLogin(userId);
  return user;
}

// ✅ 分割
async function getUser(userId: string) {
  return db.select().from(users).where(eq(users.id, userId));
}

async function notifyUser(email: string) {
  await sendEmail(email);
}

async function recordLogin(userId: string) {
  await updateLastLogin(userId);
}

早期リターン

// ❌ ネスト深い
function processData(data: Data | null) {
  if (data) {
    if (data.isValid) {
      if (data.items.length > 0) {
        return data.items.map(process);
      }
    }
  }
  return [];
}

// ✅ 早期リターン
function processData(data: Data | null) {
  if (!data) return [];
  if (!data.isValid) return [];
  if (data.items.length === 0) return [];

  return data.items.map(process);
}

5. エラーハンドリング

// ✅ カスタムエラークラス
class ValidationError extends Error {
  constructor(
    message: string,
    public field: string
  ) {
    super(message);
    this.name = 'ValidationError';
  }
}

// ✅ 適切なエラー処理
try {
  await riskyOperation();
} catch (error) {
  if (error instanceof ValidationError) {
    return apiError(error.message, { status: 400 });
  }
  console.error('Unexpected error:', error);
  return apiError('Internal error', { status: 500 });
}

6. コメント

// ✅ WHYを説明
// Stripe APIの制限により、100件ずつバッチ処理する必要がある
const BATCH_SIZE = 100;

// ❌ WHATを説明(コードを読めばわかる)
// ユーザーを取得する
const user = await getUser(id);

// ✅ TODO/FIXME は issue番号付き
// TODO(#123): キャッシュ実装後に削除
// FIXME(#456): 競合状態の対応が必要

7. React/Next.js

Server vs Client Components

// Server Component (デフォルト)
// - データフェッチ
// - 機密情報アクセス
// - バンドルサイズ削減

// Client Component ('use client')
// - useState, useEffect
// - イベントハンドラ
// - ブラウザAPI

// ✅ 最小限のクライアントコンポーネント
'use client';
export function LikeButton({ postId }: { postId: string }) {
  const [liked, setLiked] = useState(false);
  return <button onClick={() => setLiked(!liked)}>Like</button>;
}

Props

// ✅ 型定義
interface UserCardProps {
  user: User;
  onEdit?: (id: string) => void;
  className?: string;
}

export function UserCard({ user, onEdit, className }: UserCardProps) {
  // ...
}

8. Git コミット

Conventional Commits

feat: 新機能追加
fix: バグ修正
docs: ドキュメント
refactor: リファクタリング
test: テスト
chore: その他

例

feat: add user authentication
fix: resolve login redirect loop
docs: update API documentation
refactor: extract validation logic to separate module
test: add unit tests for UserService
chore: update dependencies

FAQ

What does the coding-rules skill do?

プロジェクト共通のコーディング規約。TypeScript、命名規則、関数設計、React/Next.js等。 使用タイミング: (1) コードレビュー時 (2) 新規ファイル作成時 (3) リファクタリング時 (4) コーディングスタイルの確認時 (5) チーム開発のルール確認時。 トリガー例: 「コーディング規約」「命名規則は?」「TypeScriptのルール」 「インポート順序」「コミットメッセージの書き方」

How do I install coding-rules?

Run npx skills add https://github.com/kimny1143/claude-code-template --skill coding-rules in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/coding-rules/ (personal) or .claude/skills/coding-rules/ (project).

Which AI agents can use coding-rules?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is coding-rules safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains coding-rules?

It is published by kimny1143 in kimny1143/claude-code-template. It has 68 recorded installs.

More from kimny1143/claude-code-template

View all →

ui-ux-pro-max

kimny1143/claude-code-template

UI/UX design intelligence. Plan, build, design, implement, review, improve UI/UX code. Styles: image-first, editorial design, minimalism, dark mode, responsive. Projects: landing page, dashboard, SaaS, mobile app.

Frontend & Design4.7K installs

remotion

kimny1143/claude-code-template

汎用Remotion動画制作スキル。プロモーション動画、マスコットアニメーション、 LP用動画、チュートリアル動画、SNS短尺動画の制作に使用。 トリガー: "プロモ動画", "アニメーション", "動画を作って", "Remotion", "動画コンテンツ", "ビデオ制作", "モーショングラフィックス", "LP動画", "チュートリアル動画", "OGP動画", "動画素材" Remotionを使ったReactベースの動画生成全般でこのスキルを使うこと。 プロモーション映像やアニメーション素材の話が出たら積極的にこのスキルを参照すること。

Media & Creative162 installs

ux-psychology

kimny1143/claude-code-template

Open the skill to read its SKILL.md instructions.

Frontend & Design114 installs

copywriting

kimny1143/claude-code-template

Open the skill to read its SKILL.md instructions.

Marketing & SEO89 installs

ios-app-store-submission

kimny1143/claude-code-template

Open the skill to read its SKILL.md instructions.

Mobile88 installs

marketing-psychology

kimny1143/claude-code-template

When the user wants to apply psychological principles, mental models, or behavioral science to marketing. Also use when the user mentions 'psychology,' 'mental models,' 'cognitive bias,' 'persuasion,' 'behavioral science,' 'why people buy,' 'decision-making,' or 'consumer behavior.' This skill provides 70+ mental models organized for marketing application.

Marketing & SEO82 installs

Popular frontend & design skills

View category →

setup-matt-pocock-skills

mattpocock/skills

Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.

Frontend & Design1.1M installs

frontend-design

anthropics/skills

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

OfficialFrontend & Design1M installs

hyperframes-animation

heygen-com/hyperframes

All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.

prototype

mattpocock/skills

Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.

Frontend & Design999.2K installs

hyperframes-core

heygen-com/hyperframes

The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.

Frontend & Design930.5K installs

vercel-react-best-practices

vercel-labs/agent-skills

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

OfficialFrontend & Design843.1K installs