Agent skill

Storylite Create Story

Create StoryLite component stories in consumer projects that use StoryLite public packages, explaining StoryLite's CSF-like story format with examples from single-story files to advanced args…

MITAuto-check passedFrontend & Design

Install Storylite Create Story

skills CLI

$ npx skills add itsjavi/storylite --skill storylite-create-story -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI

$ gh skill install itsjavi/storylite storylite-create-story --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy

$ git clone --depth 1 https://github.com/itsjavi/storylite.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/storylite-create-story .claude/skills/storylite-create-story && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Paste into Claude Code

Install the "storylite-create-story" agent skill from https://github.com/itsjavi/storylite/tree/main/skills/storylite-create-story into .claude/skills/storylite-create-story/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "storylite-create-story", then confirm the skill loads.

Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

$skill-installer

$skill-installer install https://github.com/itsjavi/storylite/tree/main/skills/storylite-create-story

Type this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.

skills CLI

$ npx skills add itsjavi/storylite --skill storylite-create-story -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install itsjavi/storylite storylite-create-story --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/itsjavi/storylite.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/storylite-create-story .agents/skills/storylite-create-story && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "storylite-create-story" agent skill from https://github.com/itsjavi/storylite/tree/main/skills/storylite-create-story into .agents/skills/storylite-create-story/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "storylite-create-story", then confirm the skill loads.

Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add itsjavi/storylite --skill storylite-create-story -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install itsjavi/storylite storylite-create-story --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/itsjavi/storylite.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/storylite-create-story .cursor/skills/storylite-create-story && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "storylite-create-story" agent skill from https://github.com/itsjavi/storylite/tree/main/skills/storylite-create-story into .cursor/skills/storylite-create-story/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "storylite-create-story", then confirm the skill loads.

Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

gemini skills install

$ gemini skills install https://github.com/itsjavi/storylite.git --path skills/storylite-create-story

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add itsjavi/storylite --skill storylite-create-story -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install itsjavi/storylite storylite-create-story --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/itsjavi/storylite.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/storylite-create-story .gemini/skills/storylite-create-story && rm -rf skills-src

Use ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.

Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/

Paste into Gemini CLI

Install the "storylite-create-story" agent skill from https://github.com/itsjavi/storylite/tree/main/skills/storylite-create-story into .gemini/skills/storylite-create-story/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "storylite-create-story", then confirm the skill loads.

Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

GitHub CLI

$ gh skill install itsjavi/storylite storylite-create-story

Installs for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).

skills CLI

$ npx skills add itsjavi/storylite --skill storylite-create-story -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/itsjavi/storylite.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/storylite-create-story .github/skills/storylite-create-story && rm -rf skills-src

Use ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.

GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/

Paste into GitHub Copilot

Install the "storylite-create-story" agent skill from https://github.com/itsjavi/storylite/tree/main/skills/storylite-create-story into .github/skills/storylite-create-story/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "storylite-create-story", then confirm the skill loads.

GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add itsjavi/storylite --skill storylite-create-story -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install itsjavi/storylite storylite-create-story --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/itsjavi/storylite.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/storylite-create-story .opencode/skills/storylite-create-story && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "storylite-create-story" agent skill from https://github.com/itsjavi/storylite/tree/main/skills/storylite-create-story into .opencode/skills/storylite-create-story/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "storylite-create-story", then confirm the skill loads.

OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

Facts

Skill name: storylite-create-story
GitHub stars: 143
Token cost: ~1.4k tokens
SKILL.md length: 666 words
Files: 3 (incl. references)
Skills in repo: 1
Repo updated: Sep 24, 2026
First seen: Oct 7, 2026
Licence: MIT

At a glance

Create StoryLite component stories in consumer projects that use StoryLite public packages, explaining StoryLite's CSF-like story format with examples from single-story files to advanced args…

Works in 8 steps: Inspect the consumer project for… → Match the consuming project's import… → Import public StoryLite types from… → …
Tasks that involve Design systems
SKILL.md covers Public Documentation, Workflow, StoryLite CSF-Like Format and Reference Examples
Reaches context7.com

