dotfiles

Generate draw.io diagrams as .drawio files, optionally export to PNG/SVG/PDF with embedded XML

Figma MCP を使ってデザインを FE コードに変換するスキル。 Trigger when: Figma URL が共有された時、デザインからコンポーネント実装時、 UI 実装でデザイン参照が必要な時、"Figma", "デザイン", "UI実装" への言及時、 「このデザインを実装して」「Figma から」「デザイン通りに」と言われた時。 Always use with: /web-design-principles

プロジェクト全体の統括エージェント向けスキル。要件整理から技術選定・アーキテクチャ設計・タスク分解・委譲までをカバー。git worktreeを活用した並列開発オーケストレーション（featureブランチ管理、BE/FE統括への委譲、横断レビュー）も担う。プロジェクト全体を俯瞰し、適切なエージェント/スキルに委譲する。新規プロジェクト立ち上げ、技術選定、全体設計、タスク分解・委譲、並列開発時に使用。

Webデザイン実装の鉄則ガイド。CSS/レイアウト設計の原則を提供。 Trigger when: UI/UX実装時、CSS設計時、レイアウト実装時、レスポンシブ対応時、 アクセシビリティ確認時、"レイアウト", "CSS", "スタイル" への言及時。 /figma-to-code スキルと併用する場合に自動で参照される。

Codex CLIワーカーエージェントを起動してタスクを実行する。 Claude CodeがオーケストレーターとしてCodexを呼び出すハイブリッド構成。 トリガー: 「Codexで実行」「Codexに任せて」「並列でCodex」「高速に処理」

CSS の包括的なベストプラクティスガイド（フレームワーク非依存）。パフォーマンス最適化、保守性、シンプルなコード、親子要素の相対値設計、モダン CSS 機能（Container Queries、:has()、ネイティブネスティング、Cascade Layers）をカバー。CSS 設計・実装・レビュー時に使用。Tailwind CSS 等のユーティリティフレームワーク使用時は tailwind-css スキルを参照。

Tailwind CSS (v4) のベストプラクティスガイド。CSS ファースト設定（@theme）、デザイントークン、コンポーネント抽出、レスポンシブ設計、ダークモード、Container Queries、パフォーマンス最適化、親子要素の相対値設計をカバー。Tailwind CSS での UI 実装・設計・レビュー時に使用。素の CSS ルールは css-styling スキルを参照。

HuggingFace/sentence-transformers ベースの検索・情報検索モデル（Bi-Encoder, Cross-Encoder, ColBERT, SPLADE 等）構築ガイド。Web調査による最新コード取得、データ前処理、訓練ループ設計、Weights & Biases連携、計算効率最適化をカバー。検索モデルの新規構築・ファインチューニング・評価時に使用。

Web アクセシビリティの設計・実装ガイド（フレームワーク非依存）。WCAG 2.1 準拠の基本原則、セマンティック HTML、ARIA パターン、キーボードナビゲーション、フォームアクセシビリティ、カラーコントラスト、動的コンテンツ、テスト観点をカバー。WCAG 準拠、a11y 対応が必要な時に使用。

DDD + Clean Architecture に基づく API 設計・実装ガイド（フレームワーク非依存）。レイヤー構造と依存の方向、Entity/Repository/UseCase パターン、DTO/Mapper 設計、APIエンドポイント設計、エラーレスポンス設計、ペイロード設計をカバー。新規 API やドメインモデル設計時、レイヤー構造設計時に使用。

認証/認可の設計パターンガイド（フレームワーク非依存）。認証方式の選択基準、認証フロー設計、認可モデル（RBAC/ABAC）、トークン管理、セッション管理、OAuth/OIDC、API認証をカバー。認証フロー設計、認可モデル選択、ログイン/登録機能の設計時に使用。

バックエンド開発の統括エージェント向けスキル。要件ヒアリングからFW/言語選択・委譲、コードレビュー観点をカバー。バックエンド全般の方針決定、BE実装の統括、BEコードレビュー時に使用。自身は実装せず、適切な専門スキルに委譲する。APIを含む機能開発の統括が必要な時に使用。

GitHub Actions ベースの CI/CD 設計・実装ガイド。ワークフロー設計原則、GitHub Actions 構文、CI パイプライン（lint/test/type-check/build）、CD パイプライン（ステージング/本番/ロールバック）、キャッシュ戦略、シークレット管理、再利用可能ワークフロー、セキュリティ設定をカバー。CI/CD パイプライン構築、GitHub Actions ワークフロー設計、自動化設定時に使用。

OpenAI Codex CLI をセカンドオピニオンとして活用するためのガイド。ソフトウェア設計の検証、厳格なコードレビュー、複雑なデバッグ仮説の取得に使用。Agent Teams での並列開発において、重要な設計判断やセキュリティレビューで別 AI の視点が欲しい時に使用。

RDBMS + ORM 前提のデータベース・スキーマ設計ガイド（ツール非依存）。DB設計ワークフロー、テーブル設計原則、正規化/非正規化判断、型設計、インデックス戦略、リレーション設計、マイグレーション管理をカバー。テーブル設計、データモデル設計、マイグレーション時に使用。

フロントエンド・バックエンド両対応のデバッグガイド（フレームワーク非依存）。デバッグワークフロー（再現→切り分け→原因特定→修正→検証）、問題の切り分け手法、フロントエンドデバッグ（レンダリング/状態/イベント/通信）、バックエンドデバッグ（ログ解析/リクエストトレース/データフロー）、よくあるエラーパターン、パフォーマンスデバッグをカバー。原因不明のバグ調査、パフォーマンス問題、エラー解析時に使用。

