[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6FWH49541CVRJGNHRB958DC":3,"skill-same:01M6FWH49541CVRJGNHRB958DC":82},{"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":24,"linkOnly":25,"markdownContent":26,"markdownBody":27,"frontMatter":28,"refName":29,"commitSha":30,"skillDirectory":31,"forksCount":32,"repositoryHtmlUrl":33,"repositoryHomepageUrl":6,"ownerHtmlUrl":34,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":35,"install":36,"resources":49},"01M6FWH49541CVRJGNHRB958DC","dark-mode",null,"Add dark mode support to components using AI. Use when building theme toggles or retrofitting dark mode.","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\u002Fdark-mode\u002FSKILL.md",[],[18,19,20,21,22,23],"dark mode","support","components","use","add","theme","2026-11-10 10:12:30",false,"---\nname: dark-mode\ndescription: Add dark mode support to components using AI. Use when building theme toggles or retrofitting dark mode.\n---\n\n# Dark Mode Generator\n\nTired of manually writing dark mode variants? This tool scans your components and generates the CSS or Tailwind classes you need. Point it at a file, get dark mode support back. No overthinking required.\n\n**One command. Zero config. Just works.**\n\n## Quick Start\n\n```bash\nnpx ai-dark-mode .\u002Fsrc\u002Fcomponents\u002FButton.tsx\n```\n\n## What It Does\n\n- Analyzes your component's existing styles and color usage\n- Generates matching dark mode variants that actually look good\n- Works with plain CSS, Tailwind, or CSS-in-JS\n- Outputs clean, copy-paste ready code\n- Respects your existing design system colors\n\n## Usage Examples\n\n```bash\n# Generate dark mode for a single component\nnpx ai-dark-mode .\u002Fsrc\u002Fcomponents\u002FCard.tsx\n\n# Process an entire directory\nnpx ai-dark-mode .\u002Fsrc\u002Fcomponents\u002F --recursive\n\n# Output Tailwind dark: classes\nnpx ai-dark-mode .\u002Fsrc\u002FButton.tsx --format tailwind\n\n# Generate CSS custom properties\nnpx ai-dark-mode .\u002Fsrc\u002Fstyles\u002Fmain.css --format css-vars\n```\n\n## Best Practices\n\n- **Start with your design tokens** - If you have a color palette defined, the AI will reference it for consistent results\n- **Review contrast ratios** - The tool tries to maintain readability but always double check accessibility\n- **Test in both modes** - Generated styles are smart but not perfect. Toggle between modes to catch edge cases\n- **Keep backgrounds in mind** - Dark mode isn't just inverting colors. Think about elevation and depth\n\n## When to Use This\n\n- You inherited a codebase with no dark mode and need to add it fast\n- Building a new component and want dark variants from the start\n- Converting a design system to support theme switching\n- Quick prototyping where you want both modes without manual work\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-dark-mode --help\n```\n\n## How It Works\n\nThe tool parses your component file, extracts color values and style definitions, then uses AI to generate semantically appropriate dark mode alternatives. It understands that light backgrounds become dark, text colors flip for contrast, and subtle grays need careful adjustment.\n\n## License\n\nMIT. Free forever. Use it however you want.\n","# Dark Mode Generator\n\nTired of manually writing dark mode variants? This tool scans your components and generates the CSS or Tailwind classes you need. Point it at a file, get dark mode support back. No overthinking required.\n\n**One command. Zero config. Just works.**\n\n## Quick Start\n\n```bash\nnpx ai-dark-mode .\u002Fsrc\u002Fcomponents\u002FButton.tsx\n```\n\n## What It Does\n\n- Analyzes your component's existing styles and color usage\n- Generates matching dark mode variants that actually look good\n- Works with plain CSS, Tailwind, or CSS-in-JS\n- Outputs clean, copy-paste ready code\n- Respects your existing design system colors\n\n## Usage Examples\n\n```bash\n# Generate dark mode for a single component\nnpx ai-dark-mode .\u002Fsrc\u002Fcomponents\u002FCard.tsx\n\n# Process an entire directory\nnpx ai-dark-mode .\u002Fsrc\u002Fcomponents\u002F --recursive\n\n# Output Tailwind dark: classes\nnpx ai-dark-mode .\u002Fsrc\u002FButton.tsx --format tailwind\n\n# Generate CSS custom properties\nnpx ai-dark-mode .\u002Fsrc\u002Fstyles\u002Fmain.css --format css-vars\n```\n\n## Best Practices\n\n- **Start with your design tokens** - If you have a color palette defined, the AI will reference it for consistent results\n- **Review contrast ratios** - The tool tries to maintain readability but always double check accessibility\n- **Test in both modes** - Generated styles are smart but not perfect. Toggle between modes to catch edge cases\n- **Keep backgrounds in mind** - Dark mode isn't just inverting colors. Think about elevation and depth\n\n## When to Use This\n\n- You inherited a codebase with no dark mode and need to add it fast\n- Building a new component and want dark variants from the start\n- Converting a design system to support theme switching\n- Quick prototyping where you want both modes without manual work\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-dark-mode --help\n```\n\n## How It Works\n\nThe tool parses your component file, extracts color values and style definitions, then uses AI to generate semantically appropriate dark mode alternatives. It understands that light backgrounds become dark, text colors flip for contrast, and subtle grays need careful adjustment.\n\n## License\n\nMIT. Free forever. Use it however you want.\n",{"name":5,"description":7},"main","e7e336ac628c3e3bd771aff1aaa469c93778f94a","skills\u002Flxgicstudios\u002Fdark-mode",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":37,"prompt":47,"zipAvailable":48},[38,41,44],{"tool":39,"command":40},"npx","npx skills add kbarbel640-del\u002Fskills --skill dark-mode",{"tool":42,"command":43},"bunx","bunx skills add kbarbel640-del\u002Fskills --skill dark-mode",{"tool":45,"command":46},"pnpm","pnpm dlx skills add kbarbel640-del\u002Fskills --skill dark-mode","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fkbarbel640-del\u002Fskills\u002Fblob\u002Fmain\u002Fskills\u002Flxgicstudios\u002Fdark-mode\u002FSKILL.md",true,[50,56,60,64,68,74,78],{"path":51,"resourceType":52,"resourceTypeDesc":53,"sizeBytes":54,"sourceHtmlUrl":55},"_meta.json","REFERENCE","参考文档",286,"https:\u002F\u002Fgithub.com\u002Fkbarbel640-del\u002Fskills\u002Fblob\u002Fmain\u002Fskills\u002Flxgicstudios\u002Fdark-mode\u002F_meta.json",{"path":57,"resourceType":52,"resourceTypeDesc":53,"sizeBytes":58,"sourceHtmlUrl":59},"package-lock.json",47281,"https:\u002F\u002Fgithub.com\u002Fkbarbel640-del\u002Fskills\u002Fblob\u002Fmain\u002Fskills\u002Flxgicstudios\u002Fdark-mode\u002Fpackage-lock.json",{"path":61,"resourceType":52,"resourceTypeDesc":53,"sizeBytes":62,"sourceHtmlUrl":63},"package.json",657,"https:\u002F\u002Fgithub.com\u002Fkbarbel640-del\u002Fskills\u002Fblob\u002Fmain\u002Fskills\u002Flxgicstudios\u002Fdark-mode\u002Fpackage.json",{"path":65,"resourceType":52,"resourceTypeDesc":53,"sizeBytes":66,"sourceHtmlUrl":67},"README.md",604,"https:\u002F\u002Fgithub.com\u002Fkbarbel640-del\u002Fskills\u002Fblob\u002Fmain\u002Fskills\u002Flxgicstudios\u002Fdark-mode\u002FREADME.md",{"path":69,"resourceType":70,"resourceTypeDesc":71,"sizeBytes":72,"sourceHtmlUrl":73},"src\u002Fcli.ts","SCRIPT","脚本",1539,"https:\u002F\u002Fgithub.com\u002Fkbarbel640-del\u002Fskills\u002Fblob\u002Fmain\u002Fskills\u002Flxgicstudios\u002Fdark-mode\u002Fsrc\u002Fcli.ts",{"path":75,"resourceType":70,"resourceTypeDesc":71,"sizeBytes":76,"sourceHtmlUrl":77},"src\u002Findex.ts",1851,"https:\u002F\u002Fgithub.com\u002Fkbarbel640-del\u002Fskills\u002Fblob\u002Fmain\u002Fskills\u002Flxgicstudios\u002Fdark-mode\u002Fsrc\u002Findex.ts",{"path":79,"resourceType":52,"resourceTypeDesc":53,"sizeBytes":80,"sourceHtmlUrl":81},"tsconfig.json",251,"https:\u002F\u002Fgithub.com\u002Fkbarbel640-del\u002Fskills\u002Fblob\u002Fmain\u002Fskills\u002Flxgicstudios\u002Fdark-mode\u002Ftsconfig.json",[83,114,142,163,169,189],{"skillNo":84,"name":85,"nameZh":6,"description":86,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":87,"categories":88,"keywords":94,"publishedAt":24},"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",[89],{"categoryNo":90,"categoryName":91,"taxonomyType":92,"taxonomyTypeDesc":93},"01JBSEEDCAT000000000000036","内容创作者","PROFESSION","适用职业",[95,96,97,98,99,100,101,102,103,104,105,106,107,108,109,110,111,112,113],"crowd prompting","prompting","api","with","tokens","domain","world","prompts","operations","instructions","text","tool","system","improve","productivity","marketplace","https","content","ai agents",{"skillNo":115,"name":116,"nameZh":6,"description":117,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":118,"categories":119,"keywords":125,"publishedAt":24},"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",[120],{"categoryNo":121,"categoryName":122,"taxonomyType":123,"taxonomyTypeDesc":124},"01JBSEEDCAT000000000000023","Skill与智能体开发","SCENARIO","使用场景",[126,97,127,128,129,130,131,132,133,134,135,136,137,138,139,140,141,102,21],"dilemm ai","arena","analyze","browser","openclaw agent","create","automation","browser automation","bot","openclaw","design","strategy","headless","compete","submit","matchmaking",{"skillNo":143,"name":144,"nameZh":6,"description":145,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":146,"categories":147,"keywords":151,"publishedAt":24},"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",[148],{"categoryNo":149,"categoryName":150,"taxonomyType":123,"taxonomyTypeDesc":124},"01JBSEEDCAT000000000000021","资料检索与研究",[152,153,154,155,156,157,158,98,159,140,21,160,97,161,162],"arxiv paper reviews","reviews","arxiv","paper","crawler","papers","comments","fetch","read","http","via",{"skillNo":164,"name":144,"nameZh":6,"description":145,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":165,"categories":166,"keywords":168,"publishedAt":24},"01M6G8HQJ7N7WMY6YV7D7SSJ16","https:\u002F\u002Fgithub.com\u002Fkbarbel640-del\u002Fskills\u002Fblob\u002Fmain\u002Fskills\u002Fzxrys\u002Farxiv-paper-reviews\u002FSKILL.md",[167],{"categoryNo":149,"categoryName":150,"taxonomyType":123,"taxonomyTypeDesc":124},[155,154,153,152,162,157,158,98,156,140,21,159,160,97,161],{"skillNo":170,"name":171,"nameZh":6,"description":172,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":173,"categories":174,"keywords":175,"publishedAt":24},"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",[],[176,177,178,179,180,181,182,183,184,185,186,187,188],"git","summary","git summary","commits","repository","win32","status","linux","contributors","true","quick","get","branches",{"skillNo":190,"name":191,"nameZh":6,"description":192,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":193,"categories":194,"keywords":199,"publishedAt":24},"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",[195,196],{"categoryNo":121,"categoryName":122,"taxonomyType":123,"taxonomyTypeDesc":124},{"categoryNo":197,"categoryName":198,"taxonomyType":92,"taxonomyTypeDesc":93},"01JBSEEDCAT000000000000037","律师与法务",[200,201,202,203,98,204,205,29,206,160,207,208,209,210,211,111,212,213,214],"agent constitution","constitution","contracts","tree","query","base","log","check","Rules","projects","compliance","actions","state","governance","github"]