Add custom Claude Code upgrades and restore all skills
Added 16 custom skills: - ralph (RalphLoop autonomous agent) - brainstorming (with Ralph integration) - dispatching-parallel-agents - autonomous-loop - multi-ai-brainstorm - cognitive-context, cognitive-core, cognitive-planner, cognitive-safety - tool-discovery-agent - ui-ux-pro-max (full design system) - wordpress-ai - agent-pipeline-builder - dev-browser - planning-with-files - playwright-skill Also organized remaining skills that were at root level into skills/ folder. Total: 272 skills from skills.sh + 16 custom upgrades Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
admin
522
skills/ui-ux-pro-max/superpowers-cta-visual-mockup.md
Normal file
522
skills/ui-ux-pro-max/superpowers-cta-visual-mockup.md
Normal file
@@ -0,0 +1,522 @@
|
||||
# Superpowers Plugin CTA - Visual Mockup Guide
|
||||
|
||||
## Visual Representation
|
||||
|
||||
This document provides ASCII and descriptive visualizations of the CTA section to help you visualize the final design before implementation.
|
||||
|
||||
---
|
||||
|
||||
## Desktop View (>968px)
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────────────────────┐
|
||||
│ │
|
||||
│ ✨ v1.0 Released │ ← Urgency Badge
|
||||
│ │
|
||||
│ Transform Claude Code into a Senior Developer │ ← Main Heading
|
||||
│ (gradient text: indigo → purple) │
|
||||
│ │
|
||||
│ Give your AI agent real software development skills with TDD workflows, │ ← Subheading
|
||||
│ intelligent debugging, and project planning capabilities. │
|
||||
│ │
|
||||
│ ┌─────────────────────┐ ┌─────────────────────┐ ┌─────────────────────┐ │
|
||||
│ │ │ │ │ │ │ │
|
||||
│ │ ✓ │ │ ⚡ │ │ 📋 │ │ ← Features Grid
|
||||
│ │ │ │ │ │ │ │
|
||||
│ │ Test-Driven │ │ Intelligent │ │ Smart Project │ │
|
||||
│ │ Development │ │ Debugging │ │ Planning │ │
|
||||
│ │ │ │ │ │ │ │
|
||||
│ │ Ship bug-free │ │ 10x faster root │ │ Break down complex │ │
|
||||
│ │ code with │ │ cause analysis │ │ tasks automatically │ │
|
||||
│ │ confidence │ │ │ │ │ │
|
||||
│ │ │ │ │ │ │ │
|
||||
│ └─────────────────────┘ └─────────────────────┘ └─────────────────────┘ │
|
||||
│ │
|
||||
│ ┌─────────────────────────────────────────────┐ │
|
||||
│ │ Install Superpowers Plugin [→] │ ← Primary CTA
|
||||
│ └─────────────────────────────────────────────┘ │ (Gradient button)
|
||||
│ │
|
||||
│ [📄] View Installation Guide │ ← Secondary CTA
|
||||
│ │
|
||||
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │
|
||||
│ │ ⭐ │ │ 📦 │ │ 👥 │ │ ← Social Proof
|
||||
│ │ │ │ │ │ │ │
|
||||
│ │ 2.5k+ │ │ 10k+ │ │ 500+ │ │
|
||||
│ │ Stars │ │ Installs │ │ Users │ │
|
||||
│ └─────────────┘ └─────────────┘ └─────────────┘ │
|
||||
│ │
|
||||
│ 🛡️ MIT License • Open Source • Community Built │ ← Trust
|
||||
│ │
|
||||
└─────────────────────────────────────────────────────────────────────────────┘
|
||||
↑
|
||||
Glass Card Container
|
||||
(frosted glass with blur effect)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Tablet View (768px - 968px)
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────┐
|
||||
│ │
|
||||
│ ✨ v1.0 Released │
|
||||
│ │
|
||||
│ Transform Claude Code into a │
|
||||
│ Senior Developer │
|
||||
│ │
|
||||
│ Give your AI agent real software... │
|
||||
│ │
|
||||
│ ┌─────────────────────────────────────┐ │
|
||||
│ │ ✓ Test-Driven Development │ │ ← Features
|
||||
│ │ Ship bug-free code... │ │ (Stacked)
|
||||
│ └─────────────────────────────────────┘ │
|
||||
│ ┌─────────────────────────────────────┐ │
|
||||
│ │ ⚡ Intelligent Debugging │ │
|
||||
│ │ 10x faster root... │ │
|
||||
│ └─────────────────────────────────────┘ │
|
||||
│ ┌─────────────────────────────────────┐ │
|
||||
│ │ 📋 Smart Project Planning │ │
|
||||
│ │ Break down complex... │ │
|
||||
│ └─────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ ┌───────────────────────────────┐ │
|
||||
│ │ Install Superpowers Plugin [→]│ │ ← Primary CTA
|
||||
│ └───────────────────────────────┘ │ (Full width)
|
||||
│ │
|
||||
│ [📄] View Installation Guide │
|
||||
│ │
|
||||
│ ⭐ 2.5k+ 📦 10k+ 👥 500+ │ ← Stats
|
||||
│ Stars Installs Users │ (Horizontal)
|
||||
│ │
|
||||
│ 🛡️ MIT License • Open Source • Community │
|
||||
│ │
|
||||
└─────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Mobile View (<768px)
|
||||
|
||||
```
|
||||
┌─────────────────────────┐
|
||||
│ │
|
||||
│ ✨ v1.0 Released │
|
||||
│ │
|
||||
│ Transform Claude Code │
|
||||
│ into a Senior │
|
||||
│ Developer │
|
||||
│ │
|
||||
│ Give your AI agent │
|
||||
│ real software... │
|
||||
│ │
|
||||
│ ┌───────────────────┐ │
|
||||
│ │ ✓ TDD │ │ ← Features
|
||||
│ │ Ship bug-free │ │ (Compact)
|
||||
│ └───────────────────┘ │
|
||||
│ ┌───────────────────┐ │
|
||||
│ │ ⚡ Debugging │ │
|
||||
│ │ 10x faster │ │
|
||||
│ └───────────────────┘ │
|
||||
│ ┌───────────────────┐ │
|
||||
│ │ 📋 Planning │ │
|
||||
│ │ Break down... │ │
|
||||
│ └───────────────────┘ │
|
||||
│ │
|
||||
│ ┌───────────────────┐ │
|
||||
│ │ Install Superpowers│ │ ← Primary CTA
|
||||
│ │ Plugin [→] │ │ (Full width)
|
||||
│ └───────────────────┘ │
|
||||
│ │
|
||||
│ [📄] View Guide │
|
||||
│ │
|
||||
│ ⭐ 2.5k+ Stars │ ← Stats
|
||||
│ 📦 10k+ Installs │ (Stacked)
|
||||
│ 👥 500+ Users │
|
||||
│ │
|
||||
│ 🛡️ MIT License │
|
||||
│ Open Source │
|
||||
│ Community Built │
|
||||
│ │
|
||||
└─────────────────────────┘
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Color Scheme Visualization
|
||||
|
||||
### Primary Colors
|
||||
```
|
||||
Indigo: ████████████████████ #6366f1 (Main brand)
|
||||
Purple: ████████████████████ #8b5cf6 (Gradient accent)
|
||||
Emerald: ████████████████████ #10b981 (Success/accent)
|
||||
```
|
||||
|
||||
### Gradient Effect
|
||||
```
|
||||
Indigo → Purple Gradient:
|
||||
████████████████████████████████████████████████████
|
||||
Light Medium Dark
|
||||
#6366f1 #7972e3 #8b5cf6
|
||||
```
|
||||
|
||||
### Glass Effect
|
||||
```
|
||||
Background: rgba(255, 255, 255, 0.85)
|
||||
Backdrop Filter: blur(20px)
|
||||
|
||||
Visual representation:
|
||||
┌──────────────────────────────────┐
|
||||
│ ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ │ ← Semi-transparent white
|
||||
│ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ │ ← Content with blur
|
||||
│ ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ │ ← Frosted glass effect
|
||||
└──────────────────────────────────┘
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Typography Scale
|
||||
|
||||
```
|
||||
H2 (Main Heading): 2.5rem (40px) - Extra Bold (800)
|
||||
Transform Claude Code into a
|
||||
Senior Developer
|
||||
|
||||
P (Subheading): 1.125rem (18px) - Regular (400)
|
||||
Give your AI agent real
|
||||
software development skills...
|
||||
|
||||
Feature Title: 1rem (16px) - Semi-Bold (600)
|
||||
Test-Driven Development
|
||||
|
||||
Feature Benefit: 0.875rem (14px) - Regular (400)
|
||||
Ship bug-free code with confidence
|
||||
|
||||
Primary CTA: 1.125rem (18px) - Bold (700)
|
||||
Install Superpowers Plugin
|
||||
|
||||
Secondary CTA: 0.95rem (15.2px) - Medium (500)
|
||||
View Installation Guide
|
||||
|
||||
Stats Value: 1.25rem (20px) - Extra Bold (800)
|
||||
2.5k+
|
||||
|
||||
Stats Label: 0.75rem (12px) - Medium (500)
|
||||
GitHub Stars
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Spacing System
|
||||
|
||||
```
|
||||
Section Padding: 4rem (64px) top/bottom
|
||||
Card Padding: 3rem (48px) internal
|
||||
Content Gap: 1.5rem (24px) between elements
|
||||
Feature Gap: 1.5rem (24px) between features
|
||||
Stat Gap: 3rem (48px) between stats
|
||||
Mobile Padding: 2rem (32px) card (mobile)
|
||||
Small Mobile: 1.5rem (24px) card (<480px)
|
||||
|
||||
Visual representation:
|
||||
|
||||
┌────────────────────────────────────┐
|
||||
│ │ ← 4rem (64px) padding
|
||||
│ │
|
||||
│ Badge │
|
||||
│ │ ← 2rem gap
|
||||
│ Heading │
|
||||
│ │ ← 1rem gap
|
||||
│ Subheading │
|
||||
│ │ ← 2.5rem gap
|
||||
│ Features │
|
||||
│ ┌───┐ ┌───┐ ┌───┐ │ ← 1.5rem gap
|
||||
│ │ 1 │ │ 2 │ │ 3 │ │
|
||||
│ └───┘ └───┘ └───┘ │
|
||||
│ │ ← 2.5rem gap
|
||||
│ [Primary CTA] │
|
||||
│ │ ← 1rem gap
|
||||
│ [Secondary CTA] │
|
||||
│ │ ← 2.5rem gap
|
||||
│ Stats │
|
||||
│ │ ← 2rem gap
|
||||
│ Trust │
|
||||
│ │ ← 4rem (64px) padding
|
||||
└────────────────────────────────────┘
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Animation Timings
|
||||
|
||||
```
|
||||
Badge Pulse: 2s infinite
|
||||
Scale: 1.0 → 1.02 → 1.0
|
||||
Shadow: 0.3 → 0.4 → 0.3
|
||||
|
||||
Badge Sparkle: 1.5s infinite
|
||||
Rotate: 0° → 10° → 0°
|
||||
Scale: 1.0 → 1.2 → 1.0
|
||||
|
||||
Feature Hover: 300ms
|
||||
TranslateY: 0 → -4px
|
||||
Background: 0.05 → 0.08 opacity
|
||||
|
||||
CTA Hover: 300ms
|
||||
TranslateY: 0 → -2px
|
||||
Shadow: 0.3 → 0.4 opacity
|
||||
Arrow: 0 → 4px translateX
|
||||
|
||||
Entry Animation: 600ms (one-time)
|
||||
Fade in: 0 → 1 opacity
|
||||
Slide up: 20px → 0px
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Component Measurements
|
||||
|
||||
### Badge
|
||||
```
|
||||
Width: Auto (based on text)
|
||||
Height: 36px
|
||||
Padding: 0.5rem 1rem (8px 16px)
|
||||
Border Radius: 100px (pill shape)
|
||||
Font Size: 0.875rem (14px)
|
||||
Font Weight: 600 (Semi-Bold)
|
||||
```
|
||||
|
||||
### Feature Cards
|
||||
```
|
||||
Width: 1fr (equal columns)
|
||||
Padding: 1.25rem (20px)
|
||||
Border Radius: 12px
|
||||
Gap: 1.5rem (24px)
|
||||
Icon Size: 32px
|
||||
Title Size: 1rem (16px)
|
||||
Benefit Size: 0.875rem (14px)
|
||||
```
|
||||
|
||||
### Primary CTA Button
|
||||
```
|
||||
Width: Auto (fit content)
|
||||
Height: 48px (desktop)
|
||||
Padding: 1rem 2.5rem (16px 40px)
|
||||
Border Radius: 12px
|
||||
Font Size: 1.125rem (18px)
|
||||
Font Weight: 700 (Bold)
|
||||
Icon Size: 20px
|
||||
```
|
||||
|
||||
### Stats
|
||||
```
|
||||
Icon Size: 24px
|
||||
Value Size: 1.25rem (20px)
|
||||
Label Size: 0.75rem (12px)
|
||||
Gap: 3rem (48px) between stats
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Responsive Breakpoints
|
||||
|
||||
```
|
||||
Extra Large (1440px+):
|
||||
Card Padding: 3.5rem
|
||||
Heading: 2.5rem
|
||||
Features: 3 columns
|
||||
|
||||
Desktop (968px - 1439px):
|
||||
Card Padding: 3rem
|
||||
Heading: 2.5rem
|
||||
Features: 3 columns
|
||||
|
||||
Tablet (768px - 967px):
|
||||
Card Padding: 2.5rem
|
||||
Heading: 2.25rem
|
||||
Features: 1 column (stacked)
|
||||
|
||||
Mobile (480px - 767px):
|
||||
Card Padding: 2rem
|
||||
Heading: 2rem
|
||||
Features: 1 column (stacked)
|
||||
Stats: Stacked vertically
|
||||
|
||||
Small Mobile (<480px):
|
||||
Card Padding: 1.5rem
|
||||
Heading: 1.75rem
|
||||
Features: 1 column (compact)
|
||||
Stats: Stacked vertically
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Dark Mode Visualization
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────┐
|
||||
│ │ ← Dark glass card
|
||||
│ Transform Claude Code into a │ (rgba(30, 41, 59, 0.85))
|
||||
│ Senior Developer │
|
||||
│ │
|
||||
│ Give your AI agent real software... │ ← Lighter text
|
||||
│ │ (#94a3b8)
|
||||
│ ┌─────────────────────────────────────┐ │
|
||||
│ │ ✓ Test-Driven Development │ │ ← Features with
|
||||
│ │ Ship bug-free code... │ │ darker background
|
||||
│ └─────────────────────────────────────┘ │ (rgba(99, 102, 241, 0.08))
|
||||
│ │
|
||||
│ [Install Superpowers Plugin] │ ← Same gradient CTA
|
||||
│ │
|
||||
│ ⭐ 2.5k+ 📦 10k+ 👥 500+ │
|
||||
│ │
|
||||
└─────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Focus States (Accessibility)
|
||||
|
||||
```
|
||||
Primary CTA Focus:
|
||||
┌─────────────────────────────────┐
|
||||
│ │ ← 3px outline
|
||||
│ ┌─────────────────────────────┐ │ (#6366f1)
|
||||
│ │ Install Superpowers Plugin │ │ 4px offset
|
||||
│ └─────────────────────────────┘ │
|
||||
└─────────────────────────────────┘
|
||||
|
||||
Secondary CTA Focus:
|
||||
[View Installation Guide]
|
||||
^^^^^^^^^^^^^^^^^^^^^^^^
|
||||
3px outline, 4px offset
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Hover States Visualization
|
||||
|
||||
### Feature Card Hover
|
||||
```
|
||||
Normal:
|
||||
┌─────────────────────────┐
|
||||
│ ✓ Test-Driven │
|
||||
│ Ship bug-free... │
|
||||
└─────────────────────────┘
|
||||
|
||||
Hover:
|
||||
┌─────────────────────────┐ ← Moves up 4px
|
||||
│ ✓ Test-Driven │ ← Darker background
|
||||
│ Ship bug-free... │ ← Border brightens
|
||||
└─────────────────────────┘
|
||||
```
|
||||
|
||||
### CTA Button Hover
|
||||
```
|
||||
Normal:
|
||||
┌─────────────────────────┐
|
||||
│ Install Plugin [→] │
|
||||
└─────────────────────────┘
|
||||
|
||||
Hover:
|
||||
┌─────────────────────────┐ ← Moves up 2px
|
||||
│ Install Plugin [→] │ ← Shadow intensifies
|
||||
└─────────────────────────┘ ← Arrow moves right
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Loading Animation (Entry)
|
||||
|
||||
```
|
||||
Frame 0 (0ms):
|
||||
[Content invisible, 20px down]
|
||||
|
||||
Frame 1 (150ms):
|
||||
[Opacity: 0.25, Position: -15px]
|
||||
|
||||
Frame 2 (300ms):
|
||||
[Opacity: 0.5, Position: -10px]
|
||||
|
||||
Frame 3 (450ms):
|
||||
[Opacity: 0.75, Position: -5px]
|
||||
|
||||
Frame 4 (600ms):
|
||||
[Opacity: 1.0, Position: 0px]
|
||||
[Animation complete]
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Reduced Motion (Accessibility)
|
||||
|
||||
```
|
||||
Normal (Motion ON):
|
||||
Badge: ✓ Pulse animation (2s)
|
||||
Features: ✓ Hover translate (300ms)
|
||||
CTA: ✓ Hover translate (300ms)
|
||||
Entry: ✓ Fade-in animation (600ms)
|
||||
|
||||
Reduced Motion (Motion OFF):
|
||||
Badge: ✗ No animation
|
||||
Features: ✗ No hover effect
|
||||
CTA: ✗ No hover effect
|
||||
Entry: ✗ No entry animation
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Visual Hierarchy Map
|
||||
|
||||
```
|
||||
Level 1 (Highest Priority):
|
||||
████████████████████
|
||||
Transform Claude Code
|
||||
into a Senior Developer
|
||||
(Size: 2.5rem, Weight: 800, Color: Gradient)
|
||||
|
||||
Level 2:
|
||||
█████████████
|
||||
Install Superpowers Plugin
|
||||
(Size: 1.125rem, Weight: 700, Color: White on Gradient)
|
||||
|
||||
Level 3:
|
||||
████████
|
||||
[Feature Cards]
|
||||
(Size: 1rem, Weight: 600, Color: Primary)
|
||||
|
||||
Level 4:
|
||||
██████
|
||||
Give your AI agent...
|
||||
(Size: 1.125rem, Weight: 400, Color: Secondary)
|
||||
|
||||
Level 5:
|
||||
████
|
||||
2.5k+ Stars, 10k+ Installs
|
||||
(Size: 1.25rem, Weight: 800, Color: Primary)
|
||||
|
||||
Level 6 (Lowest Priority):
|
||||
██
|
||||
View Installation Guide
|
||||
(Size: 0.95rem, Weight: 500, Color: Secondary)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Conclusion
|
||||
|
||||
This visual guide provides a comprehensive visualization of the CTA section design. Use this reference to:
|
||||
|
||||
1. **Preview the layout** before implementation
|
||||
2. **Understand spacing** and proportions
|
||||
3. **Plan responsive behavior** across devices
|
||||
4. **Verify accessibility** features
|
||||
5. **Communicate design** to stakeholders
|
||||
|
||||
For actual implementation, use the `superpowers-cta-optimized.html` file.
|
||||
|
||||
---
|
||||
|
||||
**Document Version**: 1.0
|
||||
**Date**: 2026-01-18
|
||||
**Design System**: UI/UX Pro Max
|
||||
Reference in New Issue
Block a user