7b42ebd2b0
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>
523 lines
21 KiB
Markdown
523 lines
21 KiB
Markdown
# 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
|