Claude Code Skill

Use AI to accelerate Custom Component development with Claude Code

The Limio Skills plugin for Claude Code helps you rapidly build Custom Components using AI assistance. Instead of writing boilerplate from scratch, describe what you want and let Claude generate complete, production-ready components following Limio best practices.

What is Claude Code?

Claude Code is an agentic coding tool from Anthropic that lives in your terminal. It can understand your codebase, write code, run commands, and help you build faster. The Limio Skills plugin teaches Claude everything it needs to know about building Limio Custom Components.

Installing the Limio Skills Plugin

Prerequisites

• Claude Code installed and authenticated

• Access to your Limio Components Repository

Installation

Open Claude Code in your terminal and run:

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

After installation, the skill activates automatically when you mention Limio components, @limio/sdk, useCampaign, useBasket, or similar terms.

Using the Skill

Once installed, simply describe the component you want to build. The skill provides Claude with:

• Complete @limio/sdk hook documentation (useCampaign, useBasket, useUser, etc.)

• All limioProps field types and configurations

• Add-to-basket patterns

• Page Builder compatibility guidance

• Common utilities and best practices

Example Prompts

Basic offer cards:

Create a Limio component for offer cards that displays pricing
with a monthly/annual toggle

Styled component:

Create a Limio offer component in the style of Spotify with
dark theme and green accent colors

Full page:

Build a complete subscription landing page with header, hero,
offer cards, FAQ section, and footer components

Specific SDK usage:

Create a header component that shows the user's email when
logged in using useUser, and a cart icon with item count
from useBasket

What Gets Generated

For each component, Claude will create:

File	Purpose
package.json	Dependencies and limioProps configuration
index.js	React component with SDK integration
componentStaticProps.js	Props hook setup
index.css	Component styling

All generated components follow Development Guidelines and use proper Prop Types.

Example Output

When you ask for an offer card component, Claude generates something like:

package.json:

{
  "name": "@limio/my-offer-cards",
  "version": "1.0.0",
  "description": "Custom offer cards component",
  "main": "./index.js",
  "dependencies": {
    "ramda": "^0.28.0",
    "xss": "^1.0.8"
  },
  "peerDependencies": {
    "react": "*"
  },
  "limioProps": [
    {
      "id": "headline",
      "label": "Headline",
      "type": "string",
      "default": "Choose Your Plan"
    },
    {
      "id": "showGroupedOffers",
      "label": "Enable Monthly/Annual Toggle",
      "type": "boolean",
      "default": true
    }
  ]
}

index.js:

import React, { useState, useMemo } from "react"
import { useCampaign, useBasket } from "@limio/sdk"
import { getCurrentBasketId } from "@limio/shop/src/shop/checkout/basket"
import { useStaticProps } from "./componentStaticProps"
import { groupBy, prop } from "ramda"
import xss from "xss"
import "./index.css"

const sanitizeString = (str) => xss(str || "")

const MyOfferCards = () => {
    const { offers } = useCampaign() || {}
    const props = useStaticProps() || {}
    const { basketLoading, initiateCheckout, addOfferToBasket } = useBasket() || {}

    // ... component implementation
}

export default MyOfferCards

Tips for Best Results

1. Be specific about styling - Mention brand names, color schemes, or design systems you want to emulate.

2. Specify SDK hooks - If you need user data, cart functionality, or offer grouping, mention it explicitly.

3. Describe the user flow - Explain what should happen when users interact (e.g., "add to basket on CTA click").

4. Request configurable props - Ask for "configurable copy" or "editable colors" to get limioProps that marketers can adjust in Page Builder.

Troubleshooting

Issue	Solution
Skill not activating	Ensure plugin is installed: run /plugin to check
Claude exploring filesystem	Update plugin to latest version
Missing SDK hooks	Mention specific hooks you need (useUser, useBasket, etc.)

What's next?

You can now vibe code your first component. Read about it:

Guide: Vibe Code Custom Components with Claude Code