From limio-skills
Creates Storybook stories for Limio components with meaningful variations and realistic mock data. Use when user asks to "create a story", "add storybook stories", "write stories for component", "story for component", "create variations", mentions ".stories.js", or discusses story variations for a Limio component. Both developers and non-technical staff can describe desired variations. Do NOT use for setting up Storybook (use limio-storybook) or creating components (use limio-component).
How this skill is triggered — by the user, by Claude, or both
Slash command
/limio-skills:limio-storyThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
This skill creates Storybook stories for Limio components with meaningful variations and realistic mock data. It is designed for both **developers** and **non-technical staff** — anyone can describe the variations they want and Claude will translate them into proper story files.
This skill creates Storybook stories for Limio components with meaningful variations and realistic mock data. It is designed for both developers and non-technical staff — anyone can describe the variations they want and Claude will translate them into proper story files.
package.json to get the limioProps array — this defines all configurable props, their types, and defaultsindex.js to understand what the component renders and how it uses propsuseCampaign, useBasket, useUser, useSubscriptions, useCheckout, useLimioContext, etc.component-playground/src/stories/<ComponentName>.stories.js using PascalCase namingimport React from "react"
import Component from "../../components/component-name"
export default {
title: "Components/Component Name",
component: Component,
decorators: [
(Story) => (
<div style={{ padding: "2rem", maxWidth: "1200px", margin: "0 auto" }}>
<Story />
</div>
),
],
argTypes: {
// Map from limioProps — see rules below
},
}
const Template = (args) => <Component {...args} />
export const Default = Template.bind({})
Default.args = {
// Default values from limioProps
}
Map each limioProp type to its corresponding Storybook control:
| limioProps type | Storybook argType | Notes |
|---|---|---|
string | { control: "text" } | Plain text input |
boolean | { control: "boolean" } | Toggle switch |
number | { control: "number" } | Numeric input |
richText | { control: "text" } | HTML string — user edits raw HTML |
color | { control: "color" } | Color picker |
datetime | { control: "text" } | ISO date string |
picklist | { control: { type: "select" }, options: [...values] } | Dropdown from picklist options |
list | { control: "object" } | JSON editor for array of objects |
Given this limioProp:
{
"id": "theme",
"label": "Theme",
"type": "picklist",
"options": [
{ "id": "light", "label": "Light", "value": "light" },
{ "id": "dark", "label": "Dark", "value": "dark" }
],
"default": "light"
}
The argType becomes:
argTypes: {
theme: {
control: { type: "select" },
options: ["light", "dark"],
description: "Theme",
defaultValue: "light",
},
}
Non-technical staff can describe variations in plain language. Claude will translate these into proper story variations:
Just describe what you want to see — no code knowledge required.
Choose variations that make sense for the component being documented:
best_value__limio and badge textparameters.viewportstatus: "cancelled"loginStatus not "logged-in", no user dataloaded: falseparameters: { viewport: { defaultViewport: "mobile1" } }component-playground/src/stories/<ComponentName>.stories.jsPricingCards.stories.js, not pricing-cards.stories.jsSingleOffer, DarkTheme, CancelledSubscription — never Variation1, Variation2package.json../../components/component-name (from src/stories/ up to component-playground/, then into components/)useCampaign, the mock provides 3 offers by default. For components using useUser, the mock provides a logged-in user with 3 subscriptions (2 active, 1 cancelled). These mocks are already wired up — no additional mock setup needed in the story file.useStaticProps: The component reads args via the ComponentContext provider. Storybook args are passed as props to the component, which merges them with defaults in useStaticProps."<h1>Welcome</h1><p>Get started today</p>"){ id, label } objects for list propsparameters: { viewport: { defaultViewport: "mobile1" } }See references/story-examples.md for complete, working story examples for different component types:
limio-component — Create the components themselveslimio-storybook — Set up and launch the Storybook playgroundlimio-setup — Credentials and deploymentnpx claudepluginhub innovate42/limio-skills --plugin limio-skillsGenerates CSF3 Storybook stories for components (React, Vue, shadcn/ui) with variant coverage and state matrices. Invoke when creating component stories.
Guides writing, updating, and reviewing Storybook stories with a strict workflow. Pulls story-writing rules from the MCP, ensures a running preview, and prevents unverified stories.
Documents components with Storybook using CSF 3.0, controls, and MDX. Use when creating component catalogs, interactive examples, visual testing setups, or design system documentation sites.