[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6FWFN211YXM4KV2RCVF78HG":3,"skill-same:01M6FWFN211YXM4KV2RCVF78HG":67},{"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":31,"linkOnly":32,"markdownContent":33,"markdownBody":34,"frontMatter":35,"refName":36,"commitSha":37,"skillDirectory":38,"forksCount":39,"repositoryHtmlUrl":40,"repositoryHomepageUrl":6,"ownerHtmlUrl":41,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":42,"install":43,"resources":56},"01M6FWFN211YXM4KV2RCVF78HG","component-gen",null,"Generate React components from plain English descriptions. Use when you need UI components fast.","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\u002Fcomponent-gen\u002FSKILL.md",[],[18,19,20,21,22,23,24,25,26,27,28,29,30],"component","component gen","components","react","react components","generate","ui","fast","use","plain english","english","ui components","you","2026-11-10 10:12:30",false,"---\nname: component-gen\ndescription: Generate React components from plain English descriptions. Use when you need UI components fast.\n---\n\n# Component Gen\n\nStarting a new React component from scratch is tedious. You know what you want, a card with an image, title, and action buttons, but setting up the boilerplate takes longer than it should. This tool takes a plain English description and generates a complete React component. TypeScript, Tailwind, whatever you need.\n\n**One command. Zero config. Just works.**\n\n## Quick Start\n\n```bash\nnpx ai-component \"a pricing card with plan name, price, features list, and CTA button\"\n```\n\n## What It Does\n\n- Generates complete React components from plain English descriptions\n- Optional TypeScript output with proper type annotations\n- Tailwind CSS support with the --tailwind flag\n- Can write directly to a file or print to stdout\n- Produces clean, production-ready component code\n\n## Usage Examples\n\n```bash\n# Generate a basic component\nnpx ai-component \"a pricing card with plan name, price, features list, and CTA button\"\n\n# Generate with TypeScript\nnpx ai-component \"a user profile dropdown with avatar, name, and logout\" -t\n\n# Generate with Tailwind and save to file\nnpx ai-component \"a responsive navbar with logo, links, and mobile menu\" --tailwind -o Navbar.tsx\n```\n\n## Best Practices\n\n- **Be descriptive about layout** - The more specific you are about positioning and styling, the better the component looks\n- **Use TypeScript for real projects** - The -t flag gives you proper types and interfaces\n- **Pair with Tailwind** - The --tailwind flag produces much cleaner markup than inline styles\n- **Iterate on the output** - Generate the base component, then tweak it. Faster than writing from scratch.\n\n## When to Use This\n\n- Prototyping a new feature and need a quick component skeleton\n- Building a design system and want consistent starting points\n- Learning React patterns by seeing how components should be structured\n- Hackathons and MVPs where speed matters more than perfection\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-component --help\n```\n\n## How It Works\n\nThe tool takes your description and sends it to an AI model that understands React patterns and component architecture. It generates a complete, functional component with proper structure, styling, and any requested features.\n\n## License\n\nMIT. Free forever. Use it however you want.","# Component Gen\n\nStarting a new React component from scratch is tedious. You know what you want, a card with an image, title, and action buttons, but setting up the boilerplate takes longer than it should. This tool takes a plain English description and generates a complete React component. TypeScript, Tailwind, whatever you need.\n\n**One command. Zero config. Just works.**\n\n## Quick Start\n\n```bash\nnpx ai-component \"a pricing card with plan name, price, features list, and CTA button\"\n```\n\n## What It Does\n\n- Generates complete React components from plain English descriptions\n- Optional TypeScript output with proper type annotations\n- Tailwind CSS support with the --tailwind flag\n- Can write directly to a file or print to stdout\n- Produces clean, production-ready component code\n\n## Usage Examples\n\n```bash\n# Generate a basic component\nnpx ai-component \"a pricing card with plan name, price, features list, and CTA button\"\n\n# Generate with TypeScript\nnpx ai-component \"a user profile dropdown with avatar, name, and logout\" -t\n\n# Generate with Tailwind and save to file\nnpx ai-component \"a responsive navbar with logo, links, and mobile menu\" --tailwind -o Navbar.tsx\n```\n\n## Best Practices\n\n- **Be descriptive about layout** - The more specific you are about positioning and styling, the better the component looks\n- **Use TypeScript for real projects** - The -t flag gives you proper types and interfaces\n- **Pair with Tailwind** - The --tailwind flag produces much cleaner markup than inline styles\n- **Iterate on the output** - Generate the base component, then tweak it. Faster than writing from scratch.\n\n## When to Use This\n\n- Prototyping a new feature and need a quick component skeleton\n- Building a design system and want consistent starting points\n- Learning React patterns by seeing how components should be structured\n- Hackathons and MVPs where speed matters more than perfection\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-component --help\n```\n\n## How It Works\n\nThe tool takes your description and sends it to an AI model that understands React patterns and component architecture. It generates a complete, functional component with proper structure, styling, and any requested features.\n\n## License\n\nMIT. Free forever. Use it however you want.",{"name":5,"description":7},"main","e7e336ac628c3e3bd771aff1aaa469c93778f94a","skills\u002Flxgicstudios\u002Fcomponent-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":44,"prompt":54,"zipAvailable":55},[45,48,51],{"tool":46,"command":47},"npx","npx skills add kbarbel640-del\u002Fskills --skill component-gen",{"tool":49,"command":50},"bunx","bunx skills add kbarbel640-del\u002Fskills --skill component-gen",{"tool":52,"command":53},"pnpm","pnpm dlx skills add kbarbel640-del\u002Fskills --skill component-gen","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fkbarbel640-del\u002Fskills\u002Fblob\u002Fmain\u002Fskills\u002Flxgicstudios\u002Fcomponent-gen\u002FSKILL.md",true,[57,63],{"path":58,"resourceType":59,"resourceTypeDesc":60,"sizeBytes":61,"sourceHtmlUrl":62},"_meta.json","REFERENCE","参考文档",284,"https:\u002F\u002Fgithub.com\u002Fkbarbel640-del\u002Fskills\u002Fblob\u002Fmain\u002Fskills\u002Flxgicstudios\u002Fcomponent-gen\u002F_meta.json",{"path":64,"resourceType":59,"resourceTypeDesc":60,"sizeBytes":65,"sourceHtmlUrl":66},"README.md",291,"https:\u002F\u002Fgithub.com\u002Fkbarbel640-del\u002Fskills\u002Fblob\u002Fmain\u002Fskills\u002Flxgicstudios\u002Fcomponent-gen\u002FREADME.md",[68,99,127,148,154,174],{"skillNo":69,"name":70,"nameZh":6,"description":71,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":72,"categories":73,"keywords":79,"publishedAt":31},"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",[74],{"categoryNo":75,"categoryName":76,"taxonomyType":77,"taxonomyTypeDesc":78},"01JBSEEDCAT000000000000036","内容创作者","PROFESSION","适用职业",[80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98],"crowd prompting","prompting","api","with","tokens","domain","world","prompts","operations","instructions","text","tool","system","improve","productivity","marketplace","https","content","ai agents",{"skillNo":100,"name":101,"nameZh":6,"description":102,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":103,"categories":104,"keywords":110,"publishedAt":31},"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",[105],{"categoryNo":106,"categoryName":107,"taxonomyType":108,"taxonomyTypeDesc":109},"01JBSEEDCAT000000000000023","Skill与智能体开发","SCENARIO","使用场景",[111,82,112,113,114,115,116,117,118,119,120,121,122,123,124,125,126,87,26],"dilemm ai","arena","analyze","browser","openclaw agent","create","automation","browser automation","bot","openclaw","design","strategy","headless","compete","submit","matchmaking",{"skillNo":128,"name":129,"nameZh":6,"description":130,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":131,"categories":132,"keywords":136,"publishedAt":31},"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",[133],{"categoryNo":134,"categoryName":135,"taxonomyType":108,"taxonomyTypeDesc":109},"01JBSEEDCAT000000000000021","资料检索与研究",[137,138,139,140,141,142,143,83,144,125,26,145,82,146,147],"arxiv paper reviews","reviews","arxiv","paper","crawler","papers","comments","fetch","read","http","via",{"skillNo":149,"name":129,"nameZh":6,"description":130,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":150,"categories":151,"keywords":153,"publishedAt":31},"01M6G8HQJ7N7WMY6YV7D7SSJ16","https:\u002F\u002Fgithub.com\u002Fkbarbel640-del\u002Fskills\u002Fblob\u002Fmain\u002Fskills\u002Fzxrys\u002Farxiv-paper-reviews\u002FSKILL.md",[152],{"categoryNo":134,"categoryName":135,"taxonomyType":108,"taxonomyTypeDesc":109},[140,139,138,137,147,142,143,83,141,125,26,144,145,82,146],{"skillNo":155,"name":156,"nameZh":6,"description":157,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":158,"categories":159,"keywords":160,"publishedAt":31},"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",[],[161,162,163,164,165,166,167,168,169,170,171,172,173],"git","summary","git summary","commits","repository","win32","status","linux","contributors","true","quick","get","branches",{"skillNo":175,"name":176,"nameZh":6,"description":177,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":178,"categories":179,"keywords":184,"publishedAt":31},"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",[180,181],{"categoryNo":106,"categoryName":107,"taxonomyType":108,"taxonomyTypeDesc":109},{"categoryNo":182,"categoryName":183,"taxonomyType":77,"taxonomyTypeDesc":78},"01JBSEEDCAT000000000000037","律师与法务",[185,186,187,188,83,189,190,36,191,145,192,193,194,195,196,96,197,198,199],"agent constitution","constitution","contracts","tree","query","base","log","check","Rules","projects","compliance","actions","state","governance","github"]