Iniciar sesiΓ³n
soilmass

flow

by @soilmass in Tools
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-validation β†’ scaffold β†’ prisma β†’ database-seeding β†’ auth β†’ logging β†’ shadcn Full project setup from zero
feature nextjs-routing β†’ react-server-components β†’ react-forms β†’ react-server-actions Complete feature with UI and data
harden security β†’ rate-limiting β†’ accessibility β†’ performance β†’ observability β†’ error-handling β†’ caching β†’ testing Production readiness hardening
ship testing β†’ performance β†’ deploy Test, verify perf, deploy
audit typescript-patterns β†’ security β†’ caching Code quality and security review
refactor react-server-components β†’ react-client-components β†’ caching Optimize component architecture
i18n i18n β†’ nextjs-routing β†’ nextjs-middleware β†’ nextjs-metadata Full internationalization setup
a11y accessibility β†’ shadcn β†’ react-forms β†’ testing Accessibility compliance pass
migration prisma β†’ database-seeding β†’ testing Database migration with seed and verify
seo nextjs-metadata β†’ seo-advanced β†’ i18n β†’ performance Full SEO optimization pass
full-audit code-reviewer β†’ api-security-auditor β†’ a11y-auditor β†’ perf-profiler β†’ seo-auditor β†’ bundle-auditor β†’ db-query-auditor β†’ dependency-auditor β†’ error-handling-auditor β†’ test-coverage-auditor β†’ type-safety-auditor β†’ observability-auditor β†’ compliance-auditor β†’ tenancy-auditor β†’ api-docs-auditor All-agent comprehensive audit
observe logging β†’ analytics β†’ error-handling β†’ performance Observability stack setup
full-feature nextjs-routing β†’ react-server-components β†’ react-forms β†’ react-server-actions β†’ logging β†’ testing Complete feature with observability
security-full security β†’ api-security-auditor β†’ rate-limiting β†’ logging Security depth with agent review
db-health prisma β†’ db-query-auditor β†’ testing Database optimization audit
deps-check dependency-auditor npm security, licensing, bloat
type-check typescript-patterns β†’ type-safety-auditor No-any enforcement pass
test-gaps test-coverage-auditor β†’ testing Missing test detection + fix
resilience observability β†’ error-handling β†’ logging β†’ testing Health checks, tracing, circuit breakers, graceful degradation
gdpr compliance β†’ prisma β†’ security β†’ logging β†’ testing GDPR-compliant data handling with audit trails
api-first api-routes β†’ api-documentation β†’ typescript-patterns β†’ security β†’ testing API-first product with auto-generated docs and type-safe clients
b2b-saas multi-tenancy β†’ feature-flags β†’ compliance β†’ auth β†’ payments β†’ testing Full B2B SaaS with tenant isolation, billing, compliance
content-site cms β†’ nextjs-metadata β†’ seo-advanced β†’ edge-computing β†’ image-optimization β†’ performance Marketing site or blog with CMS, SEO, edge delivery
search-notify search β†’ notifications β†’ real-time β†’ analytics β†’ testing Search-heavy app with notifications and real-time updates
mobile-first pwa β†’ notifications β†’ image-optimization β†’ accessibility β†’ performance β†’ testing Mobile-first app with offline support and native-like experience
design-system storybook β†’ shadcn β†’ visual-regression β†’ accessibility β†’ tailwind-v4 Design system with visual documentation and regression testing
perf-audit perf-profiler β†’ bundle-auditor β†’ performance Performance and bundle audit with optimization
bundle-optimize bundle-auditor β†’ react-server-components β†’ react-client-components β†’ performance Client/server boundary optimization
docs-sprint api-documentation β†’ storybook β†’ testing 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

# Related Skills

obra
executing-plans @obra

Use when you have a written implementation plan to execute in a separate session with review checkpoints

β˜… 32,766
obra
using-superpowers @obra

Use when starting any conversation - establishes how to find and use skills, requiring Skill...

β˜… 32,766

# Supported AI Coding Agents

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

⚑ Amp πŸš€ Antigravity πŸ€– Claude Code πŸ¦€ Clawdbot πŸ“ Codex ▢️ Cursor πŸ€– Droid πŸ’Ž Gemini CLI πŸ™ GitHub Copilot πŸͺΏ Goose πŸ“Š Kilo Code πŸ”§ Kiro CLI πŸ’» OpenCode 🦘 Roo Code 🌲 Trae πŸ„ Windsurf

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