aibdd-pen-to-storybook
OfficialTurn Pencil .pen into tokens + component candidates
Design & Creative#pencil#component detection#tailwind tokens#pen-to-storybook#storybook planning#adapter skill
AuthorWaterball-Software-Academy
Version1.0.0
Installs0
System Documentation
What problem does it solve?
It converts a frozen Pencil design (.pen) into normalized Tailwind 4 tokens and component candidate tables, so downstream Storybook generation can proceed without guessing.
Core Features & Use Cases
- Read-only .pen adapter: parses Pencil .pen JSON, extracts Tailwind 4 token inputs, and never writes files or scaffolds projects.
- Screen-scoped extraction: selects and processes exactly one top-level screen subtree per run to keep component boundaries clean.
- Heuristic component detection: produces a table of component candidates (with derived props and observed story states) for downstream planning and Storybook authoring.
- Failure-safe dispatch: validates input schema/version and returns structured failure kinds/messages to the caller.
Quick Start
Ask the workflow to run aibdd-pen-to-storybook on your absolute .pen path and a specific screen id to get component_table and Tailwind 4 tokens.
Dependency Matrix
Required Modules
None requiredComponents
references
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: aibdd-pen-to-storybook Download link: https://github.com/Waterball-Software-Academy/aixbdd/archive/main.zip#aibdd-pen-to-storybook Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.