{"id":32710582,"url":"https://github.com/alonw0/web-asset-generator","last_synced_at":"2026-02-05T11:02:56.411Z","repository":{"id":319979402,"uuid":"1080317236","full_name":"alonw0/web-asset-generator","owner":"alonw0","description":"Claude skill to generate favicons, app icons, and social media images from logos, text, or emojis. Supports emoji suggestions, validation, and framework auto-integration.","archived":false,"fork":false,"pushed_at":"2026-01-28T09:11:01.000Z","size":15377,"stargazers_count":171,"open_issues_count":1,"forks_count":12,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-01-29T00:43:46.448Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Python","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/alonw0.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-10-21T07:38:30.000Z","updated_at":"2026-01-28T09:11:05.000Z","dependencies_parsed_at":null,"dependency_job_id":"da55e4f1-d5b1-4cf7-b7e8-712d24ce0088","html_url":"https://github.com/alonw0/web-asset-generator","commit_stats":null,"previous_names":["alonw0/web-asset-generator"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/alonw0/web-asset-generator","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alonw0%2Fweb-asset-generator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alonw0%2Fweb-asset-generator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alonw0%2Fweb-asset-generator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alonw0%2Fweb-asset-generator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alonw0","download_url":"https://codeload.github.com/alonw0/web-asset-generator/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alonw0%2Fweb-asset-generator/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29120481,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-05T10:47:47.471Z","status":"ssl_error","status_checked_at":"2026-02-05T10:45:08.119Z","response_time":65,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-11-02T05:02:04.446Z","updated_at":"2026-02-05T11:02:56.404Z","avatar_url":"https://github.com/alonw0.png","language":"Python","funding_links":[],"categories":["Agent Skills 🤖","HarmonyOS","🌟 Community Skills","Code \u0026 Developer Tools","⭐ 明星单项 Skills (Featured Standalone Skills)","Agent Skills","代理技能 🤖"],"sub_categories":["General","Windows Manager","Individual Skills","架构演进：代码优先 (Code-First)","通用"],"readme":"# Web Asset Generator - Claude Code Skill\n\n\u003e 🎨 A Claude Code Skill for generating favicons, app icons, and social media images\n\nTalk to Claude naturally to create production-ready web assets from logos, text, or emojis!\n\n[![Claude Code](https://img.shields.io/badge/Claude-Code_Skill-violet)](https://claude.ai/code)\n[![Python 3.6+](https://img.shields.io/badge/python-3.6+-blue.svg)](https://www.python.org/downloads/)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE)\n[![Mentioned in Awesome Claude Code](https://awesome.re/mentioned-badge.svg)](https://github.com/hesreallyhim/awesome-claude-code)\n\n## What is This?\n\nThis is a **Claude Code Skill** - a modular capability that extends Claude's functionality. When installed, Claude can automatically generate web assets through natural conversation.\n\n**Example conversation:**\n\n\u003e **You:** \"Create a favicon for my coffee shop website\"\n\u003e\n\u003e **Claude:**\n\u003e - Suggests relevant emojis (☕ Coffee, 🏪 Store)\n\u003e - Generates all icon sizes (16×16 through 512×512)\n\u003e - Validates files and checks accessibility\n\u003e - Detects your framework (Next.js, Astro, etc.)\n\u003e - Offers to add HTML tags to your code\n\u003e - Provides testing validator links\n\nNo manual work needed - just ask Claude!\n\n## 🎬 Demo\n\nSee the skill in action:\n\n\nhttps://github.com/user-attachments/assets/99b37698-98ec-42fe-87aa-f96b86edc00b\n\n\n\u003cvideo src=\"https://github.com/alonw0/web-asset-generator/raw/main/demo.mp4\" width=\"100%\" controls\u003e\n  Your browser doesn't support video playback. \u003ca href=\"https://github.com/alonw0/web-asset-generator/raw/main/demo.mp4\"\u003eDownload the demo video\u003c/a\u003e.\n\u003c/video\u003e\n\n*Watch Claude automatically generate favicons, validate them, and integrate them into your project!*\n\n## 🚀 Quick Start\n\n### 1. Prerequisites\n\n- [Claude Code](https://claude.ai/code) 2.0.13 or later\n- Python 3.6+ with pip\n\n### 2. Install the Plugin\n\n**Recommended: Via Plugin Marketplace**\n\nThe easiest way to install:\n\n```\n/plugins marketplace add alonw0/web-asset-generator\nand then\n/plugin install web-asset-generator@web-asset-generator-marketplace\n```\n\nThen install dependencies:\n```bash\npip install Pillow\n\n# Optional: For emoji support\npip install pilmoji 'emoji\u003c2.0.0'\n```\n\n**Alternative: Manual Installation**\n\n\u003cdetails\u003e\n\u003csummary\u003eClick to expand manual installation steps\u003c/summary\u003e\n\nClone this repository:\n```bash\ngit clone https://github.com/alonw0/web-asset-generator.git\ncd web-asset-generator\n```\n\nCopy the skill folder to Claude's skills directory:\n```bash\n# macOS/Linux\ncp -r skills/web-asset-generator ~/.claude/skills/\n\n# Windows\nxcopy /E /I skills\\web-asset-generator %USERPROFILE%\\.claude\\skills\\web-asset-generator\n```\n\nInstall dependencies:\n```bash\npip install Pillow\npip install pilmoji 'emoji\u003c2.0.0'  # Optional\n```\n\n\u003c/details\u003e\n\n### 3. Restart Claude Code\n\nAfter installation, restart Claude Code to load the plugin.\n\n### 4. Use It!\n\nOpen Claude Code and try:\n- \"Create a favicon with a rocket emoji\"\n- \"Generate Open Graph images for my blog\"\n- \"Make app icons from my logo.png\"\n\nClaude will automatically invoke this skill and guide you through the process!\n\n## ✨ Features\n\n- **Favicons** - Browser icons (16×16, 32×32, 96×96, favicon.ico)\n- **App Icons** - PWA/mobile icons (180×180, 192×192, 512×512)\n- **PWA Manifest** - Auto-generate manifest.json with icons, colors, and settings\n- **Social Images** - Open Graph for Facebook, Twitter, LinkedIn (1200×630, 1200×675)\n- **Emoji Support** - 60+ curated emojis with smart suggestions\n- **Validation** - File sizes, dimensions, formats, WCAG contrast compliance\n- **Auto-Integration** - Framework detection and code insertion\n- **Interactive** - Question-based workflow using Claude's UI\n\n## 📸 Examples\n\n\u003ctable\u003e\n\u003ctr\u003e\n\u003ctd width=\"50%\"\u003e\n\u003cimg src=\"docs/examples/rocket-emoji.png\" alt=\"Rocket emoji favicon\" width=\"128\"\u003e\n\u003cbr\u003e\n\u003cb\u003eEmoji Favicon\u003c/b\u003e\u003cbr\u003e\nGenerated from 🚀 with custom background\n\u003c/td\u003e\n\u003ctd width=\"50%\"\u003e\n\u003cimg src=\"docs/examples/text-og-image.png\" alt=\"Text-based social image\" width=\"400\"\u003e\n\u003cbr\u003e\n\u003cb\u003eSocial Media Image\u003c/b\u003e\u003cbr\u003e\nText with dynamic font sizing\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/table\u003e\n\n## 📁 Repository Structure\n\n```\nweb-asset-generator/                    # Repository root\n├── README.md                           # This file\n├── CONTRIBUTING.md                     # How to contribute\n├── LICENSE                             # MIT License\n├── CHANGELOG.md                        # Version history\n├── .claude-plugin/                     # Plugin metadata\n│   └── plugin.json                     # Plugin manifest\n├── marketplace.json                    # Marketplace distribution\n├── docs/                               # Documentation \u0026 examples\n└── skills/                             # Skills directory\n    └── web-asset-generator/           # ⭐ THE SKILL (copy this folder)\n        ├── SKILL.md                    # Skill definition (Claude reads this)\n        ├── CLAUDE.md                   # Development guidance\n        ├── scripts/\n        │   ├── generate_favicons.py    # Favicon generator\n        │   ├── generate_og_images.py   # Social image generator\n        │   ├── emoji_utils.py          # Emoji utilities\n        │   ├── check_dependencies.py   # Dependency checker\n        │   └── lib/\n        │       └── validators.py       # Validation system\n        └── references/\n            └── specifications.md       # Platform specs\n```\n\n**To install:** Copy the `skills/web-asset-generator/` folder to `~/.claude/skills/`\n\n## 💬 Usage Examples\n\nOnce installed, use natural language:\n\n### Favicon Generation\n```\n\"Create a favicon for my tech startup\"\n\"Generate app icons from my logo.png\"\n\"Make a favicon using a rocket emoji\"\n\"I need PWA icons for my website\"\n```\n\n### Social Media Images\n```\n\"Create Open Graph images for my blog\"\n\"Generate Twitter card with my tagline\"\n\"Make social sharing images from my logo\"\n\"Create Facebook preview with custom colors\"\n```\n\n### Emoji Features\n```\n\"Suggest emojis for my coffee shop\"\n\"Show me good emojis for a fitness app\"\n\"Create favicon from emoji representing growth\"\n```\n\n### With Validation\n```\n\"Generate favicons and validate them\"\n\"Create social images and check accessibility\"\n\"Make Open Graph images and verify file sizes\"\n```\n\n## 🛠️ Advanced: Direct Script Usage\n\nYou can also use the scripts directly without Claude:\n\n```bash\ncd ~/.claude/skills/web-asset-generator\n\n# Generate from emoji\npython scripts/generate_favicons.py --emoji \"🚀\" output/ all\n\n# Generate social images\npython scripts/generate_og_images.py output/ --text \"Welcome\"\n\n# Check dependencies\npython scripts/check_dependencies.py\n```\n\nSee `skills/web-asset-generator/CLAUDE.md` for complete script documentation.\n\n## 🔧 Troubleshooting\n\n### Skill Not Working\n\n1. Verify installation:\n   ```bash\n   ls ~/.claude/skills/web-asset-generator/SKILL.md\n   ```\n\n2. Check dependencies:\n   ```bash\n   cd ~/.claude/skills/web-asset-generator\n   python scripts/check_dependencies.py\n   ```\n\n3. Restart Claude Code\n\n4. Your request should include keywords like \"favicon\", \"icon\", \"social image\", or \"Open Graph\"\n\n### Emoji Not Working\n\nPilmoji requires `emoji\u003c2.0.0`:\n```bash\npip install 'emoji\u003c2.0.0'\n```\n\n### Claude Doesn't Invoke the Skill\n\n- Ensure `SKILL.md` is in the skill folder\n- Restart Claude Code after installation\n- Try explicit requests like \"create a favicon\"\n- Check that the skill folder is named `web-asset-generator`\n\n## 📚 Documentation\n\n- **[PLUGIN_INSTALLATION.md](PLUGIN_INSTALLATION.md)** - Detailed plugin installation guide\n- **[skills/web-asset-generator/SKILL.md](skills/web-asset-generator/SKILL.md)** - Complete Skill instructions\n- **[skills/web-asset-generator/CLAUDE.md](skills/web-asset-generator/CLAUDE.md)** - Development guide\n- **[CONTRIBUTING.md](CONTRIBUTING.md)** - Contribution guidelines\n- **[CHANGELOG.md](CHANGELOG.md)** - Version history\n\n## 🤝 Contributing\n\nContributions welcome! See [CONTRIBUTING.md](CONTRIBUTING.md) for:\n- Development setup\n- Code standards\n- Testing guidelines\n- Pull request process\n\n**Priority areas:**\n- Additional platforms (Pinterest, Instagram)\n- WebP/AVIF format support\n- Unit tests\n- Performance optimizations\n\n## 📝 License\n\nMIT License - see [LICENSE](LICENSE)\n\n## 🙏 Acknowledgments\n\n- **Anthropic** for Claude Code and the Skills framework\n- **Pillow** - Python Imaging Library\n- **Pilmoji** - Emoji rendering\n\n## 🗺️ Roadmap\n\n- [x] ~~PWA manifest.json generation~~ ✅ Completed!\n- [ ] WebP and AVIF support\n- [ ] Pinterest/Instagram support\n- [ ] Dark mode variants\n- [ ] Batch processing\n- [ ] Web preview interface\n\n## 📞 Support\n\n- 📖 [Claude Code Skills Docs](https://docs.claude.com/en/docs/claude-code/skills)\n- 🐛 [Report Issues](https://github.com/alonw0/web-asset-generator/issues)\n- 💬 [Discussions](https://github.com/alonw0/web-asset-generator/discussions)\n- 🌟 [Anthropic Skills Repo](https://github.com/anthropics/skills)\n\n---\n\n**Built for Claude Code** • **Made with ❤️ by the community**\n\n⭐ Star this repo • Share with Claude Code users!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falonw0%2Fweb-asset-generator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falonw0%2Fweb-asset-generator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falonw0%2Fweb-asset-generator/lists"}