Development

# 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

``