npm - real-prototypes-skill - Versions diffs - 0.1.3 → 1.0.0 - Mend

real-prototypes-skill 0.1.3 → 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (13) hide show

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

@@ -1,310 +0,0 @@
-# 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! 🚀

package/.claude/skills/real-prototypes-skill/references/accessibility-fixes.md DELETED Viewed

@@ -1,298 +0,0 @@
-# Accessibility Fixes Documentation
-**Generated:** 2026-01-26T18:27:12.020Z
-**WCAG Level:** AA (2.1)
-## Summary
-- **Total Files Analyzed:** 5
-- **Total Issues Found:** 24
-- **Total Fixes Applied:** 5
----
-## 1. dashboard-widget.tsx.template
-**File:** `.claude/skills/real-prototypes-skill/templates/dashboard-widget.tsx.template`
-### Issues Found (4)
-#### 1. MISSING ARIA LABEL
-- **Severity:** error
-- **Message:** button at line 58 missing aria-label or associated label
-- **Element:** button
-- **Line:** 58
-#### 2. MISSING ARIA LABEL
-- **Severity:** error
-- **Message:** button at line 65 missing aria-label or associated label
-- **Element:** button
-- **Line:** 65
-#### 3. MISSING ARIA LABEL
-- **Severity:** error
-- **Message:** button at line 83 missing aria-label or associated label
-- **Element:** button
-- **Line:** 83
-#### 4. MISSING FOCUS INDICATOR
-- **Severity:** error
-- **Message:** No focus styles detected. Add focus:ring or focus-visible styles.
-### Fixes Applied (1)
-#### 1. ADD FOCUS STYLES
-- **Description:** Add focus indicators to interactive elements
-- **Implementation:** Add focus:ring-2 focus:ring-platform-primary focus:ring-offset-2 to buttons/links
----
-## 2. data-table.tsx.template
-**File:** `.claude/skills/real-prototypes-skill/templates/data-table.tsx.template`
-### Issues Found (2)
-#### 1. MISSING ARIA LABEL
-- **Severity:** error
-- **Message:** button at line 99 missing aria-label or associated label
-- **Element:** button
-- **Line:** 99
-#### 2. MISSING FOCUS INDICATOR
-- **Severity:** error
-- **Message:** No focus styles detected. Add focus:ring or focus-visible styles.
-### Fixes Applied (1)
-#### 1. ADD FOCUS STYLES
-- **Description:** Add focus indicators to interactive elements
-- **Implementation:** Add focus:ring-2 focus:ring-platform-primary focus:ring-offset-2 to buttons/links
----
-## 3. form-section.tsx.template
-**File:** `.claude/skills/real-prototypes-skill/templates/form-section.tsx.template`
-### Issues Found (6)
-#### 1. COLOR CONTRAST
-- **Severity:** warning
-- **Message:** Found 1 color utilities. Manual contrast check recommended.
-- **Colors:** text-red-500
-#### 2. MISSING ARIA LABEL
-- **Severity:** error
-- **Message:** button at line 220 missing aria-label or associated label
-- **Element:** button
-- **Line:** 220
-#### 3. MISSING ARIA LABEL
-- **Severity:** error
-- **Message:** button at line 230 missing aria-label or associated label
-- **Element:** button
-- **Line:** 230
-#### 4. MISSING ARIA LABEL
-- **Severity:** error
-- **Message:** input at line 92 missing aria-label or associated label
-- **Element:** input
-- **Line:** 92
-#### 5. MISSING ARIA LABEL
-- **Severity:** error
-- **Message:** input at line 117 missing aria-label or associated label
-- **Element:** input
-- **Line:** 117
-#### 6. KEYBOARD NAVIGATION
-- **Severity:** warning
-- **Message:** Click handlers without keyboard handlers. Ensure keyboard accessibility.
-### Fixes Applied (1)
-#### 1. ADD KEYBOARD HANDLERS
-- **Description:** Add keyboard event handlers
-- **Implementation:** Add onKeyDown={(e) => e.key === "Enter" && handleClick()} to clickable elements
----
-## 4. modal-dialog.tsx.template
-**File:** `.claude/skills/real-prototypes-skill/templates/modal-dialog.tsx.template`
-### Issues Found (7)
-#### 1. COLOR CONTRAST
-- **Severity:** warning
-- **Message:** Found 2 color utilities. Manual contrast check recommended.
-- **Colors:** bg-red-600, bg-red-700
-#### 2. MISSING ARIA LABEL
-- **Severity:** error
-- **Message:** button at line 99 missing aria-label or associated label
-- **Element:** button
-- **Line:** 99
-#### 3. MISSING ARIA LABEL
-- **Severity:** error
-- **Message:** button at line 107 missing aria-label or associated label
-- **Element:** button
-- **Line:** 107
-#### 4. MISSING ARIA LABEL
-- **Severity:** error
-- **Message:** button at line 181 missing aria-label or associated label
-- **Element:** button
-- **Line:** 181
-#### 5. MISSING ARIA LABEL
-- **Severity:** error
-- **Message:** button at line 190 missing aria-label or associated label
-- **Element:** button
-- **Line:** 190
-#### 6. MISSING ARIA LABEL
-- **Severity:** error
-- **Message:** button at line 211 missing aria-label or associated label
-- **Element:** button
-- **Line:** 211
-#### 7. KEYBOARD NAVIGATION
-- **Severity:** warning
-- **Message:** Click handlers without keyboard handlers. Ensure keyboard accessibility.
-### Fixes Applied (1)
-#### 1. ADD KEYBOARD HANDLERS
-- **Description:** Add keyboard event handlers
-- **Implementation:** Add onKeyDown={(e) => e.key === "Enter" && handleClick()} to clickable elements
----
-## 5. nav-item.tsx.template
-**File:** `.claude/skills/real-prototypes-skill/templates/nav-item.tsx.template`
-### Issues Found (5)
-#### 1. MISSING ARIA LABEL
-- **Severity:** error
-- **Message:** button at line 87 missing aria-label or associated label
-- **Element:** button
-- **Line:** 87
-#### 2. MISSING ARIA LABEL
-- **Severity:** error
-- **Message:** button at line 114 missing aria-label or associated label
-- **Element:** button
-- **Line:** 114
-#### 3. MISSING ARIA LABEL
-- **Severity:** error
-- **Message:** button at line 152 missing aria-label or associated label
-- **Element:** button
-- **Line:** 152
-#### 4. MISSING ARIA LABEL
-- **Severity:** error
-- **Message:** button at line 184 missing aria-label or associated label
-- **Element:** button
-- **Line:** 184
-#### 5. KEYBOARD NAVIGATION
-- **Severity:** warning
-- **Message:** Click handlers without keyboard handlers. Ensure keyboard accessibility.
-### Fixes Applied (1)
-#### 1. ADD KEYBOARD HANDLERS
-- **Description:** Add keyboard event handlers
-- **Implementation:** Add onKeyDown={(e) => e.key === "Enter" && handleClick()} to clickable elements
----
-## Accessibility Best Practices
-### Color Contrast
-- Normal text (< 18pt): Minimum 4.5:1 contrast ratio
-- Large text (≥ 18pt or ≥ 14pt bold): Minimum 3.0:1 contrast ratio
-- Adjust lightness by maximum 5% to preserve design
-### Keyboard Navigation
-- All interactive elements must be keyboard accessible
-- Add `onKeyDown` handlers for `onClick` elements
-- Use `tabIndex={0}` for custom interactive elements
-- Ensure logical tab order
-### ARIA Labels
-- All buttons must have accessible names (text, aria-label, or aria-labelledby)
-- All links must have descriptive text
-- Form inputs must have associated labels
-- Use `aria-describedby` for error messages
-### Focus Indicators
-- All focusable elements must have visible focus states
-- Use `focus:ring-2 focus:ring-platform-primary` pattern
-- Ensure focus indicators have minimum 3:1 contrast
-### Semantic HTML
-- Use proper HTML elements (`<button>` not `<div onClick>`)
-- Maintain heading hierarchy (h1 → h2 → h3, no skipping)
-- Use landmarks (`<nav>`, `<main>`, `<footer>`)
-- Use lists for list content
-### Form Accessibility
-- Associate labels with inputs using `htmlFor` or `aria-label`
-- Include `aria-invalid` for validation errors
-- Use `aria-describedby` to link error messages
-- Mark required fields with `required` or `aria-required`
-### Images
-- All images must have `alt` attributes
-- Use `alt=""` for decorative images
-- Provide descriptive alt text for meaningful images
----
-## Testing Recommendations
-1. **Automated Testing:** Run ESLint with accessibility plugin
-2. **Keyboard Testing:** Navigate site using only Tab, Enter, Escape
-3. **Screen Reader Testing:** Test with NVDA (Windows) or VoiceOver (Mac)
-4. **Contrast Testing:** Use browser DevTools Accessibility panel
-5. **WAVE Tool:** Run WAVE browser extension for visual feedback
----
-**Note:** All fixes preserve the original design with minimal visual changes (<1% difference).