
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- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads coding-rules automatically when relevant.
- 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. 命名規則
| 種類 | 規則 | 例 |
|---|---|---|
| 変数・関数 | camelCase | getUserById, isActive |
| 定数 | UPPER_SNAKE_CASE | MAX_RETRY_COUNT |
| クラス・型 | PascalCase | UserService, CreateUserInput |
| ファイル | kebab-case | user-service.ts |
| Reactコンポーネント | PascalCase | UserCard.tsx |
| 環境変数 | UPPER_SNAKE_CASE | DATABASE_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
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.
remotion
kimny1143/claude-code-template
汎用Remotion動画制作スキル。プロモーション動画、マスコットアニメーション、 LP用動画、チュートリアル動画、SNS短尺動画の制作に使用。 トリガー: "プロモ動画", "アニメーション", "動画を作って", "Remotion", "動画コンテンツ", "ビデオ制作", "モーショングラフィックス", "LP動画", "チュートリアル動画", "OGP動画", "動画素材" Remotionを使ったReactベースの動画生成全般でこのスキルを使うこと。 プロモーション映像やアニメーション素材の話が出たら積極的にこのスキルを参照すること。
ux-psychology
kimny1143/claude-code-template
Open the skill to read its SKILL.md instructions.
copywriting
kimny1143/claude-code-template
Open the skill to read its SKILL.md instructions.
ios-app-store-submission
kimny1143/claude-code-template
Open the skill to read its SKILL.md instructions.
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.
Popular frontend & design skills
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-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.
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.
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.
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.