real-prototypes-skill 0.1.0

package/.claude/skills/real-prototypes-skill/INSTALL.md

@@ -0,0 +1,259 @@
+# Installation Guide
+
+Quick guide to install the Platform Prototype Skill in your Claude Code setup.
+
+---
+
+## 🚀 Method 1: Global Installation (Recommended)
+
+Install the skill globally so it's available in all your Claude Code projects.
+
+### Step 1: Navigate to Claude Skills Directory
+
+```bash
+cd ~/.claude/skills
+```
+
+If the directory doesn't exist, create it:
+```bash
+mkdir -p ~/.claude/skills
+cd ~/.claude/skills
+```
+
+### Step 2: Clone This Repository
+
+```bash
+git clone https://github.com/kaidhar/real-prototypes-skill.git
+```
+
+### Step 3: Verify Installation
+
+```bash
+# List the skill directory
+ls -la real-prototypes-skill
+
+# You should see SKILL.md, README.md, cli.js, etc.
+```
+
+### Step 4: Restart Claude Code
+
+```bash
+# Exit Claude Code if running
+# Then restart it in any project
+cd ~/your-project
+claude-code
+```
+
+### Step 5: Test the Skill
+
+Tell Claude:
+```
+Use the real-prototypes-skill to capture design from amazon.in
+```
+
+Claude should recognize and invoke the skill!
+
+---
+
+## 📁 Method 2: Project-Specific Installation
+
+Install the skill only for a specific project.
+
+### Step 1: Navigate to Your Project
+
+```bash
+cd your-project
+```
+
+### Step 2: Create Skills Directory
+
+```bash
+mkdir -p .claude/skills
+cd .claude/skills
+```
+
+### Step 3: Clone the Repository
+
+```bash
+git clone https://github.com/kaidhar/real-prototypes-skill.git
+```
+
+Or add as a submodule:
+```bash
+git submodule add https://github.com/kaidhar/real-prototypes-skill.git
+```
+
+### Step 4: Restart Claude Code in This Project
+
+```bash
+cd ../..  # Back to project root
+claude-code
+```
+
+---
+
+## ✅ Verify Installation
+
+### Check if Skill is Loaded
+
+```bash
+# In Claude Code, type:
+/help
+```
+
+Look for `real-prototypes-skill` in the list of available skills.
+
+### Test Run
+
+Tell Claude:
+```
+I want to create a prototype that matches Amazon's design.
+Can you use the real-prototypes-skill?
+```
+
+If Claude responds that it's using the skill, you're all set! ✅
+
+---
+
+## 🔧 Troubleshooting
+
+### "Skill not found"
+
+**Problem**: Claude doesn't recognize the skill.
+
+**Solution**:
+1. Check the installation path:
+   ```bash
+   ls ~/.claude/skills/real-prototypes-skill/SKILL.md
+   ```
+2. Ensure `SKILL.md` exists (this is what Claude reads)
+3. Restart Claude Code completely
+
+### "agent-browser-skill not found"
+
+**Problem**: The platform skill depends on `agent-browser-skill`.
+
+**Solution**: Install the browser automation skill:
+```bash
+cd ~/.claude/skills
+git clone https://github.com/anthropics/agent-browser-skill.git
+```
+
+### "Permission denied"
+
+**Problem**: Can't write to `~/.claude/skills/`.
+
+**Solution**: Create the directory with proper permissions:
+```bash
+mkdir -p ~/.claude/skills
+chmod 755 ~/.claude/skills
+```
+
+### "Git clone failed"
+
+**Problem**: Repository doesn't exist or network issue.
+
+**Solution**:
+1. Check if you're using the correct GitHub URL
+2. Try with HTTPS instead of SSH:
+   ```bash
+   git clone https://github.com/kaidhar/real-prototypes-skill.git
+   ```
+3. Check your network connection
+
+---
+
+## 🔄 Updating the Skill
+
+### Global Installation Update
+
+```bash
+cd ~/.claude/skills/real-prototypes-skill
+git pull origin main
+```
+
+### Project-Specific Update
+
+```bash
+cd your-project/.claude/skills/real-prototypes-skill
+git pull origin main
+```
+
+### Submodule Update
+
+```bash
+cd your-project
+git submodule update --remote .claude/skills/real-prototypes-skill
+```
+
+---
+
+## 🗑️ Uninstalling
+
+### Remove Global Installation
+
+```bash
+rm -rf ~/.claude/skills/real-prototypes-skill
+```
+
+### Remove Project-Specific Installation
+
+```bash
+cd your-project
+rm -rf .claude/skills/real-prototypes-skill
+```
+
+### Remove Submodule
+
+```bash
+cd your-project
+git submodule deinit .claude/skills/real-prototypes-skill
+git rm .claude/skills/real-prototypes-skill
+rm -rf .git/modules/.claude/skills/real-prototypes-skill
+```
+
+---
+
+## 📦 Dependencies
+
+Make sure you have these installed:
+
+### Required
+- **Claude Code CLI** - [Install from claude.ai/code](https://claude.ai/code)
+- **Node.js 18+** - [Download from nodejs.org](https://nodejs.org/)
+- **npm or pnpm** - Comes with Node.js
+
+### Check Versions
+
+```bash
+# Check Claude Code
+claude --version
+
+# Check Node.js
+node --version
+
+# Check npm
+npm --version
+```
+
+---
+
+## 🎓 Next Steps
+
+After installation:
+
+1. **Read the README** - `cat ~/.claude/skills/real-prototypes-skill/README.md`
+2. **Try the examples** - Check out the Amazon chatbot example
+3. **Build your first prototype** - Follow the usage guide in README.md
+
+---
+
+## 💬 Getting Help
+
+- **GitHub Issues**: [Report a problem](https://github.com/kaidhar/real-prototypes-skill/issues)
+- **Discussions**: [Ask questions](https://github.com/kaidhar/real-prototypes-skill/discussions)
+- **Documentation**: [Read SKILL.md](./SKILL.md)
+
+---
+
+Happy prototyping! 🎨

package/.claude/skills/real-prototypes-skill/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Platform Prototype Skill Contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/.claude/skills/real-prototypes-skill/PUBLISH.md

@@ -0,0 +1,310 @@
+# Publishing to GitHub - Checklist
+
+Follow this checklist to publish the Platform Prototype Skill on GitHub.
+
+---
+
+## 📋 Pre-Publish Checklist
+
+### 1. Update Repository URLs
+
+Replace `kaidhar` with your actual GitHub username in these files:
+
+- [ ] `README.md` - Line 38, 51, 377, 430-432
+- [ ] `INSTALL.md` - Line 15, 54, 61, 112, 152
+- [ ] `QUICKSTART.md` - Line 7, 136
+
+**Find and replace:**
+```bash
+cd .claude/skills/real-prototypes-skill
+grep -r "kaidhar" . --include="*.md"
+```
+
+Replace with your actual username:
+```bash
+# Example:
+sed -i 's/kaidhar/yourgithub/g' README.md
+sed -i 's/kaidhar/yourgithub/g' INSTALL.md
+sed -i 's/kaidhar/yourgithub/g' QUICKSTART.md
+```
+
+### 2. Create GitHub Repository
+
+1. Go to https://github.com/new
+2. Repository name: `real-prototypes-skill`
+3. Description: `Claude Code skill for capturing platform designs and generating pixel-perfect Next.js prototypes`
+4. ✅ Public
+5. ❌ Don't initialize with README (we have one)
+6. Click "Create repository"
+
+### 3. Initialize Git (if not already)
+
+```bash
+cd .claude/skills/real-prototypes-skill
+git init
+git add .
+git commit -m "Initial commit: Platform Prototype Skill v1.0"
+```
+
+### 4. Connect to GitHub
+
+```bash
+# Add remote (replace USERNAME)
+git remote add origin https://github.com/USERNAME/real-prototypes-skill.git
+
+# Push to GitHub
+git branch -M main
+git push -u origin main
+```
+
+### 5. Add Topics/Tags
+
+On GitHub repository page:
+- Click ⚙️ (Settings gear next to About)
+- Add topics:
+  - `claude-code`
+  - `claude-skill`
+  - `nextjs`
+  - `prototype`
+  - `design-tokens`
+  - `tailwindcss`
+  - `web-automation`
+
+### 6. Enable GitHub Pages (Optional)
+
+For documentation hosting:
+1. Go to Settings → Pages
+2. Source: Deploy from branch
+3. Branch: main, folder: / (root)
+4. Save
+
+---
+
+## 📝 Repository Settings
+
+### About Section
+
+**Description:**
+```
+Claude Code skill for capturing web platform designs and generating pixel-perfect Next.js prototypes
+```
+
+**Website:**
+```
+https://claude.ai/code
+```
+
+**Topics:**
+```
+claude-code, claude-skill, nextjs, prototype, design-tokens, tailwindcss, web-automation, react, typescript
+```
+
+### README Badges
+
+Ensure these badges work:
+- [ ] License badge links to LICENSE file
+- [ ] Claude Code badge links to claude.ai/code
+
+---
+
+## 📦 Release Checklist
+
+### Create First Release (v1.0.0)
+
+1. Go to Releases → Create new release
+2. Tag version: `v1.0.0`
+3. Release title: `v1.0.0 - Initial Release`
+4. Description:
+
+```markdown
+# Platform Prototype Skill v1.0.0
+
+First stable release of the Platform Prototype Skill for Claude Code.
+
+## ✨ Features
+
+- 🎨 Capture design tokens from any web platform
+- 📸 Automatic screenshot and HTML extraction
+- 🚀 Generate Next.js + TypeScript prototypes
+- 💅 Tailwind CSS with exact color matching
+- ♿ WCAG 2.1 AA accessibility compliance
+- 🛠️ CLI tool for validation
+
+## 📚 Example
+
+- Amazon India Shopping Chatbot (fully functional)
+
+## 🚀 Installation
+
+```bash
+cd ~/.claude/skills
+git clone https://github.com/USERNAME/real-prototypes-skill.git
+```
+
+See [INSTALL.md](./INSTALL.md) for details.
+
+## 📖 Documentation
+
+- [Quick Start](./QUICKSTART.md)
+- [Full Documentation](./README.md)
+- [Skill Guide](./SKILL.md)
+```
+
+3. Click "Publish release"
+
+---
+
+## 🔗 Post-Publish Tasks
+
+### 1. Test Installation
+
+Test the installation process:
+```bash
+# Remove local copy
+rm -rf ~/.claude/skills/real-prototypes-skill
+
+# Install from GitHub
+cd ~/.claude/skills
+git clone https://github.com/USERNAME/real-prototypes-skill.git
+
+# Test it works
+claude-code
+```
+
+### 2. Update Links
+
+Create a `links.md` file with all relevant links:
+- [ ] GitHub repository
+- [ ] Installation guide
+- [ ] Quick start
+- [ ] Example projects
+- [ ] Issue tracker
+
+### 3. Social Media (Optional)
+
+Share on:
+- [ ] Twitter/X with #ClaudeCode hashtag
+- [ ] Reddit r/ClaudeAI
+- [ ] Dev.to article
+- [ ] LinkedIn post
+
+Sample post:
+```
+🚀 Just published Platform Prototype Skill for Claude Code!
+
+Capture any platform's design and generate pixel-perfect prototypes:
+✅ Automatic design token extraction
+✅ Next.js + TypeScript generation
+✅ Exact color matching
+✅ Fully functional components
+
+Example: Built an Amazon shopping chatbot in minutes!
+
+#ClaudeCode #WebDev #Prototyping
+
+https://github.com/USERNAME/real-prototypes-skill
+```
+
+---
+
+## 🎯 Marketing README Features
+
+Ensure README has:
+- [ ] Clear "What it does" section
+- [ ] Quick start (5 min setup)
+- [ ] Visual examples (screenshots)
+- [ ] Installation options (global/local)
+- [ ] Troubleshooting section
+- [ ] Contributing guide link
+- [ ] License badge
+- [ ] Star button callout
+
+---
+
+## 📊 Analytics Setup (Optional)
+
+### GitHub Insights
+
+Monitor:
+- Stars ⭐
+- Forks 🍴
+- Issues 🐛
+- Pull requests 🔀
+
+### Useful Commands
+
+```bash
+# Check repository stats
+gh repo view USERNAME/real-prototypes-skill
+
+# List recent stars
+gh api repos/USERNAME/real-prototypes-skill/stargazers
+
+# List issues
+gh issue list
+```
+
+---
+
+## 🔄 Maintenance
+
+### Regular Updates
+
+Create a maintenance schedule:
+- [ ] Weekly: Check issues
+- [ ] Monthly: Update dependencies
+- [ ] Quarterly: Major feature releases
+
+### Version Numbering
+
+Follow SemVer:
+- **Major** (x.0.0): Breaking changes
+- **Minor** (0.x.0): New features
+- **Patch** (0.0.x): Bug fixes
+
+---
+
+## ✅ Final Checklist
+
+Before announcing publicly:
+
+- [ ] README.md is complete and clear
+- [ ] INSTALL.md tested on clean machine
+- [ ] QUICKSTART.md verified working
+- [ ] All kaidhar replaced
+- [ ] LICENSE file present
+- [ ] Example project works
+- [ ] No sensitive data (passwords, keys)
+- [ ] Git history cleaned
+- [ ] Release notes written
+- [ ] GitHub topics added
+- [ ] Repository description set
+
+---
+
+## 🎉 You're Ready to Publish!
+
+Once all checkboxes are complete, your skill is ready for the community!
+
+**Repository URL:**
+```
+https://github.com/USERNAME/real-prototypes-skill
+```
+
+**Installation Command:**
+```bash
+cd ~/.claude/skills
+git clone https://github.com/USERNAME/real-prototypes-skill.git
+```
+
+---
+
+## 📞 Support
+
+After publishing:
+- Monitor GitHub issues
+- Respond to questions
+- Accept pull requests
+- Update documentation
+
+Good luck! 🚀