Claude Code Plugins

Community-maintained marketplace

Feedback

n8n-saas-builder

@awjames6875/skills-factory
0
0

Builds a complete SaaS frontend wrapper around validated n8n workflows. Use this skill when you want to CREATE A WEBSITE, BUILD A UI, MAKE A SAAS PRODUCT, or WRAP AN N8N WORKFLOW in a user-friendly interface. Generates Next.js/React frontends with Tailwind CSS that connect to n8n webhooks.

Install Skill

1Download skill
2Enable skills in Claude

Open claude.ai/settings/capabilities and find the "Skills" section

3Upload to Claude

Click "Upload skill" and select the downloaded ZIP file

Note: Please verify skill by going through its instructions before using it.

SKILL.md

name n8n-saas-builder
description Builds a complete SaaS frontend wrapper around validated n8n workflows. Use this skill when you want to CREATE A WEBSITE, BUILD A UI, MAKE A SAAS PRODUCT, or WRAP AN N8N WORKFLOW in a user-friendly interface. Generates Next.js/React frontends with Tailwind CSS that connect to n8n webhooks.

n8n SaaS Builder

Transform any validated n8n workflow into a production-ready SaaS product. This skill analyzes your workflow's webhook inputs and automatically generates a beautiful frontend that non-technical users can interact with.

Capabilities

  • Analyze n8n workflow JSON to identify required inputs
  • Generate Next.js/React frontend with Tailwind CSS
  • Create responsive, modern UI with loading states
  • Connect frontend to n8n webhook endpoints
  • Add user authentication (optional - using Clerk)
  • Deploy to Vercel with one command
  • Generate mobile-friendly designs

How to Use

  1. Validate first - Run your workflow through n8n-workflow-validator
  2. Provide the clean JSON - Upload the validated workflow
  3. Specify preferences - Tell me your design preferences (optional)
  4. Get your app - I generate the complete frontend code
  5. Deploy - I can deploy to Vercel for you

Input Format

  • Validated n8n JSON: The clean workflow from the validator
  • Design preferences (optional): Color scheme, style, branding
  • Webhook URL: Your production n8n webhook URL (or I'll use a placeholder)

Output Format

  • Complete Next.js project with all files
  • Tailwind CSS styling - Modern, responsive design
  • API integration - Connected to your n8n webhook
  • Deployment instructions - Ready for Vercel
  • README - How to customize and run locally

What Gets Generated

my-saas-app/
├── src/
│   ├── app/
│   │   ├── page.tsx          ← Main landing page with form
│   │   ├── layout.tsx        ← App layout and metadata
│   │   └── globals.css       ← Tailwind imports
│   └── components/
│       ├── InputForm.tsx     ← Dynamic form based on webhook inputs
│       ├── ResultCard.tsx    ← Display webhook response
│       └── LoadingSpinner.tsx
├── public/
├── package.json
├── tailwind.config.js
├── next.config.js
└── README.md

Example Usage

"Build a SaaS frontend for my validated n8n workflow"

"Create a website that connects to my n8n webhook - I want it dark mode with purple accents"

"Turn this workflow into a product my clients can use without seeing n8n"

"/build-saas clean_workflow.json"

Design Options

Style Presets:

  • modern - Clean, minimal, lots of whitespace (default)
  • glassmorphism - Frosted glass effects, dark mode
  • corporate - Professional, trustworthy, blue tones
  • playful - Rounded corners, gradients, friendly

Color Schemes:

  • Default: Dark mode with purple accents
  • Custom: Tell me your brand colors

Best Practices

  1. Validate first - Always run n8n-workflow-validator before building UI
  2. Test locally - Run npm run dev to test before deploying
  3. Set your webhook URL - Replace the placeholder with your real URL
  4. Add authentication - For paid products, add Clerk or similar
  5. Customize branding - Update colors/logo to match your brand

Limitations

  • Requires a validated workflow with a webhook trigger
  • Complex multi-step workflows may need manual UI adjustments
  • Authentication (Clerk) setup requires additional configuration
  • File uploads require extra handling (base64 encoding)

Tech Stack

  • Framework: Next.js 14 (App Router)
  • Styling: Tailwind CSS
  • Icons: Lucide React
  • Deployment: Vercel-ready
  • Optional Auth: Clerk