workflow-init
Install and configure Vercel Workflow SDK before it exists in node_modules. Use when the user asks to "install workflow", "set up workflow", "add durable workflows", "configure workflow sdk", or "init workflow" for Next.js, Express, Hono, Fastify, NestJS, Nitro, Nuxt, Astro, SvelteKit, or Vite.
Works with
--- name: workflow-init description: Install and configure Vercel Workflow SDK before it exists in node_modules. Use when the user asks to "install workflow", "set up workflow", "add durable workflows", "configure workflow sdk", or "init workflow" for Next.js, Express, Hono, Fastify, NestJS, Nitro, Nuxt, Astro, SvelteKit, or Vite. license: Apache-2.0 --- # workflow-init Initial setup of Vercel Workflow SDK **before** `workflow` is installed. Fetch the official getting-started guide for the user's framework. ## Decision Flow ### 0) Sanity check Read `package.json`. If `workflow` is already a dependency, tell the user to use `/workflow` instead (it reads versioned docs from `node_modules/workflow/docs/`). Only continue if workflow is missing. ### 1) Determine the framework **Non-interactive:** If the user named a framework in their prompt, use it directly. **Auto-detect:** Inspect `package.json` deps and config files. Use the first match: 1. **Next.js** - `next` dep or `next.config.*` 2. **Nuxt** - `nuxt` dep or `nuxt.config.*` 3. **SvelteKit** - `@sveltejs/kit` dep or `svelte.config.*` 4. **Astro** - `astro` dep or `astro.config.*` 5. **NestJS** - `@nestjs/core` dep or `nest-cli.json` 6. **Nitro** - `nitro` dep or `nitro.config.*` 7. **Express** - `express` dep 8. **Fastify** - `fastify` dep 9. **Hono** - `hono` dep 10. **Vite** - `vite` dep (and not matched above) If no match or multiple matches, ask the user to pick. ### 2) Fetch and follow the getting-started guide Fetch **exactly one** of these URLs and follow the guide step-by-step: | Framework | URL | |-----------|-----| | Next.js | https://workflow-sdk.dev/docs/getting-started/next | | Express | https://workflow-sdk.dev/docs/getting-started/express | | Hono | https://workflow-sdk.dev/docs/getting-started/hono | | Fastify | https://workflow-sdk.dev/docs/getting-started/fastify | | NestJS | https://workflow-sdk.dev/docs/getting-started/nestjs | | Nitro | https://workflow-sdk.dev/docs/getting-started/nitro | | Nuxt | https://workflow-sdk.dev/docs/getting-started/nuxt | | Astro | https://workflow-sdk.dev/docs/getting-started/astro | | SvelteKit | https://workflow-sdk.dev/docs/getting-started/sveltekit | | Vite | https://workflow-sdk.dev/docs/getting-started/vite | Each guide covers: install deps, configure framework, create first workflow, create route handler, run + verify. ### 3) Verify setup - Start the dev server per the guide. - Trigger the example endpoint with the provided `curl`. - Confirm logs show the workflow and steps executing. - Optional: `npx workflow web` or `npx workflow inspect runs`. ### 4) No framework yet? If no framework exists, ask what the user wants: - **Web app**: Next.js / Nuxt / SvelteKit / Astro - **API server**: Express / Fastify / Hono - **Minimal server**: Nitro or Vite Then follow the "Create Your Project" section of the chosen guide. ## Concept questions (pre-install) If the user asks conceptual questions before installing, fetch: - https://workflow-sdk.dev/docs/foundations/workflows-and-steps - https://workflow-sdk.dev/cookbook ## Handoff When setup is complete, tell the user: **Use `/workflow` for ongoing development** - it reads the versioned docs bundled in `node_modules/workflow/docs/`.
More Frontend Frameworks skills
frontend-design
anthropics/skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
design-taste-frontend
leonxlnx/taste-skill
Anti-slop frontend skill for landing pages, portfolios, and redesigns. The agent reads the brief, infers the right design direction, and ships interfaces that do not look templated. Real design systems when applicable, audit-first on redesigns, strict pre-flight check.
hyperframes-creative
heygen-com/hyperframes
Non-animation creative direction for HyperFrames videos. Use for design spec (frame.md / design.md) handling, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns, and brand / style decisions. For atomic motion patterns and scene blueprints, use `hyperframes-animation`.

