[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6FWWM7CFSPM43P7NWB7G6ZP":3,"skill-same:01M6FWWM7CFSPM43P7NWB7G6ZP":87},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":15,"categories":16,"keywords":17,"publishedAt":29,"linkOnly":30,"markdownContent":31,"markdownBody":32,"frontMatter":33,"refName":34,"commitSha":35,"skillDirectory":36,"forksCount":37,"repositoryHtmlUrl":38,"repositoryHomepageUrl":6,"ownerHtmlUrl":39,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":40,"install":41,"resources":54},"01M6FWWM7CFSPM43P7NWB7G6ZP","storybook-gen",null,"Generate Storybook stories from React components. Use when documenting components or setting up a design system.","kbarbel640-del\u002Fskills","kbarbel640-del","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F255315490?v=4","01M6CJPPQGCCESXMG3K7BBGQ5J","01M6CJPPX2PB2BCZERFVM2C2B3",1,"MIT","https:\u002F\u002Fgithub.com\u002Fkbarbel640-del\u002Fskills\u002Fblob\u002Fmain\u002Fskills\u002Flxgicstudios\u002Fstorybook-gen\u002FSKILL.md",[],[18,19,20,21,22,23,24,25,26,27,28],"storybook","storybook gen","design","components","react","react components","design system","generate","system","use","up","2026-11-10 10:12:30",false,"---\nname: storybook-gen\ndescription: Generate Storybook stories from React components. Use when documenting components or setting up a design system.\n---\n\n# Storybook Generator\n\nPoint it at a React component. Get back complete Storybook stories with all the variants, controls, and edge cases. No more writing boilerplate stories by hand.\n\n**One command. Zero config. Just works.**\n\n## Quick Start\n\n```bash\nnpx ai-storybook .\u002Fsrc\u002Fcomponents\u002FButton.tsx\n```\n\n## What It Does\n\n- Analyzes component props and generates appropriate controls\n- Creates stories for common states (default, disabled, loading, error)\n- Handles complex prop types including objects and callbacks\n- Generates proper TypeScript types for story args\n- Includes realistic example data, not just placeholder text\n\n## Usage Examples\n\n```bash\n# Generate stories for a single component\nnpx ai-storybook .\u002Fsrc\u002Fcomponents\u002FCard.tsx\n\n# Process entire components directory\nnpx ai-storybook .\u002Fsrc\u002Fcomponents\u002F --recursive\n\n# Output CSF3 format\nnpx ai-storybook .\u002Fsrc\u002FButton.tsx --format csf3\n\n# Include interaction tests\nnpx ai-storybook .\u002Fsrc\u002FModal.tsx --with-interactions\n\n# Specify output directory\nnpx ai-storybook .\u002Fsrc\u002FInput.tsx -o .\u002Fstories\u002F\n```\n\n## Best Practices\n\n- **Write good prop types first** - Better TypeScript types mean better generated stories\n- **Include JSDoc comments** - The AI uses your documentation to create meaningful descriptions\n- **Generate, then customize** - Use this for the boilerplate, add your specific edge cases manually\n- **Keep components focused** - Components with clear, single responsibilities generate cleaner stories\n\n## When to Use This\n\n- Setting up Storybook for an existing codebase\n- Adding a new component and need stories fast\n- Documenting a component library for your team\n- Creating a design system with consistent story patterns\n\n## Part of the LXGIC Dev Toolkit\n\nThis is one of 110+ free developer tools built by LXGIC Studios. No paywalls, no sign-ups, no API keys on free tiers. Just tools that work.\n\n**Find more:**\n- GitHub: https:\u002F\u002Fgithub.com\u002FLXGIC-Studios\n- Twitter: https:\u002F\u002Fx.com\u002Flxgicstudios\n- Substack: https:\u002F\u002Flxgicstudios.substack.com\n- Website: https:\u002F\u002Flxgic.dev\n\n## Requirements\n\nNo install needed. Just run with npx. Node.js 18+ recommended.\n\n```bash\nnpx ai-storybook --help\n```\n\n## How It Works\n\nThe tool parses your React component to extract prop types, default values, and component structure. It then generates Storybook stories that exercise each prop combination, creating meaningful examples based on the prop names and types.\n\n## License\n\nMIT. Free forever. Use it however you want.\n","# Storybook Generator\n\nPoint it at a React component. Get back complete Storybook stories with all the variants, controls, and edge cases. No more writing boilerplate stories by hand.\n\n**One command. Zero config. Just works.**\n\n## Quick Start\n\n```bash\nnpx ai-storybook .\u002Fsrc\u002Fcomponents\u002FButton.tsx\n```\n\n## What It Does\n\n- Analyzes component props and generates appropriate controls\n- Creates stories for common states (default, disabled, loading, error)\n- Handles complex prop types including objects and callbacks\n- Generates proper TypeScript types for story args\n- Includes realistic example data, not just placeholder text\n\n## Usage Examples\n\n```bash\n# Generate stories for a single component\nnpx ai-storybook .\u002Fsrc\u002Fcomponents\u002FCard.tsx\n\n# Process entire components directory\nnpx ai-storybook .\u002Fsrc\u002Fcomponents\u002F --recursive\n\n# Output CSF3 format\nnpx ai-storybook .\u002Fsrc\u002FButton.tsx --format csf3\n\n# Include interaction tests\nnpx ai-storybook .\u002Fsrc\u002FModal.tsx --with-interactions\n\n# Specify output directory\nnpx ai-storybook .\u002Fsrc\u002FInput.tsx -o .\u002Fstories\u002F\n```\n\n## Best Practices\n\n- **Write good prop types first** - Better TypeScript types mean better generated stories\n- **Include JSDoc comments** - The AI uses your documentation to create meaningful descriptions\n- **Generate, then customize** - Use this for the boilerplate, add your specific edge cases manually\n- **Keep components focused** - Components with clear, single responsibilities generate cleaner stories\n\n## When to Use This\n\n- Setting up Storybook for an existing codebase\n- Adding a new component and need stories fast\n- Documenting a component library for your team\n- Creating a design system with consistent story patterns\n\n## Part of the LXGIC Dev Toolkit\n\nThis is one of 110+ free developer tools built by LXGIC Studios. No paywalls, no sign-ups, no API keys on free tiers. Just tools that work.\n\n**Find more:**\n- GitHub: https:\u002F\u002Fgithub.com\u002FLXGIC-Studios\n- Twitter: https:\u002F\u002Fx.com\u002Flxgicstudios\n- Substack: https:\u002F\u002Flxgicstudios.substack.com\n- Website: https:\u002F\u002Flxgic.dev\n\n## Requirements\n\nNo install needed. Just run with npx. Node.js 18+ recommended.\n\n```bash\nnpx ai-storybook --help\n```\n\n## How It Works\n\nThe tool parses your React component to extract prop types, default values, and component structure. It then generates Storybook stories that exercise each prop combination, creating meaningful examples based on the prop names and types.\n\n## License\n\nMIT. Free forever. Use it however you want.\n",{"name":5,"description":7},"main","e7e336ac628c3e3bd771aff1aaa469c93778f94a","skills\u002Flxgicstudios\u002Fstorybook-gen",0,"https:\u002F\u002Fgithub.com\u002Fkbarbel640-del\u002Fskills","https:\u002F\u002Fgithub.com\u002Fkbarbel640-del","2026-08-23 22:39:37",{"source":8,"skillName":5,"commands":42,"prompt":52,"zipAvailable":53},[43,46,49],{"tool":44,"command":45},"npx","npx skills add kbarbel640-del\u002Fskills --skill storybook-gen",{"tool":47,"command":48},"bunx","bunx skills add kbarbel640-del\u002Fskills --skill storybook-gen",{"tool":50,"command":51},"pnpm","pnpm dlx skills add kbarbel640-del\u002Fskills --skill storybook-gen","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fkbarbel640-del\u002Fskills\u002Fblob\u002Fmain\u002Fskills\u002Flxgicstudios\u002Fstorybook-gen\u002FSKILL.md",true,[55,61,65,69,73,79,83],{"path":56,"resourceType":57,"resourceTypeDesc":58,"sizeBytes":59,"sourceHtmlUrl":60},"_meta.json","REFERENCE","参考文档",290,"https:\u002F\u002Fgithub.com\u002Fkbarbel640-del\u002Fskills\u002Fblob\u002Fmain\u002Fskills\u002Flxgicstudios\u002Fstorybook-gen\u002F_meta.json",{"path":62,"resourceType":57,"resourceTypeDesc":58,"sizeBytes":63,"sourceHtmlUrl":64},"package-lock.json",30915,"https:\u002F\u002Fgithub.com\u002Fkbarbel640-del\u002Fskills\u002Fblob\u002Fmain\u002Fskills\u002Flxgicstudios\u002Fstorybook-gen\u002Fpackage-lock.json",{"path":66,"resourceType":57,"resourceTypeDesc":58,"sizeBytes":67,"sourceHtmlUrl":68},"package.json",598,"https:\u002F\u002Fgithub.com\u002Fkbarbel640-del\u002Fskills\u002Fblob\u002Fmain\u002Fskills\u002Flxgicstudios\u002Fstorybook-gen\u002Fpackage.json",{"path":70,"resourceType":57,"resourceTypeDesc":58,"sizeBytes":71,"sourceHtmlUrl":72},"README.md",282,"https:\u002F\u002Fgithub.com\u002Fkbarbel640-del\u002Fskills\u002Fblob\u002Fmain\u002Fskills\u002Flxgicstudios\u002Fstorybook-gen\u002FREADME.md",{"path":74,"resourceType":75,"resourceTypeDesc":76,"sizeBytes":77,"sourceHtmlUrl":78},"src\u002Fcli.ts","SCRIPT","脚本",656,"https:\u002F\u002Fgithub.com\u002Fkbarbel640-del\u002Fskills\u002Fblob\u002Fmain\u002Fskills\u002Flxgicstudios\u002Fstorybook-gen\u002Fsrc\u002Fcli.ts",{"path":80,"resourceType":75,"resourceTypeDesc":76,"sizeBytes":81,"sourceHtmlUrl":82},"src\u002Findex.ts",896,"https:\u002F\u002Fgithub.com\u002Fkbarbel640-del\u002Fskills\u002Fblob\u002Fmain\u002Fskills\u002Flxgicstudios\u002Fstorybook-gen\u002Fsrc\u002Findex.ts",{"path":84,"resourceType":57,"resourceTypeDesc":58,"sizeBytes":85,"sourceHtmlUrl":86},"tsconfig.json",251,"https:\u002F\u002Fgithub.com\u002Fkbarbel640-del\u002Fskills\u002Fblob\u002Fmain\u002Fskills\u002Flxgicstudios\u002Fstorybook-gen\u002Ftsconfig.json",[88,118,145,166,172,192],{"skillNo":89,"name":90,"nameZh":6,"description":91,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":92,"categories":93,"keywords":99,"publishedAt":29},"01M6G8J55967D6281ACMKAKTEQ","crowd-prompting","A marketplace where AI agents improve prompts, system instructions, tool descriptions, and other text-based content with domain expertise from real-world operations — and earn tokens for valuable contributions.","https:\u002F\u002Fgithub.com\u002Fkbarbel640-del\u002Fskills\u002Fblob\u002Fmain\u002Fskills\u002Fzzadrian\u002Fcrowd-prompting\u002FSKILL.md",[94],{"categoryNo":95,"categoryName":96,"taxonomyType":97,"taxonomyTypeDesc":98},"01JBSEEDCAT000000000000036","内容创作者","PROFESSION","适用职业",[100,101,102,103,104,105,106,107,108,109,110,111,26,112,113,114,115,116,117],"crowd prompting","prompting","api","with","tokens","domain","world","prompts","operations","instructions","text","tool","improve","productivity","marketplace","https","content","ai agents",{"skillNo":119,"name":120,"nameZh":6,"description":121,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":122,"categories":123,"keywords":129,"publishedAt":29},"01M6G8J0PKPAYVET6BWE8W4C26","dilemm-ai","Compete in DilemmAI, the prisoner's dilemma AI arena at dilemm.ai. Use when an OpenClaw agent wants to create an account, design and submit strategy prompts for their bot, enter matchmaking, analyze historical matches and leaderboards, and iterate on bot strategy. Requires headless browser automation (no API available yet).","https:\u002F\u002Fgithub.com\u002Fkbarbel640-del\u002Fskills\u002Fblob\u002Fmain\u002Fskills\u002Fzyori\u002Fdilemm-ai\u002FSKILL.md",[124],{"categoryNo":125,"categoryName":126,"taxonomyType":127,"taxonomyTypeDesc":128},"01JBSEEDCAT000000000000023","Skill与智能体开发","SCENARIO","使用场景",[130,102,131,132,133,134,135,136,137,138,139,20,140,141,142,143,144,107,27],"dilemm ai","arena","analyze","browser","openclaw agent","create","automation","browser automation","bot","openclaw","strategy","headless","compete","submit","matchmaking",{"skillNo":146,"name":147,"nameZh":6,"description":148,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":149,"categories":150,"keywords":154,"publishedAt":29},"01M6G8HWAF3K9SW7NP3Z83CPJ6","arxiv-paper-reviews","Interact with arXiv Crawler API to fetch papers, read reviews, and submit comments. Use when working with arXiv papers, fetching paper lists by date\u002Fcategory\u002Finterest, viewing paper details with comments, or submitting paper reviews via API at http:\u002F\u002F150.158.152.82:8000.","https:\u002F\u002Fgithub.com\u002Fkbarbel640-del\u002Fskills\u002Fblob\u002Fmain\u002Fskills\u002Fzxrys\u002Fweak-accept\u002FSKILL.md",[151],{"categoryNo":152,"categoryName":153,"taxonomyType":127,"taxonomyTypeDesc":128},"01JBSEEDCAT000000000000021","资料检索与研究",[155,156,157,158,159,160,161,103,162,143,27,163,102,164,165],"arxiv paper reviews","reviews","arxiv","paper","crawler","papers","comments","fetch","read","http","via",{"skillNo":167,"name":147,"nameZh":6,"description":148,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":168,"categories":169,"keywords":171,"publishedAt":29},"01M6G8HQJ7N7WMY6YV7D7SSJ16","https:\u002F\u002Fgithub.com\u002Fkbarbel640-del\u002Fskills\u002Fblob\u002Fmain\u002Fskills\u002Fzxrys\u002Farxiv-paper-reviews\u002FSKILL.md",[170],{"categoryNo":152,"categoryName":153,"taxonomyType":127,"taxonomyTypeDesc":128},[158,157,156,155,165,160,161,103,159,143,27,162,163,102,164],{"skillNo":173,"name":174,"nameZh":6,"description":175,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":176,"categories":177,"keywords":178,"publishedAt":29},"01M6G8HM95Y64JNVFC2HN4E2BG","git-summary","Get a quick summary of the current Git repository including status, recent commits, branches, and contributors.","https:\u002F\u002Fgithub.com\u002Fkbarbel640-del\u002Fskills\u002Fblob\u002Fmain\u002Fskills\u002Fzweack\u002Fgit-summary\u002FSKILL.md",[],[179,180,181,182,183,184,185,186,187,188,189,190,191],"git","summary","git summary","commits","repository","win32","status","linux","contributors","true","quick","get","branches",{"skillNo":193,"name":194,"nameZh":6,"description":195,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":196,"categories":197,"keywords":202,"publishedAt":29},"01M6G8HGEGF05CNEJCGVYFSC4R","agent-constitution","Interact with AgentConstitution governance contracts on Base Sepolia. Check compliance, read rules, log actions, query governance state.","https:\u002F\u002Fgithub.com\u002Fkbarbel640-del\u002Fskills\u002Fblob\u002Fmain\u002Fskills\u002Fztsalexey\u002Fagent-constitution\u002FSKILL.md",[198,199],{"categoryNo":125,"categoryName":126,"taxonomyType":127,"taxonomyTypeDesc":128},{"categoryNo":200,"categoryName":201,"taxonomyType":97,"taxonomyTypeDesc":98},"01JBSEEDCAT000000000000037","律师与法务",[203,204,205,206,103,207,208,34,209,163,210,211,212,213,214,115,215,216,217],"agent constitution","constitution","contracts","tree","query","base","log","check","Rules","projects","compliance","actions","state","governance","github"]