What it does

Storylite Create Story is an agent skill from itsjavi/storylite. Create StoryLite component stories in consumer projects that use StoryLite public packages, explaining StoryLite's CSF-like story format with examples from single-story files to advanced args, argTypes, renderers, parameters, render context, CSS, and web components.

Its SKILL.md is about 1.4k tokens, which your agent loads only when the skill is triggered. The skill folder holds 4 other files, including reference files (for example `agents/openai.yaml` and `references/story-examples.md`).

It sits in Frontend & Design, covering Design systems. It works with Storybook. The repository describes itself as: Lightweight alternative to StoryBook for HTML / React / Preact / Svelte / Vue / Solid. The licence is MIT.

When your agent uses it

Tasks that involve Design systems

Example prompts

“/storylite-create-story”

Workflow steps

8 steps, taken from the first numbered list in SKILL.md.

Inspect the consumer project for .storylite/config.ts, configured story globs, installed
Match the consuming project's import style, renderer, naming, file extension, and CSS strategy.
Import public StoryLite types from @storylite/storylite: StoryLiteMeta,
Define a narrow Args type for each story or component group. Prefer string literal unions for
Add a default export with shared title, optional component, shared args, shared argTypes,
Add named story exports as objects. Use export const Default = { ... } for a file with one
Keep examples practical: start with the default state, then add meaningful variants such as
Do not add unsupported Storybook features. StoryLite stories do not support play, loaders,

What it can do on your machine

Read from SKILL.md and the folder at commit 268977d. It shows what the files ask for, not the result of running them.

Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md.
From the folder's file list and the shell code blocks in SKILL.md.
Network
Hosts in commands or code, which the agent is likely to contact:
- context7.com
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Storylite Create Story loads about 1.4k tokens when it runs, and up to ~3.7k if it reads all its reference files. Until then it costs about 72 tokens; SKILL.md has 666 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it: ~72
When it runs · the whole SKILL.md, loaded when a task matches: ~1.4k
With references · SKILL.md plus every file in references/, read only if the agent opens them: ~3.7k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from itsjavi/storylite at commit 268977d, republished under its MIT licence (© itsjavi). 666 words, ~1,394 tokens.

