Guide: Vibe Code Custom Components with Claude Code

Overview

Custom components let you extend Limio’s UI beyond the standard offering - think product-specific onboarding steppers, branded pricing displays, or checkout subcomponents.

With Claude Code and the Limio Component Skill, you can generate production-ready components from natural language prompts. The Limio Component Skill encodes Limio conventions, component scaffolding, and SDK usage patterns.

Prerequisites

• Claude Code subscription (or Cursor/similar AI coding tool)

• Access to your organization’s component repo (Getting Started Guide)

• CI/CD Pipeline setup, if you are using GitHub or GitLab ( Connecting External CI)

• Storybook configured for local preview (optional but recommended)

• Node.js installed

• npm/yarn/pnpm depending on repo

What you’ll build

1. Install the Limio Component Skill into Claude Code

2. Write a prompt describing your component requirements

3. Push to GitHub via your CI/CD pipeline

4. Preview in Storybook to validate the component

5. Deploy to Page Builder for use in Limio pages

Install the Limio Component Skill

The skill teaches Claude Code how to build Limio-compatible components. Run this in your terminal:

/plugin marketplace add innovate42/limio-skills
/plugin install limio-skills

Once installed, Claude Code understands:

• Component file structure and package.json dependencies

• Limio SDK methods and patterns

• Design system integration (Tailwind, Material Design, custom CSS)

You may already have this. You can check by asking Claude:

do you have limio component skill?

Write your component prompt

Be specific about functionality, design, and data sources. Reference design systems or existing patterns.

Example: Order completion stepper

Create a Limio component for the order complete page that displays 
onboarding steps based on the product purchased.

Requirements:
- Pull the order from the Limio SDK
- Display a stepper (1, 2, 3...) with product-specific instructions
- If SKU is "SaaS Basic": Step 1: Create account, Step 2: Check inbox
- If SKU is "SaaS Premium": Step 1: Create account, Step 2: Add users, 
  Step 3: Book onboarding session with Customer Success
- If multiple products in basket, show steps for the first product
- Follow Tailwind CSS conventions
- Make it responsive

Claude will typically inspect existing components in the repository before generating code, in order to match structure, SDK usage, and styling conventions. This is expected and improves compatibility with your build pipeline. For example, Claude will usually define configurable Page Builder props via limioProps in the component’s package.json, based on patterns it finds in similar components.

Push via CI/CD pipeline

Once Claude Code generates the component, push to your repo. The CI/CD pipeline handles build validation.

git add .
git commit -m "Add order-complete-stepper component"
git push origin feature/order-complete-stepper

The pipeline will:

• Run linting and type checks

• Validate the component builds successfully and that all imported dependencies are declared in its package.json.

• Build the component bundle

Preview in Storybook

Before deploying to Limio's Page Builder, validate your component locally:

npm run storybook

(or the Storybook command defined in your repo, e.g. npm run limio)

Storybook lets you:

• See the component with mock data

• Test different SKU scenarios

• Verify responsive behavior

If Storybook isn’t configured, ask Claude Code:

Set up Storybook for this component with stories for each SKU variant

Mocked-up vibe-coded component in Storybook

Iterate with Claude Code

You can add more functionality to your component. For example to add more configurable props to the Page Builder:

can you make all the labels configurable please?

You could also make sure to manage certain states more granularly:

can you hide the onboarding steps if there are multiple products purchases?

Or:

can you show an error if the order has no items?

Deploy to Page Builder

Once your PR is merged and the build passes:

1. Open Limio Page Builder

2. Navigate to your target page (e.g., Order Complete)

3. Add your new component from the component library

4. Configure any required props

5. Publish

Vibe-coded custom component visible in the Page Builder with Props in the side panel

Design system integration

You can specify your design system in the prompt:

Tailwind:

Follow Tailwind CSS conventions. Use the default color palette.

Custom CSS:

Import styles from /styles/brand.css. Use our existing button 
and card classes.

Figma reference:

Match the design in Figma file [name]. Use 16px border radius, 
#1a1a1a text, #f5f5f5 background.

Tips & troubleshooting

• Build failing? Check that your component uses only public SDK methods. Run the repo’s local build or validation script (e.g. npm run build or npm run validate).

• Storybook not loading? Ensure dependencies are installed: npm install

• Component not appearing in Page Builder? Ensure the component is exported correctly (typically via the component entrypoint file).

• Styling issues? Claude Code picks up existing patterns—provide explicit design guidelines if the output doesn’t match expectations.

• Token usage high? Use --dangerously-skip-permissions flag to reduce confirmation prompts (use with caution).

Example use cases

Component	Description
Pricing page display	Custom offer cards with your brand styling
Order complete stepper	Product-specific onboarding instructions
Checkout subcomponent	Custom fields
Update subscription offers	Display upgrade/downgrade options
“Best offer” badge	Dynamic labeling based on offer attributes

We are actively improving this experience. Please reach out to [email protected] if you hit any issues.