# Guide: Vibe Code Custom Components with Claude Code

### Overview

[Custom components](https://docs.limio.com/developers/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](https://docs.limio.com/developers/custom-components/claude-code-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](https://docs.limio.com/developers/custom-components/custom-components#getting-started-with-limio-components-repository))
* **CI/CD Pipeline setup,** if you are using GitHub or GitLab ( [https://docs.limio.com/developers/custom-components/connecting-external-ci](https://docs.limio.com/developers/custom-components/connecting-external-ci "mention"))
* **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:

```bash
/plugin marketplace add innovate42/limio-skills
```

Then:

```
/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.

```bash
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 [https://docs.limio.com/product/page-builder](https://docs.limio.com/product/page-builder "mention"), validate your component locally:

```bash
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
```

<figure><img src="/files/BvQqNVEGI4M53UtM280v" alt=""><figcaption><p>Mocked-up vibe-coded component in Storybook</p></figcaption></figure>

### 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

<figure><img src="/files/AOrgQl6RErJQwPcHnt3Q" alt=""><figcaption><p>Vibe-coded custom component visible in the Page Builder with Props in the side panel</p></figcaption></figure>

### 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 |

{% hint style="info" %}
We are actively improving this experience. Please reach out to <support@limio.com> if you hit any issues.
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.limio.com/guides/developer-guides/guide-vibe-code-custom-components-with-claude-code.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.