soilmass

flow

0
0
# Install this skill:
npx skills add soilmass/vibe-coding-plugin --skill "flow"

Install specific skill from multi-skill repository

# Description

>

# SKILL.md


name: flow
description: >
Workflow pipeline orchestrator — chains skills in predefined sequences for 29 pipelines including build, feature, harden, ship, audit, refactor, i18n, a11y, migration, seo, full-audit, observe, full-feature, resilience, gdpr, api-first, b2b-saas, content-site, search-notify, mobile-first, design-system, perf-audit, bundle-optimize, and docs-sprint workflows
allowed-tools: Read, Grep, Glob


Flow

Purpose

Workflow pipeline orchestrator that chains skills in predefined sequences. Runs multi-step
development workflows end-to-end. The ONE orchestrator for structured multi-skill pipelines.

When to Use

  • User wants a full build pipeline (env-validation → scaffold → prisma → seeding → auth → shadcn)
  • Building a complete feature (routing → components → forms → actions)
  • Hardening an app (security → a11y → perf → errors → caching → testing)
  • Shipping to production (testing → deploy)
  • Running an audit (typescript → security → caching)
  • Adding i18n (i18n → routing → middleware → metadata)
  • Accessibility pass (accessibility → shadcn → forms → testing)
  • Database migration workflow (prisma → database-seeding → testing)
  • SEO optimization (nextjs-metadata → seo-advanced → i18n → performance)
  • Full audit (up to 15 auditor agents, 2 conditional)
  • Observability stack (logging → analytics → error-handling → performance)
  • Full feature with observability (routing → components → forms → actions → logging → testing)
  • Resilience setup (observability → error-handling → logging → testing)
  • GDPR compliance (compliance → prisma → security → logging → testing)
  • API-first development (api-routes → api-documentation → typescript-patterns → security → testing)
  • B2B SaaS setup (multi-tenancy → feature-flags → compliance → auth → payments → testing)
  • Content site (cms → nextjs-metadata → seo-advanced → edge-computing → image-optimization → performance)
  • Search with notifications (search → notifications → real-time → analytics → testing)
  • Mobile-first PWA (pwa → notifications → image-optimization → accessibility → performance → testing)
  • Design system (storybook → shadcn → visual-regression → accessibility → tailwind-v4)

When NOT to Use

  • Single skill task → invoke that skill directly
  • Ambiguous intent → vibe (classifies first, then routes)
  • Custom workflow not matching a pipeline → chain skills manually

Pipelines

