Back to Details

development

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

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.
整合了涵盖Web、移动和后端开发的端到端软件开发工作流。本合集编排了从项目搭建到部署的全流程技能，用于构建可投入生产环境的应用。

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
在以下场景中使用本工作流：
  • 构建新的Web或移动应用
  • 为现有应用添加功能
  • 重构或现代化遗留代码
  • 采用最佳实践搭建新项目
  • 全栈功能开发
  • 跨平台应用开发

Workflow Phases

工作流阶段

Phase 1: Project Setup and Scaffolding

阶段1：项目搭建与初始化

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
  • app-builder
    - 应用构建主协调器
  • senior-fullstack
    - 全栈开发指导
  • environment-setup-guide
    - 开发环境搭建
  • concise-planning
    - 任务规划与拆分

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
  1. 确定项目类型（Web、移动、全栈）
  2. 选择技术栈
  3. 初始化项目结构
  4. 配置开发环境
  5. 搭建版本控制与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
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

阶段2：前端开发

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
  • 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+模式

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
  1. 设计组件架构
  2. 实现UI组件
  3. 搭建状态管理系统
  4. 配置路由
  5. 应用样式与主题
  6. 实现响应式设计

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
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

阶段3：后端开发

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
  • backend-architect
    - 后端架构设计
  • backend-dev-guidelines
    - 后端开发规范
  • nodejs-backend-patterns
    - Node.js/Express模式
  • fastapi-pro
    - FastAPI开发
  • api-design-principles
    - REST/GraphQL API设计
  • auth-implementation-patterns
    - 认证实现模式

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
  1. 设计API架构
  2. 实现REST/GraphQL接口
  3. 搭建数据库连接
  4. 实现认证/授权机制
  5. 配置中间件
  6. 搭建错误处理系统

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
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

阶段4：数据库开发

Skills to Invoke

调用技能

  • database-architect
    - Database design
  • database-design
    - Schema design principles
  • prisma-expert
    - Prisma ORM
  • postgresql
    - PostgreSQL optimization
  • neon-postgres
    - Serverless Postgres
  • database-architect
    - 数据库设计
  • database-design
    - 数据库 schema 设计原则
  • prisma-expert
    - Prisma ORM
  • postgresql
    - PostgreSQL优化
  • neon-postgres
    - 无服务器Postgres

Actions

操作步骤

  1. Design database schema
  2. Create migrations
  3. Set up ORM
  4. Optimize queries
  5. Configure connection pooling
  1. 设计数据库 schema
  2. 创建迁移脚本
  3. 搭建ORM系统
  4. 优化查询语句
  5. 配置连接池

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
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

阶段5：测试

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
  • test-driven-development
    - TDD工作流
  • javascript-testing-patterns
    - Jest/Vitest测试
  • python-testing-patterns
    - pytest测试
  • e2e-testing-patterns
    - Playwright/Cypress端到端测试
  • playwright-skill
    - 浏览器自动化测试

Actions

操作步骤

  1. Write unit tests
  2. Create integration tests
  3. Set up E2E tests
  4. Configure CI test runners
  5. Achieve coverage targets
  1. 编写单元测试
  2. 创建集成测试
  3. 搭建端到端测试
  4. 配置CI测试运行器
  5. 达成测试覆盖率目标

Copy-Paste Prompts

可复制提示词

Use @test-driven-development to implement features with TDD
Use @playwright-skill to create E2E tests for critical user flows
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

阶段6：代码质量与评审

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
  • code-reviewer
    - AI驱动的代码评审
  • clean-code
    - 整洁代码原则
  • lint-and-validate
    - 代码检查与验证
  • security-scanning-security-sast
    - 静态安全分析

Actions

操作步骤

  1. Run linters and formatters
  2. Perform code review
  3. Fix code quality issues
  4. Run security scans
  5. Address vulnerabilities
  1. 运行代码检查器与格式化工具
  2. 执行代码评审
  3. 修复代码质量问题
  4. 运行安全扫描
  5. 处理漏洞

Copy-Paste Prompts

可复制提示词

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

Phase 7: Build and Deployment

阶段7：构建与部署

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
  • deployment-engineer
    - 部署编排
  • docker-expert
    - 容器化
  • vercel-deployment
    - Vercel部署
  • github-actions-templates
    - CI/CD工作流
  • cicd-automation-workflow-automate
    - CI/CD自动化

Actions

操作步骤

  1. Create Dockerfiles
  2. Configure build pipelines
  3. Set up deployment workflows
  4. Configure environment variables
  5. Deploy to production
  1. 创建Dockerfile
  2. 配置构建流水线
  3. 搭建部署工作流
  4. 配置环境变量
  5. 部署到生产环境

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
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

React/Next.js开发

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

Python/FastAPI Development

Python/FastAPI开发

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

Node.js/Express Development

Node.js/Express开发

Skills: nodejs-backend-patterns, javascript-pro, typescript-pro, express (via nodejs-backend-patterns)
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
Skills: senior-fullstack, app-builder, frontend-developer, backend-architect, database-architect

Mobile Development

移动开发

Skills: mobile-developer, react-native-architecture, flutter-expert, ios-developer
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
  • wordpress
    - WordPress专属开发工作流
  • security-audit
    - 安全测试工作流
  • testing-qa
    - 综合性测试工作流
  • documentation
    - 文档生成工作流