Reorganize: Move all skills to skills/ folder
- Created skills/ directory - Moved 272 skills to skills/ subfolder - Kept agents/ at root level - Kept installation scripts and docs at root level Repository structure: - skills/ - All 272 skills from skills.sh - agents/ - Agent definitions - *.sh, *.ps1 - Installation scripts - README.md, etc. - Documentation Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
admin
@@ -1,214 +0,0 @@
|
||||
# Superpowers Plugin CTA - Quick Reference
|
||||
|
||||
## TL;DR
|
||||
|
||||
Created a conversion-optimized CTA section for the Superpowers Plugin article with target conversion rate of 8-12% (2-3x industry average).
|
||||
|
||||
## Files Created
|
||||
|
||||
1. **superpowers-cta-design-plan.md** (Comprehensive design specification)
|
||||
2. **superpowers-cta-optimized.html** (Ready-to-use HTML/CSS)
|
||||
3. **superpowers-cta-implementation-guide.md** (Step-by-step setup guide)
|
||||
|
||||
## Key Features
|
||||
|
||||
### Design Elements
|
||||
- Glassmorphism aesthetic (frosted glass with blur)
|
||||
- Gradient text and buttons (indigo to purple)
|
||||
- GPU-accelerated animations (60fps)
|
||||
- Mobile-first responsive design
|
||||
- WCAG AA accessibility compliant
|
||||
|
||||
### Conversion Optimizers
|
||||
- Urgency badge ("v1.0 Released")
|
||||
- 3 key benefits with icons
|
||||
- Social proof stats (2.5k+ stars, 10k+ installs)
|
||||
- Trust indicators (MIT License, Open Source)
|
||||
- Clear visual hierarchy (F-Pattern reading)
|
||||
- Single primary CTA with secondary option
|
||||
|
||||
### Psychological Triggers
|
||||
- Loss aversion (urgency badge)
|
||||
- Bandwagon effect (social proof)
|
||||
- Risk reduction (free, open source)
|
||||
- Value clarity (specific benefits)
|
||||
- Cognitive ease (minimal choices)
|
||||
|
||||
## 5-Minute Setup
|
||||
|
||||
1. Open `superpowers-cta-optimized.html`
|
||||
2. Replace `[GITHUB_REPO_URL]` with your GitHub URL
|
||||
3. Replace `[INSTALLATION_DOCS_URL]` with your docs URL
|
||||
4. Update stats (2.5k+ stars, 10k+ installs) with real numbers
|
||||
5. Copy entire HTML/CSS and paste into WordPress Custom HTML block
|
||||
6. Test links and mobile view
|
||||
|
||||
## Customization Quick Guide
|
||||
|
||||
### Change Colors
|
||||
```css
|
||||
:root {
|
||||
--super-primary: #6366f1; /* Main brand */
|
||||
--super-secondary: #8b5cf6; /* Gradient accent */
|
||||
--super-accent: #10b981; /* Success color */
|
||||
}
|
||||
```
|
||||
|
||||
### Change Badge Text
|
||||
```html
|
||||
<span class="super-badge-text">NEW</span>
|
||||
<!-- Options: NEW, v1.0, FREE, LIVE -->
|
||||
```
|
||||
|
||||
### Change CTA Text
|
||||
```html
|
||||
<span class="super-cta-text">Install Superpowers Plugin</span>
|
||||
<!-- Options: Install Plugin, Get Superpowers, Start Building -->
|
||||
```
|
||||
|
||||
## Performance Metrics
|
||||
|
||||
| Metric | Target | Industry Avg |
|
||||
|--------|--------|--------------|
|
||||
| CTR | 8-12% | 2-4% |
|
||||
| Conversion Rate | >25% | 15-20% |
|
||||
| Load Time | <1s | 2-3s |
|
||||
| Mobile Score | 95+ | 70-80 |
|
||||
|
||||
## A/B Test Ideas
|
||||
|
||||
1. **Headlines**: "Transform Claude Code" vs "Give Claude Code Superpowers"
|
||||
2. **CTA Text**: "Install Plugin" vs "Get Superpowers" vs "Start Building"
|
||||
3. **Features**: 3 features vs 4 features (add CI/CD)
|
||||
4. **Layout**: Features above CTA vs Features below CTA
|
||||
|
||||
## Analytics Tracking
|
||||
|
||||
Add to Google Analytics:
|
||||
```javascript
|
||||
// Primary CTA clicks
|
||||
gtag('event', 'click', {
|
||||
'event_category': 'CTA',
|
||||
'event_label': 'Install Plugin',
|
||||
'value': 1
|
||||
});
|
||||
|
||||
// Section view (scroll depth)
|
||||
gtag('event', 'scroll', {
|
||||
'event_category': 'Engagement',
|
||||
'event_label': 'CTA Section Viewed'
|
||||
});
|
||||
```
|
||||
|
||||
## Component Structure
|
||||
|
||||
```
|
||||
Super CTA Section
|
||||
├── Glass Card Container
|
||||
│ ├── Urgency Badge (✨ v1.0 Released)
|
||||
│ ├── Main Heading (Gradient Text)
|
||||
│ ├── Subheading (Value Proposition)
|
||||
│ ├── Features Grid (3 Benefits)
|
||||
│ │ ├── TDD Feature
|
||||
│ │ ├── Debugging Feature
|
||||
│ │ └── Planning Feature
|
||||
│ ├── Primary CTA Button (Gradient)
|
||||
│ ├── Secondary CTA Link (Documentation)
|
||||
│ ├── Stats Section (3 Social Proof Items)
|
||||
│ └── Trust Indicators (MIT License)
|
||||
└── Background Gradient Glow
|
||||
```
|
||||
|
||||
## Mobile Responsive Breakpoints
|
||||
|
||||
- **Desktop** (>968px): 3-column features, full spacing
|
||||
- **Tablet** (768-968px): Stacked features, reduced padding
|
||||
- **Mobile** (<768px): Single column, stacked stats
|
||||
- **Small Mobile** (<480px): Compact layout, minimal spacing
|
||||
|
||||
## Accessibility Checklist
|
||||
|
||||
- [x] Color contrast 4.5:1 (WCAG AA)
|
||||
- [x] Keyboard navigation support
|
||||
- [x] Screen reader friendly (ARIA labels)
|
||||
- [x] Focus indicators on interactive elements
|
||||
- [x] Reduced motion support
|
||||
- [x] Touch targets 44x44px minimum
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
**Links not working?**
|
||||
- Check URLs are correct
|
||||
- Verify no theme JavaScript conflicts
|
||||
- Test in browser incognito mode
|
||||
|
||||
**Mobile layout broken?**
|
||||
- Check for CSS conflicts with theme
|
||||
- Use DevTools to identify issues
|
||||
- Test on multiple devices
|
||||
|
||||
**Analytics not firing?**
|
||||
- Verify GA4 installed on site
|
||||
- Check browser console for errors
|
||||
- Test with GA Debugger extension
|
||||
|
||||
## Success Metrics Dashboard
|
||||
|
||||
### Week 1
|
||||
- CTR: >5%
|
||||
- GitHub Stars: +50
|
||||
- Installs: +100
|
||||
|
||||
### Week 4
|
||||
- CTR: >8%
|
||||
- GitHub Stars: +200
|
||||
- Installs: +500
|
||||
|
||||
### Week 12
|
||||
- CTR: >12%
|
||||
- GitHub Stars: +1,000
|
||||
- Installs: +2,500
|
||||
|
||||
## Design Principles Applied
|
||||
|
||||
1. **Visual Hierarchy**: Clear heading structure, gradient emphasis
|
||||
2. **Color Psychology**: Blue/purple (trust), green (success)
|
||||
3. **Motion Design**: Subtle animations, 60fps performance
|
||||
4. **Whitespace**: Ample spacing for clarity
|
||||
5. **Contrast**: High contrast for readability
|
||||
6. **Consistency**: Matches glass-card ecosystem aesthetic
|
||||
7. **Accessibility**: WCAG AA compliant throughout
|
||||
8. **Performance**: CSS-only, fast loading
|
||||
|
||||
## Next Steps
|
||||
|
||||
1. **Implement**: Add CTA section to article
|
||||
2. **Track**: Set up Google Analytics events
|
||||
3. **Test**: Run A/B tests on variants
|
||||
4. **Monitor**: Check analytics weekly
|
||||
5. **Iterate**: Update based on data
|
||||
|
||||
## File Locations
|
||||
|
||||
All files in: `/home/uroma/.claude/skills/ui-ux-pro-max/`
|
||||
|
||||
- `superpowers-cta-design-plan.md` - Full specification
|
||||
- `superpowers-cta-optimized.html` - Implementation code
|
||||
- `superpowers-cta-implementation-guide.md` - Setup guide
|
||||
- `superpowers-cta-summary.md` - This document
|
||||
|
||||
## Support
|
||||
|
||||
For issues or questions:
|
||||
1. Check implementation guide
|
||||
2. Review browser console for errors
|
||||
3. Test in incognito mode
|
||||
4. Verify URLs are correct
|
||||
5. Check for theme conflicts
|
||||
|
||||
---
|
||||
|
||||
**Version**: 1.0
|
||||
**Date**: 2026-01-18
|
||||
**Design System**: UI/UX Pro Max
|
||||
**Expected Conversion Rate**: 8-12% (2-3x industry average)
|
||||
Reference in New Issue
Block a user