Pipeline Chain Description
build env-validationscaffoldprismadatabase-seedingauthloggingshadcn Full project setup from zero
feature nextjs-routingreact-server-componentsreact-formsreact-server-actions Complete feature with UI and data
harden securityrate-limitingaccessibilityperformanceobservabilityerror-handlingcachingtesting Production readiness hardening
ship testingperformancedeploy Test, verify perf, deploy
audit typescript-patternssecuritycaching Code quality and security review
refactor react-server-componentsreact-client-componentscaching Optimize component architecture
i18n i18nnextjs-routingnextjs-middlewarenextjs-metadata Full internationalization setup
a11y accessibilityshadcnreact-formstesting Accessibility compliance pass
migration prismadatabase-seedingtesting Database migration with seed and verify
seo nextjs-metadataseo-advancedi18nperformance Full SEO optimization pass
full-audit code-reviewerapi-security-auditora11y-auditorperf-profilerseo-auditorbundle-auditordb-query-auditordependency-auditorerror-handling-auditortest-coverage-auditortype-safety-auditorobservability-auditorcompliance-auditortenancy-auditorapi-docs-auditor All-agent comprehensive audit
observe logginganalyticserror-handlingperformance Observability stack setup
full-feature nextjs-routingreact-server-componentsreact-formsreact-server-actionsloggingtesting Complete feature with observability
security-full securityapi-security-auditorrate-limitinglogging Security depth with agent review
db-health prismadb-query-auditortesting Database optimization audit
deps-check dependency-auditor npm security, licensing, bloat
type-check typescript-patternstype-safety-auditor No-any enforcement pass
test-gaps test-coverage-auditortesting Missing test detection + fix
resilience observabilityerror-handlingloggingtesting Health checks, tracing, circuit breakers, graceful degradation
gdpr complianceprismasecurityloggingtesting GDPR-compliant data handling with audit trails
api-first api-routesapi-documentationtypescript-patternssecuritytesting API-first product with auto-generated docs and type-safe clients
b2b-saas multi-tenancyfeature-flagscomplianceauthpaymentstesting Full B2B SaaS with tenant isolation, billing, compliance
content-site cmsnextjs-metadataseo-advancededge-computingimage-optimizationperformance Marketing site or blog with CMS, SEO, edge delivery
search-notify searchnotificationsreal-timeanalyticstesting Search-heavy app with notifications and real-time updates
mobile-first pwanotificationsimage-optimizationaccessibilityperformancetesting Mobile-first app with offline support and native-like experience
design-system storybookshadcnvisual-regressionaccessibilitytailwind-v4 Design system with visual documentation and regression testing
perf-audit perf-profilerbundle-auditorperformance Performance and bundle audit with optimization
bundle-optimize bundle-auditorreact-server-componentsreact-client-componentsperformance Client/server boundary optimization
docs-sprint api-documentationstorybooktesting API docs, component docs, and test generation

Execution Rules

  1. Load skills sequentially — each step depends on the previous
  2. Max 3 skills active at any point — unload completed skills
  3. Check project state before each step — skip if already done
  4. Stop on errors — don't continue pipeline if a step fails
  5. Report progress — tell user which step is active

Pipeline Details

build

1. env-validation — set up @t3-oss/env-nextjs with Zod schema
   Skip if: src/env.ts exists
2. scaffold — create Next.js 15 project structure
   Skip if: next.config.ts exists
3. prisma — set up database schema and client
   Skip if: prisma/ directory exists
4. database-seeding — create seed scripts and factories
   Skip if: prisma/seed.ts exists
5. auth — configure Auth.js with providers
   Skip if: src/lib/auth.ts exists
6. logging — set up structured logging with Pino
   Skip if: src/lib/logger.ts exists
7. shadcn — initialize component library
   Skip if: components.json exists

feature

1. nextjs-routing — create route files (page.tsx, layout.tsx)
2. react-server-components — build data-fetching components
3. react-forms — add interactive form UI
4. react-server-actions — implement mutation logic

harden

1. security — CSP headers, server-only, env validation
2. rate-limiting — protect API routes and Server Actions from abuse
3. accessibility — WCAG 2.1 AA compliance, semantic HTML, ARIA
4. performance — bundle analysis, dynamic imports, image optimization
5. observability — health checks, tracing, circuit breakers
   Skip if: instrumentation.ts exists
6. error-handling — error.tsx, global-error.tsx, not-found.tsx
7. caching — explicit cache strategies, revalidation tags
8. testing — unit tests for actions, E2E for critical flows

ship

1. testing — run vitest and playwright suites
   Abort if: tests fail
2. performance — verify bundle sizes and Web Vitals
3. deploy — push to Vercel or build Docker image

audit

1. typescript-patterns — check for any, missing types
2. security — check for server-only, CSP, env validation
3. caching — check for explicit cache strategies

refactor

1. react-server-components — identify unnecessary "use client"
2. react-client-components — extract minimal interactive parts
3. caching — add caching to server-side data fetching

i18n

1. i18n — set up next-intl, [locale] segments, translation files
2. nextjs-routing — configure locale-aware routing
3. nextjs-middleware — add locale detection middleware
4. nextjs-metadata — locale-aware metadata and SEO

a11y

1. accessibility — audit and fix semantic HTML, ARIA, keyboard nav
2. shadcn — ensure UI components meet a11y standards
3. react-forms — fix form error announcements, aria-describedby
4. testing — add accessibility tests (axe-core integration)

