mcpField
D
development

development

github.com/sickn33開発49.3k170 回インストール今日更新
リポジトリ

development について

Web、モバイル、バックエンド開発向けのエンドツーエンドのワークフロースキル集です。必要なフェーズを選び、プロジェクトの作成からデプロイまで進められ、各段階に品質ゲートを設けています。

主な機能

  1. 01フェーズ別の開発ワークフロー
  2. 02フロントエンドとバックエンド
  3. 03データベースとテストの工程
  4. 04コードレビューとセキュリティ確認
  5. 05ビルドとデプロイの手順

活用シーン

  1. 01Web・モバイルアプリの新規作成
  2. 02既存アプリへの機能追加
  3. 03レガシーコードの改修や刷新
  4. 04フルスタック機能開発の計画

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/sickn33/agentic-awesome-skills --skill development

インストール後、Claude Code で/developmentを入力して読み込まれたか確認します。

詳細

開発ワークフローバンドル

概要

Web、モバイル、バックエンド開発を対象とする、エンドツーエンドのソフトウェア開発向け統合ワークフローです。このバンドルでは、スキャフォールディングからデプロイまで、本番環境に対応したアプリケーションの構築に必要なスキルを連携させます。

このワークフローを使用するタイミング

次の場合にこのワークフローを使用します。

  • 新しいWebアプリケーションやモバイルアプリケーションを構築するとき
  • 既存のアプリケーションに機能を追加するとき
  • レガシーコードをリファクタリングまたはモダナイズするとき
  • ベストプラクティスに沿って新しいプロジェクトをセットアップするとき
  • フルスタックの機能を開発するとき
  • クロスプラットフォームアプリケーションを開発するとき

範囲と完了条件

ユーザーの依頼に必要なフェーズのみを選択してください。スキル名は参照情報であり、インストール済みのツールや委任権限を示すものではありません。使用する前に、選択した最新のスキルを確認してください。このワークフローは、有料サービス、本番環境へのデプロイ、外部へのメッセージ送信、破壊的な変更を許可するものではありません。完了の判断は実際に確認できたチェック結果に基づいて行い、過去のスタック例を採用するのではなく、既存プロジェクトのバージョン制約を維持してください。

ワークフローのフェーズ

フェーズ 1：プロジェクトのセットアップとスキャフォールディング
呼び出すスキル
  • app-builder - アプリケーション構築のメインオーケストレーター
  • senior-fullstack - フルスタック開発のガイダンス
  • environment-setup-guide - 開発環境のセットアップ
  • concise-planning - タスクの計画と細分化
アクション
  1. プロジェクトの種類（Web、モバイル、フルスタック）を判断する
  2. 技術スタックを選択する
  3. プロジェクト構造をスキャフォールディングする
  4. 開発環境を構成する
  5. バージョン管理と CI/CD をセットアップする
コピーして使えるプロンプト
Use @app-builder to scaffold a new React + Node.js full-stack application

Use @senior-fullstack to set up a Next.js 14 project with App Router

Use @environment-setup-guide to configure my development environment
フェーズ 2：フロントエンド開発
呼び出すスキル
  • frontend-developer - React/Next.js のコンポーネント開発
  • frontend-design - UI/UX デザインの実装
  • react-patterns - モダンな React パターン
  • typescript-pro - TypeScript のベストプラクティス
  • tailwind-patterns - Tailwind CSS のスタイリング
  • nextjs-app-router-patterns - Next.js 14+ のパターン
アクション
  1. コンポーネントアーキテクチャを設計する
  2. UI コンポーネントを実装する
  3. 状態管理をセットアップする
  4. ルーティングを構成する
  5. スタイリングとテーマを適用する
  6. レスポンシブデザインを実装する
コピーして使えるプロンプト
Use @frontend-developer to create a dashboard component with React and TypeScript

Use @react-patterns to implement proper state management with Zustand

Use @tailwind-patterns to style components with a consistent design system
フェーズ 3：バックエンド開発
呼び出すスキル
  • backend-architect - バックエンドアーキテクチャの設計
  • backend-dev-guidelines - バックエンド開発の標準
  • nodejs-backend-patterns - Node.js/Express のパターン
  • fastapi-pro - FastAPI 開発
  • api-design-principles - REST/GraphQL API の設計
  • auth-implementation-patterns - 認証の実装
