jpskill.com
🛠️ 開発・MCP コミュニティ 🔴 エンジニア向け 👤 エンジニア・AI開発者

🛠️ Development

development

ウェブ、モバイル、バックエンド開発を統合し、フロントエンドからフルスタックまで一貫したアプリケーションを提供するSkill。

⚡ ⏱ ボイラープレート実装 半日 → 30分

📺 まず動画で見る(YouTube)

▶ 【衝撃】最強のAIエージェント「Claude Code」の最新機能・使い方・プログラミングをAIで効率化する超実践術を解説! ↗

※ jpskill.com 編集部が参考用に選んだ動画です。動画の内容と Skill の挙動は厳密には一致しないことがあります。

📜 元の英語説明(参考)

Comprehensive web, mobile, and backend development workflow bundling frontend, backend, full-stack, and mobile development skills for end-to-end application delivery.

🇯🇵 日本人クリエイター向け解説

一言でいうと

ウェブ、モバイル、バックエンド開発を統合し、フロントエンドからフルスタックまで一貫したアプリケーションを提供するSkill。

※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。

⚡ おすすめ: コマンド1行でインストール(60秒)

下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。

🍎 Mac / 🐧 Linux 
mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o development.zip https://jpskill.com/download/2765.zip && unzip -o development.zip && rm development.zip
🪟 Windows (PowerShell) 
$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/2765.zip -OutFile "$d\development.zip"; Expand-Archive "$d\development.zip" -DestinationPath $d -Force; ri "$d\development.zip"

完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。

💾 手動でダウンロードしたい(コマンドが難しい人向け)
  1. 1. 下の青いボタンを押して development.zip をダウンロード
  2. 2. ZIPファイルをダブルクリックで解凍 → development フォルダができる
  3. 3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
  4. 4. Claude Code を再起動
⬇ .zip でダウンロード(推奨) ⬇ .skill 形式(上級者用) 元のソース ↗

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

  1. 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
  2. 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
  3. 3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
    • · macOS / Linux: ~/.claude/skills/
    • · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →
最終更新
2026-05-17
取得日時
2026-05-17
同梱ファイル
1

💬 こう話しかけるだけ — サンプルプロンプト

  • › Development を使って、最小構成のサンプルコードを示して
  • › Development の主な使い方と注意点を教えて
  • › Development を既存プロジェクトに組み込む方法を教えて

これをClaude Code に貼るだけで、このSkillが自動発動します。

📖 Claude が読む原文 SKILL.md(中身を展開)

この本文は AI(Claude)が読むための原文(英語または中国語)です。日本語訳は順次追加中。

Development Workflow Bundle

Overview

Consolidated workflow for end-to-end software development covering web, mobile, and backend development. This bundle orchestrates skills for building production-ready applications from scaffolding to deployment.

When to Use This Workflow

Use this workflow when:

  • Building new web or mobile applications
  • Adding features to existing applications
  • Refactoring or modernizing legacy code
  • Setting up new projects with best practices
  • Full-stack feature development
  • Cross-platform application development

Workflow Phases

Phase 1: Project Setup and Scaffolding

Skills to Invoke

  • app-builder - Main application building orchestrator
  • senior-fullstack - Full-stack development guidance
  • environment-setup-guide - Development environment setup
  • concise-planning - Task planning and breakdown

Actions

  1. Determine project type (web, mobile, full-stack)
  2. Select technology stack
  3. Scaffold project structure
  4. Configure development environment
  5. Set up version control and CI/CD

Copy-Paste Prompts

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

Phase 2: Frontend Development

Skills to Invoke

  • frontend-developer - React/Next.js component development
  • frontend-design - UI/UX design implementation
  • react-patterns - Modern React patterns
  • typescript-pro - TypeScript best practices
  • tailwind-patterns - Tailwind CSS styling
  • nextjs-app-router-patterns - Next.js 14+ patterns

