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>
21 KiB
21 KiB
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:
- Preview the layout before implementation
- Understand spacing and proportions
- Plan responsive behavior across devices
- Verify accessibility features
- 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