アクション
  1. API アーキテクチャを設計する
  2. REST/GraphQL エンドポイントを実装する
  3. データベース接続をセットアップする
  4. 認証と認可を実装する
  5. ミドルウェアを構成する
  6. エラー処理をセットアップする
コピーして使えるプロンプト
Use @backend-architect to design a microservices architecture for my application

Use @nodejs-backend-patterns to create Express.js API endpoints

Use @auth-implementation-patterns to implement JWT authentication
フェーズ 4：データベース開発
呼び出すスキル
  • database-architect - データベース設計
  • database-design - スキーマ設計の原則
  • prisma-expert - Prisma ORM
  • postgresql - PostgreSQL の最適化
  • neon-postgres - サーバーレス Postgres
アクション
  1. データベーススキーマを設計する
  2. マイグレーションを作成する
  3. ORM をセットアップする
  4. クエリを最適化する
  5. コネクションプーリングを構成する
コピーして使えるプロンプト
Use @database-architect to design a normalized schema for an e-commerce platform

Use @prisma-expert to set up Prisma ORM with TypeScript
フェーズ 5：テスト
呼び出すスキル
  • test-driven-development - TDD ワークフロー
  • javascript-testing-patterns - Jest/Vitest のテスト
  • python-testing-patterns - pytest のテスト
  • e2e-testing-patterns - Playwright/Cypress による E2E テスト
  • playwright-skill - ブラウザー自動化テスト
アクション
  1. ユニットテストを作成する
  2. 統合テストを作成する
  3. E2E テストをセットアップする
  4. CI テストランナーを構成する
  5. カバレッジ目標を達成する
コピーして使えるプロンプト
Use @test-driven-development to implement features with TDD

Use @playwright-skill to create E2E tests for critical user flows
フェーズ 6：コード品質とレビュー
呼び出すスキル
  • code-reviewer - AI によるコードレビュー
  • clean-code - クリーンコードの原則
  • lint-and-validate - リンティングと検証
  • security-scanning-security-sast - 静的セキュリティ分析
アクション
  1. リンターとフォーマッターを実行する
  2. コードレビューを実施する
  3. コード品質の問題を修正する
  4. セキュリティスキャンを実行する
  5. 脆弱性に対処する
コピーして使えるプロンプト
Use @code-reviewer to review my pull request

Use @lint-and-validate to check code quality
フェーズ 7：ビルドとデプロイ
呼び出すスキル
  • deployment-engineer - デプロイのオーケストレーション
  • docker-expert - コンテナ化
  • vercel-deployment - Vercel へのデプロイ
  • github-actions-templates - CI/CD ワークフロー
  • cicd-automation-workflow-automate - CI/CD の自動化
アクション
  1. Dockerfile を作成する
  2. ビルドパイプラインを設定する
  3. デプロイワークフローをセットアップする
  4. 環境変数を設定する
  5. 本番環境にデプロイする
コピーして使えるプロンプト
Use @docker-expert to containerize my application

Use @vercel-deployment to deploy my Next.js app to production

Use @github-actions-templates to set up CI/CD pipeline

技術別ワークフロー

React/Next.js 開発
Skills: frontend-developer, react-patterns, nextjs-app-router-patterns, typescript-pro, tailwind-patterns
Python/FastAPI 開発
Skills: fastapi-pro, python-pro, python-patterns, pydantic-models-py
Node.js/Express 開発
Skills: nodejs-backend-patterns, javascript-pro, typescript-pro, express (via nodejs-backend-patterns)
フルスタック開発
Skills: senior-fullstack, app-builder, frontend-developer, backend-architect, database-architect
モバイル開発
Skills: mobile-developer, react-native-architecture, flutter-expert, ios-developer

品質ゲート

次のフェーズに進む前に、以下を確認してください。

  • すべてのテストに合格している
  • コードレビューが完了している
  • セキュリティスキャンに合格している
  • リンティング／フォーマットに問題がない
  • ドキュメントが更新されている

関連するワークフローバンドル

  • wordpress - WordPress 固有の開発
  • security-audit - セキュリティテストのワークフロー
  • testing-qa - 包括的なテストのワークフロー
  • documentation - ドキュメント生成のワークフロー

制限事項

  • タスクが上記の説明にある範囲と明確に一致する場合にのみ、このスキルを使用してください。
  • 出力を、環境固有の検証、テスト、または専門家によるレビューの代わりとして扱わないでください。
  • 必要な入力、権限、安全上の境界、または成功基準が不足している場合は、作業を中断して確認を求めてください。

コメント

Markdown 対応