generate-story

Generates Angular Storybook documentation stories with categorized argTypes for Lucca Front components.

52|7|Updated Apr 12, 2017
One-click install
npx skills add https://github.com/LuccaSA/lucca-front --skill generate-story-luccasa
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: generate-story
Source: https://github.com/LuccaSA/lucca-front/tree/main/.claude/skills/generate-story
Command: npx skills add https://github.com/LuccaSA/lucca-front --skill generate-story-luccasa

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Writing Storybook documentation stories for Lucca Front Angular components requires following strict conventions: categorized argTypes, exported union constants, multi-component templates, and French descriptions. This Skill automates that process so generated stories are consistent, reviewable, and copy-paste ready. ## Core Features & Use Cases - Interface contract analysis: Reads the component's inputs, outputs, models, and exported union constants from packages/ng or packages/prisme before writing the story. - Convention-compliant argTypes: Applies the mandatory table.category taxonomy (inputs, outputs, models, suffixed host categories, story), dependent controls with ↳ prefixes and if conditions, and shared argTypes like PaletteArgType. - Canonical story structure: Produces the standard file layout with moduleMetadata, generateInputs, cleanupTemplate, useStoryModel for two-way bindings, and verification steps (prettier, eslint, Storybook Controls, Actions, a11y). - Use Case: Ask for a Basic documentation story for lu-text-input hosted in lu-form-field, and receive a complete .stories.ts file with categorized controls, French descriptions, and a working ngModel binding. ## Quick Start Generate a Basic Angular documentation story for the Box component under stories/documentation/structure with categorized argTypes and default args.

Frequently Asked Questions about generate-story

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

FAQPage Schema
How do I write a Storybook story for an Angular component with argTypes?▼

Define argTypes on the meta with a table.category for each control, then use generateInputs(args, argTypes) in the render template so attributes are emitted automatically. Each named export only carries its args, and the title mirrors the file path under stories/documentation.

How do I categorize Storybook controls for multiple Angular components in one story?▼

The main component keeps bare inputs, outputs, and models categories, while secondary host components use suffixed categories like inputs (form-field). Destructure args per host and call generateInputs once per component in the template.

How do I hide a Storybook control until another control is enabled?▼

Add an if condition such as if: { arg: 'heading', truthy: true } and prefix the control label with ↳ using the name property. Declare the dependent argType immediately after its parent so the Controls panel order reflects the hierarchy.

Does generateInputs emit outputs and models in the template?▼

No, generateInputs only emits args whose category starts with inputs. Outputs must be wired manually with handler functions in props, and models are bound through useStoryModel with ngModel in the template.

When should I not use this documentation story generator?▼

Do not use it for QA table stories under stories/qa, which belong to the generate-story-qa skill, or for play-function interaction tests, which belong to generate-e2e-test. Pure html&css variants without argTypes are also out of scope.