Actions

  1. Design component architecture
  2. Implement UI components
  3. Set up state management
  4. Configure routing
  5. Apply styling and theming
  6. Implement responsive design

Copy-Paste Prompts

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

Phase 3: Backend Development

Skills to Invoke

  • backend-architect - Backend architecture design
  • backend-dev-guidelines - Backend development standards
  • nodejs-backend-patterns - Node.js/Express patterns
  • fastapi-pro - FastAPI development
  • api-design-principles - REST/GraphQL API design
  • auth-implementation-patterns - Authentication implementation

Actions

  1. Design API architecture
  2. Implement REST/GraphQL endpoints
  3. Set up database connections
  4. Implement authentication/authorization
  5. Configure middleware
  6. Set up error handling

Copy-Paste Prompts

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

Phase 4: Database Development

Skills to Invoke

  • database-architect - Database design
  • database-design - Schema design principles
  • prisma-expert - Prisma ORM
  • postgresql - PostgreSQL optimization
  • neon-postgres - Serverless Postgres

Actions

  1. Design database schema
  2. Create migrations
  3. Set up ORM
  4. Optimize queries
  5. Configure connection pooling

Copy-Paste Prompts

Use @database-architect to design a normalized schema for an e-commerce platform
Use @prisma-expert to set up Prisma ORM with TypeScript

Phase 5: Testing

Skills to Invoke

  • test-driven-development - TDD workflow
  • javascript-testing-patterns - Jest/Vitest testing
  • python-testing-patterns - pytest testing
  • e2e-testing-patterns - Playwright/Cypress E2E
  • playwright-skill - Browser automation testing

Actions

  1. Write unit tests
  2. Create integration tests
  3. Set up E2E tests
  4. Configure CI test runners
  5. Achieve coverage targets

Copy-Paste Prompts

Use @test-driven-development to implement features with TDD
Use @playwright-skill to create E2E tests for critical user flows

Phase 6: Code Quality and Review

Skills to Invoke

  • code-reviewer - AI-powered code review
  • clean-code - Clean code principles
  • lint-and-validate - Linting and validation
  • security-scanning-security-sast - Static security analysis

Actions

  1. Run linters and formatters
  2. Perform code review
  3. Fix code quality issues
  4. Run security scans
  5. Address vulnerabilities

Copy-Paste Prompts

Use @code-reviewer to review my pull request
Use @lint-and-validate to check code quality

Phase 7: Build and Deployment

Skills to Invoke

  • deployment-engineer - Deployment orchestration
  • docker-expert - Containerization
  • vercel-deployment - Vercel deployment
  • github-actions-templates - CI/CD workflows
  • cicd-automation-workflow-automate - CI/CD automation

Actions

  1. Create Dockerfiles
  2. Configure build pipelines
  3. Set up deployment workflows
  4. Configure environment variables
  5. Deploy to production

Copy-Paste Prompts

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

Technology-Specific Workflows

React/Next.js Development

Skills: frontend-developer, react-patterns, nextjs-app-router-patterns, typescript-pro, tailwind-patterns

Python/FastAPI Development

Skills: fastapi-pro, python-pro, python-patterns, pydantic-models-py

Node.js/Express Development

Skills: nodejs-backend-patterns, javascript-pro, typescript-pro, express (via nodejs-backend-patterns)

Full-Stack Development

Skills: senior-fullstack, app-builder, frontend-developer, backend-architect, database-architect

Mobile Development

Skills: mobile-developer, react-native-architecture, flutter-expert, ios-developer

Quality Gates

Before moving to next phase, verify:

  • [ ] All tests passing
  • [ ] Code review completed
  • [ ] Security scan passed
  • [ ] Linting/formatting clean
  • [ ] Documentation updated

Related Workflow Bundles

  • wordpress - WordPress-specific development
  • security-audit - Security testing workflow
  • testing-qa - Comprehensive testing workflow
  • documentation - Documentation generation workflow

Limitations

  • Use this skill only when the task clearly matches the scope described above.
  • Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
  • Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.