migration

1. prisma — run schema migrations
   Abort if: migration fails
2. database-seeding — seed or update test data
3. testing — verify data integrity with tests

seo

1. nextjs-metadata — set up base metadata, title templates, viewport
2. seo-advanced — add JSON-LD, dynamic sitemap, robots.txt, OG images
3. i18n — add hreflang and locale-specific metadata
   Skip if: no i18n configured
4. performance — verify metadata doesn't impact load times

full-audit

Note: This is an agent pipeline — each step runs an agent, not a skill.
1. code-reviewer — React 19, Next.js 15, TypeScript, security review
2. api-security-auditor — Server Action input validation, auth, injection
3. a11y-auditor — WCAG 2.1 AA accessibility audit
4. perf-profiler — Bundle, data fetching, rendering analysis
5. seo-auditor — Metadata, structured data, sitemap
6. bundle-auditor — Route sizes, client/server boundaries
7. db-query-auditor — N+1 queries, missing indexes, cascade risks
8. dependency-auditor — npm security, licensing, outdated deps
9. error-handling-auditor — Error boundaries, try-catch, error.tsx coverage
10. test-coverage-auditor — Missing tests for actions, critical flows
11. type-safety-auditor — No-any enforcement, type narrowing
12. observability-auditor — Health endpoints, tracing, timeouts, circuit breakers
13. compliance-auditor — GDPR consent, PII handling, audit logging, data retention
14. tenancy-auditor — Tenant isolation, cross-tenant leaks, query scoping
    Skip if: no Tenant model in schema
15. api-docs-auditor — OpenAPI coverage, versioning, documentation completeness
    Skip if: no OpenAPI/Swagger setup detected

observe

1. logging — set up structured logging with Pino/Sentry
   Skip if: src/lib/logger.ts exists
2. analytics — add Vercel Analytics, PostHog tracking
3. error-handling — add error.tsx, global-error.tsx boundaries
4. performance — verify observability doesn't impact load times

full-feature

1. nextjs-routing — create route files (page.tsx, layout.tsx)
2. react-server-components — build data-fetching components
3. react-forms — add interactive form UI
4. react-server-actions — implement mutation logic
5. logging — add structured logging for the feature
6. testing — unit tests for actions, integration for API

security-full

Note: Mixed pipeline — skills and agents.
1. security — CSP headers, server-only, env validation, CORS
2. api-security-auditor — Server Action input validation, auth, injection (agent)
3. rate-limiting — protect API routes and Server Actions from abuse
4. logging — audit trails and security event logging

db-health

Note: Mixed pipeline — skill and agent.
1. prisma — review schema, indexes, connection pooling
2. db-query-auditor — N+1 queries, missing indexes, cascade risks (agent)
3. testing — verify data integrity with tests

deps-check

Note: Agent-only pipeline.
1. dependency-auditor — npm security, licensing, outdated deps, bundle bloat (agent)

type-check

Note: Mixed pipeline — skill and agent.
1. typescript-patterns — check for any, missing types, proper patterns
2. type-safety-auditor — no-any enforcement, type narrowing, Zod alignment (agent)

test-gaps

Note: Mixed pipeline — agent and skill.
1. test-coverage-auditor — detect missing tests for actions, critical flows (agent)
2. testing — write missing unit and E2E tests based on audit findings

resilience

1. observability — OpenTelemetry tracing, health/readiness endpoints
   Skip if: instrumentation.ts exists
2. error-handling — error.tsx, global-error.tsx, circuit breaker fallbacks
3. logging — structured logging with trace ID correlation
   Skip if: src/lib/logger.ts exists
4. testing — test health endpoints, circuit breaker behavior, error paths

gdpr

