skills.rest
TechsioCZ
TechsioCZOFFICIAL
Explore all skills by this author →
GitHub

storybook-authoring

Author Storybook CSF3 stories for @techsio/ui-kit components with consistent patterns.

2|Updated Dec 2, 2024
Search Tags:#react#storybook#authoring#csf3#playground#ui-kit#component-stories
One-click install
npx skills add https://github.com/TechsioCZ/new-engine --skill storybook-authoring
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: storybook-authoring
Source: https://github.com/TechsioCZ/new-engine/tree/main/libs/ui/skills/storybook-authoring
Command: npx skills add https://github.com/TechsioCZ/new-engine --skill storybook-authoring

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Streamlines authoring and maintenance of Storybook CSF3 stories for UI-kit components, ensuring consistent examples, live playgrounds, and clear documentation.

Core Features & Use Cases

  • Supports Playground stories, argTypes controls, VariantContainer, VariantGroup matrices, and token-based story layouts.
  • Encourages using UI-kit components in stories instead of primitives, with clear patterns for states and variants.
  • Facilitates rapid iteration and onboarding for design and engineering teams.

Quick Start

Create a new story file under libs/ui/stories for your component and export a default Meta with a Playground story, then use VariantContainer and VariantGroup to cover common states.

Frequently Asked Questions about storybook-authoring

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I write Storybook CSF3 stories for a React UI-kit component?▼

Use VariantContainer and VariantGroup matrices within your Playground stories to systematically document and display all component states and variants in your Storybook CSF3 files.

What is the best way to organize Storybook component stories for consistent examples?▼

The best way to organize Storybook component stories is by applying token-based story layouts and using UI-kit components instead of primitives to ensure consistent examples and clear documentation across your design system.

Do I need to use argTypes controls when authoring Storybook Playground stories?▼

Yes, you should use argTypes controls when authoring Playground stories to enable interactive property editing, allowing engineering and design teams to rapidly iterate on UI-kit component behaviors directly in Storybook.

Can I use this Storybook authoring pattern for components outside of libs/ui?▼

No, this specific Storybook authoring pattern applies to libs/ui where components are documented via Playground stories, argTypes controls, VariantContainer, VariantGroup, and token-based layout for the @techsio/ui-kit ecosystem.

Related Skills

Explore More Software Engineering Skills→
wredziowredzio

storybook-story-writing

Write CSF3 stories for React components with TypeScript.

Community
Basic
leocaseiroleocaseiro
2

write-storybook

Enforce the single-Playground pattern for React component stories in Storybook.

Community
Advanced
PMDevSolutionsPMDevSolutions
7

storybook-story-generation

Generate CSF3 Storybook stories and MDX autodocs from React component source.

Official
Advanced
TheBushidoCollectiveTheBushidoCollective
187

storybook-story-writing

Create CSF3 Storybook stories with TypeScript-typed Meta and StoryObj.

Official
Intermediate