Download SKILL.mdSave it as .claude/skills/storylite-create-story/SKILL.md (or your agent's skills folder). This skill also uses 2 other files; get the full folder from GitHub.

name: storylite-create-story
description: Create StoryLite component stories in consumer projects that use StoryLite public packages, explaining StoryLite's CSF-like story format with examples from single-story files to advanced args, argTypes, renderers, parameters, render context, CSS, and web components.
metadata.short-description: Create StoryLite CSF-like stories

StoryLite Create Story

Use this skill when creating or updating StoryLite story modules in any project that uses the public StoryLite packages.

Do not assume the StoryLite source repository is present. Work from the consuming project's files, the installed public package API, and StoryLite's public documentation.

Public Documentation

When current StoryLite behavior or setup details matter, read these public docs before deciding:

LLM guidance: https://context7.com/itsjavi/storylite/llms.txt?tokens=10000
README: https://raw.githubusercontent.com/itsjavi/storylite/main/README.md

Prefer the llms.txt file for agent-oriented guidance when available, then use the raw README for installation, configuration, renderer adapters, and story-format details. If network access is not available, continue with the format summary and examples in this skill.

Workflow

Inspect the consumer project for .storylite/config.ts, configured story globs, installed @storylite/* packages, and nearby *.stories.ts or *.stories.tsx files.
Match the consuming project's import style, renderer, naming, file extension, and CSS strategy.
Import public StoryLite types from @storylite/storylite: StoryLiteMeta, StoryLiteStoryDefinition, and when useful StoryLiteParameters or StoryLiteRender.
Define a narrow Args type for each story or component group. Prefer string literal unions for select controls.
Add a default export with shared title, optional component, shared args, shared argTypes, and shared parameters.
Add named story exports as objects. Use export const Default = { ... } for a file with one primary story. Each export may provide name, component, args, argTypes, parameters, render, and source.
Keep examples practical: start with the default state, then add meaningful variants such as disabled, long content, error state, density, layout, or integration behavior.
Do not add unsupported Storybook features. StoryLite stories do not support play, loaders, decorators, docs/autodocs, actions, addon APIs, or arbitrary toolbar callbacks.

StoryLite CSF-Like Format

Default export fields:

title: Sidebar group title.
component: Optional component reference, or a custom element tag name for web components.
args: Default args merged into every story.
argTypes: Control metadata merged into every story.
parameters: Default story parameters merged into every story.
source: Optional code snippet override string or callback.

Named story export fields:

name: Optional display name. Defaults to a label derived from the export name.
component: Optional story-specific component override.
args: Args merged over default export args.
argTypes: Arg type metadata merged over default export arg types.
parameters: Parameters merged over default export parameters.
render(args, context): Story render function.
source: Optional story-specific snippet string or callback.

source may be a literal string or a callback with the signature (args, context) => string | null | undefined. Use a string for fixed snippets and a callback when the snippet should reflect current control values or story context.

Show full SKILL.md (250 more words)Show less

Use a single Default export when a story file has one primary state. When a component has exactly one story export, StoryLite shows it as one sidebar link instead of a component row plus a story row. A generated Default story uses the component title as the link label; a single story with another export or display name uses that story name. Keep the default export for metadata; do not put the story itself in export default.

Supported controls: boolean, text, textarea, number, color, and select. Controls may be declared as strings, such as { control: 'text' }, or objects, such as { control: { type: 'select' }, options: ['primary', 'secondary'] }. If no control is provided, StoryLite infers a simple control from the current arg value.

Supported parameters:

renderer: html, web-components, or an adapter renderer such as react, preact, svelte, vue, or solid.
css: Per-story CSS string or array of strings.
background: Initial preview background value.
defineCustomElements(window): Registers custom elements in the preview window.

render(args, context) receives id, title, name, canvas, document, and window. HTML stories may return a string, Node, or DocumentFragment. Framework adapter stories usually return framework output from render; web component stories can often omit render and use component plus args.

Reference Examples

Read references/story-examples.md when you need copyable examples from easy to advanced. It covers:

Minimal HTML stories.
Shared defaults and merged per-story overrides.
All controls and both argTypes declaration styles.
Per-story parameters.css, parameters.background, and parameters.renderer.
render(args, context) with DOM APIs.
React-style adapter rendering.
Web component stories with component and defineCustomElements.

Files

SKILL.md and 2 other files (references) in skills/storylite-create-story of itsjavi/storylite.

SKILL.md
agents/openai.yaml
references/story-examples.md

Open the folder on GitHubat commit 268977d

Compare with similar skills

Storylite Create Story next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Storylite Create Story compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Storylite Create Story this skillitsjavi/storylite	143	—	~1.4k	Automated safety check: Pass	MIT	16 days ago
Run Umbraco UIumbraco/Umbraco.UI	152	—	~1.2k	Automated safety check: Pass	MIT	2 days ago
Wonder BlocksKhan/wonder-blocks	163	—	~3.2k	Automated safety check: Pass	MIT	yesterday
DaleuiDaleStudy/daleui	119	—	~675	Automated safety check: Pass	MIT	3 days ago
StorybookKhan/wonder-blocks	163	—	~4.2k	Automated safety check: Pass	MIT	yesterday
Dx Insight Usage Guardrailcultureamp/kaizen-design-system	176	—	~1.3k	Automated safety check: Pass	MIT	5 days ago

Similar skills

Run Umbraco UI
umbraco/Umbraco.UI
Build, run, and drive the Umbraco.UI (UUI) web-component library via its Storybook.
152 GitHub stars~1.2k tokensUpdated 2 days ago
Frontend & DesignAuto-check passed
Wonder Blocks
Khan/wonder-blocks
Implements user interfaces using the Wonder Blocks (WB) design system — Khan Academy's React component library.
163 GitHub stars~3.2k tokensUpdated yesterday
Frontend & DesignAuto-check passed
Daleui
DaleStudy/daleui
Use the daleui React design system with semantic Panda CSS tokens and accessible components.
119 GitHub stars~675 tokensUpdated 3 days ago
Frontend & DesignAuto-check passed
Storybook
Khan/wonder-blocks
Storybook best practices for Wonder Blocks component stories.
163 GitHub stars~4.2k tokensUpdated yesterday
Frontend & DesignAuto-check passed
Dx Insight Usage Guardrail
cultureamp/kaizen-design-system
Checks deps update in widely consumed repos will cause problems or not, and ranks dependency updates by downstream impact for prioritisation.
176 GitHub stars~1.3k tokensUpdated 5 days ago
Frontend & DesignAuto-check passed
Storybook Story
radix-ng/primitives
Write or update Storybook stories and docs MDX for a Radix NG primitive following project conventions.
274 GitHub stars~3.7k tokensUpdated 12 days ago
Frontend & DesignAuto-check passed

Works with

Storybook

Questions about Storylite Create Story

What does Storylite Create Story do?

Create StoryLite component stories in consumer projects that use StoryLite public packages, explaining StoryLite's CSF-like story format with examples from single-story files to advanced args…. Storylite Create Story is an agent skill from itsjavi/storylite. Create StoryLite component stories in consumer projects that use StoryLite public packages, explaining StoryLite's CSF-like story format with examples from single-story files to advanced args, argTypes, renderers, parameters, render context, CSS, and web components.

When should I use Storylite Create Story?

Storylite Create Story fits situations like: tasks that involve Design systems.

How do I install Storylite Create Story in Claude Code?

Run `npx skills add itsjavi/storylite --skill storylite-create-story -a claude-code`. Or copy the skill folder (skills/storylite-create-story in itsjavi/storylite) into .claude/skills/storylite-create-story in your project. Claude Code loads it when a task matches its description.

How do I install Storylite Create Story in Codex?

Run `npx skills add itsjavi/storylite --skill storylite-create-story -a codex`. Or copy the skill folder (skills/storylite-create-story in itsjavi/storylite) into .agents/skills/storylite-create-story in your project. Codex loads it when a task matches its description.

Can I use Storylite Create Story in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add itsjavi/storylite --skill storylite-create-story -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/storylite-create-story, .gemini/skills/storylite-create-story, .github/skills/storylite-create-story and .opencode/skills/storylite-create-story in your project.

What does Storylite Create Story need to run?

SKILL.md names no scripts, command-line tools or credentials: Storylite Create Story is instructions for the agent only.

Does Storylite Create Story access the network?

SKILL.md names 1 domain. In commands or code: context7.com; the agent is likely to contact it when it follows the instructions. This is read from the text; nothing was executed.

Is Storylite Create Story safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Storylite Create Story use?

Storylite Create Story is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Storylite Create Story use?

About 1.4k tokens (SKILL.md is roughly 5.6k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 2.3k tokens, read only when the agent opens those files.

What are the alternatives to Storylite Create Story?

Skills that share tags, products or a category with Storylite Create Story: Run Umbraco UI (umbraco/Umbraco.UI, 152 stars), Wonder Blocks (Khan/wonder-blocks, 163 stars), Daleui (DaleStudy/daleui, 119 stars) and Storybook (Khan/wonder-blocks, 163 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Storylite Create Story?

itsjavi (a GitHub user) maintains it in itsjavi/storylite, which has 143 GitHub stars. The repository was last updated on September 24, 2026.

Source: itsjavi/storylite on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.

Install Storylite Create Story

Facts

At a glance

What it does

When your agent uses it

Example prompts

Workflow steps

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

StoryLite Create Story

Public Documentation

Workflow

StoryLite CSF-Like Format

Reference Examples

Files

Compare with similar skills

Similar skills

Run Umbraco UI

Wonder Blocks

Daleui

Storybook

Dx Insight Usage Guardrail

Storybook Story

Related

Questions about Storylite Create Story