環境設定管理の設計ガイド（フレームワーク非依存）。環境分離の原則、環境変数の設計パターン、設定ファイル構成、シークレットとの分離、ローカル開発設定、Feature Flag、バージョン管理方針をカバー。環境変数設計、設定管理方針の決定時に使用。

FastAPI (Python) バックエンドAPIの包括的な実装ガイド。プロジェクト構造、ルーティング（APIRouter）、依存性注入（Depends）、Pydanticモデル、バリデーション、エラーハンドリング、認証/認可実装、構造化ログ、非同期処理、ORM連携、環境設定（BaseSettings）をカバー。FastAPIでのAPI実装時に使用。

フロントエンド開発の統括エージェント向けスキル。要件ヒアリングからFW選択・委譲、コードレビュー観点をカバー。フロントエンド全般の方針決定、FE実装の統括、FEコードレビュー時に使用。自身は実装せず、適切な専門スキルに委譲する。UIを含む機能開発の統括が必要な時に使用。

Gin (Go) バックエンドAPIの包括的な実装ガイド。プロジェクト構造、ルーティング、ミドルウェア、リクエストバインディング、バリデーション、レスポンスパターン、認証/認可ミドルウェア、slogによる構造化ログ、DI（wire/manual）、Goイディオム、環境設定をカバー。GinでのAPI実装、ミドルウェア設計時に使用。

git worktreeを活用した並列開発ガイド。worktreeライフサイクル（作成→環境構築→作業→同期→クリーンアップ）、ブランチ命名戦略、rebaseワークフロー、こまめなコミット戦略、コンフリクト予防策、環境セットアップ、トラブルシューティングをカバー。並列開発、マルチエージェント開発、ブランチ分離が必要な場面で使用。

go test を使った Go テストの包括的な実装ガイド。テストファイル配置、テーブル駆動テスト、サブテスト（t.Run）、テストヘルパー（t.Helper）、インターフェースベースモック、HTTPテスト（httptest）、ベンチマーク、カバレッジ、testifyをカバー。Goでのテスト実装時に使用。

Hono (TypeScript) バックエンドAPIの包括的な実装ガイド。ルート定義、ミドルウェア、Zodバリデーション、DIコンテナ、エラーハンドリング、認証/認可ミドルウェア、構造化ログ、RPCクライアント型生成、ランタイム別注意点をカバー。HonoでのAPI実装、ミドルウェア設計、バリデーション実装時に使用。

Next.js App Router (TypeScript) の包括的な実装ガイド。App Routerの基本構造、Feature-Based Architecture、Server/Client Components使い分け、データフェッチパターン、キャッシュ戦略、状態管理、認証UIパターン、メタデータ/SEO、ミドルウェア、環境設定をカバー。Next.js App Routerでの機能実装、アーキテクチャ設計時に使用。

アプリケーションの可観測性設計ガイド（フレームワーク非依存）。ログ・メトリクス・トレースの3本柱、構造化ログ設計、リクエストトレーシング、メトリクス設計（RED/USE）、ヘルスチェック、アラート設計、エラートラッキングをカバー。可観測性の設計、ログ設計、モニタリング設計時に使用。

pnpm ワークスペースによるモノレポ管理ガイド。ワークスペース設定、パッケージ構成パターン（apps/packages/shared）、パッケージ間依存管理（workspace:*）、共有パッケージ設計、TypeScript設定（tsconfig継承/パスエイリアス）、開発コマンド（turbo/pnpm run --filter）、ビルドとバージョン管理をカバー。モノレポのワークスペース設定、パッケージ追加、共有パッケージ設計時に使用。

pytest を使った Python テストの包括的な実装ガイド。設定（pyproject.toml, conftest.py）、テストの書き方、Fixtures（scope, yield, autouse）、パラメータ化、モック（unittest.mock, pytest-mock, monkeypatch）、FastAPIテスト（TestClient, httpx.AsyncClient）、カバレッジ、マーカーをカバー。pytestでのテスト実装時に使用。

Claude Code スキルのベストプラクティス適合レビューガイド。フロントマター検証（name/description ルール）、SKILL.md 本文品質（行数・構造・Progressive Disclosure）、references/ 構造、description トリガー品質、アンチパターン検出をカバー。スキルの新規作成後のレビュー、既存スキルの品質改善、スキル全体の一括監査時に使用。

テスト設計・戦略の汎用ガイド（テストツール非依存）。テストピラミッド、テストレベルの選択基準、何をテストすべきかの優先順位、テストダブルの選択（Stub/Mock/Fake/Spy）、テスト設計パターン（AAA/GWT）、命名規則、アンチパターン、新機能/バグ修正/レガシーコードごとのテスト戦略、テストカバレッジの考え方をカバー。テスト方針決定、テストレベル選択、テスト設計時に使用。

Vitest を使った TypeScript テストの包括的な実装ガイド。設定、テストの書き方、モック/スパイ/スタブ（vi.fn, vi.mock, vi.spyOn）、Reactコンポーネントテスト（Testing Library連携）、APIテスト（Hono testClient）、カバレッジ、スナップショットテスト、並列実行をカバー。Vitestでのユニットテスト・統合テスト実装時に使用。

Web アプリケーションのセキュリティ設計・実装ガイド（フレームワーク非依存）。入力バリデーション、インジェクション対策、オリジン制御、セキュリティヘッダ、依存関係管理、シークレット管理、セキュリティログをカバー。脆弱性レビュー、セキュリティ設計、コードレビューのセキュリティ観点確認時に使用。