1. compliance — cookie consent, audit logging, PII classification
2. prisma — soft-delete fields, AuditLog model, data retention fields
3. security — data protection headers, CORS for export endpoints
4. logging — PII masking, audit trail logging
5. testing — test data export, deletion lifecycle, consent flows

api-first

1. api-routes — implement route handlers with Zod validation
2. api-documentation — OpenAPI spec from Zod, Swagger UI, versioning
3. typescript-patterns — generate type-safe client SDK
4. security — auth documentation, rate limiting per endpoint
5. testing — API contract tests, versioning regression tests

b2b-saas

1. multi-tenancy — tenant model, Prisma extension, subdomain routing
2. feature-flags — per-tenant feature configuration
   Skip if: no Edge Config or LaunchDarkly
3. compliance — GDPR for multi-tenant data, per-tenant audit logs
4. auth — tenant-scoped auth, role-based access within tenant
5. payments — per-tenant billing with Stripe
   Skip if: no Stripe configured
6. testing — tenant isolation tests, cross-tenant leak tests

content-site

1. cms — headless CMS client, MDX rendering, Draft Mode
2. nextjs-metadata — dynamic metadata from CMS fields
3. seo-advanced — JSON-LD, sitemap, OG images from CMS
4. edge-computing — edge delivery, geo personalization
   Skip if: not deploying to Vercel
5. image-optimization — CMS image optimization via next/image
6. performance — verify content delivery speed, Core Web Vitals

search-notify

1. search — Meilisearch setup, indexing, faceted search UI
2. notifications — in-app notifications for search alerts, new results
3. real-time — live search result updates via SSE/Pusher
4. analytics — search analytics, popular queries, no-results tracking
5. testing — search accuracy tests, notification delivery tests

mobile-first

1. pwa — Web App Manifest, service worker, offline fallback
2. notifications — push notifications via service worker
3. image-optimization — responsive images, lazy loading
4. accessibility — touch targets, mobile screen reader support
5. performance — mobile performance budget, Core Web Vitals
6. testing — offline mode tests, responsive visual tests

design-system

1. storybook — Storybook 8 setup, component stories, autodocs
2. shadcn — stories for all shadcn components with controls
3. visual-regression — Playwright screenshot tests for components
4. accessibility — per-component a11y audit via Storybook addon
5. tailwind-v4 — design tokens in @theme, CSS-first config

perf-audit

Note: Mixed pipeline — agent and skills.
1. perf-profiler — bundle, data fetching, rendering analysis (agent)
2. bundle-auditor — route sizes, client/server boundaries (agent)
3. performance — apply optimization recommendations

bundle-optimize

1. bundle-auditor — identify heavy routes and deps (agent)
2. react-server-components — move components to server where possible
3. react-client-components — extract minimal client boundaries
4. performance — dynamic imports, lazy loading, tree-shaking

docs-sprint

1. api-documentation — OpenAPI spec, Swagger UI, versioning
2. storybook — component stories and visual docs
3. testing — documentation-driven test generation

Pattern

Invoking a pipeline

User: "Set up a new project with database and auth"
→ Flow selects: build pipeline
→ Runs: env-validation → scaffold → prisma → database-seeding → auth → shadcn

User: "Make my app production-ready"
→ Flow selects: harden pipeline
→ Runs: security → accessibility → performance → error-handling → caching → testing

User: "Ship it"
→ Flow selects: ship pipeline
→ Runs: testing → deploy

Anti-pattern

Running all pipeline steps without checking project state. Each step should
verify prerequisites and skip if already completed. Don't re-scaffold a project
that already exists.

Common Mistakes

  • Running build on existing project — check state first
  • Skipping testing in ship — always test before deploy
  • Running harden before build — no app to harden yet

Composes With

  • vibe — vibe classifies intent, flow runs the pipeline
  • All 56 skills — flow chains them in sequence

# Supported AI Coding Agents

This skill is compatible with the SKILL.md standard and works with all major AI coding agents:

Learn more about the SKILL.md standard and how to use these skills with your preferred AI coding agent.