ai-apps
/
project-standalo-sonic-cloud
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
project-standalo-sonic-cloud/.claude/commands/eureka/landing.md

661 lines
31 KiB
Markdown
Raw Blame History

---
description: Generate a designer-quality landing page from project documentation with AI-generated images
allowed-tools: Read, Write, Edit, Bash, Task, TodoWrite, Glob, Grep, mcp__eureka-imagen__generate_hero_image, mcp__eureka-imagen__generate_feature_icon, mcp__eureka-imagen__generate_illustration, mcp__eureka-imagen__generate_og_image, mcp__eureka-imagen__generate_logo_concept, mcp__eureka-imagen__list_available_models, mcp__eureka-imagen__check_status
---
# Eureka Landing - Landing Page Generator
**Input**: "$ARGUMENTS"
---
## PURPOSE
Generate a **designer-quality landing page** with concept branding and Q&A section based on existing project documentation. This command requires documentation to be generated first via `/eureka:index`.
### Output Features
| Feature | Description |
|---------|-------------|
| Hero Section | Compelling headline, tagline, CTA buttons |
| Features Grid | Visual feature cards with icons |
| How It Works | Step-by-step visual flow |
| Screenshots/Demo | Placeholder for app visuals |
| Q&A/FAQ | Common questions answered |
| Concept Branding | Colors, typography, visual style |
| Responsive Design | Mobile-first, works on all devices |
| Dark Mode | Automatic system preference detection |
| **AI Images** | AI-generated hero, icons, illustrations (ImageRouter) |
### Image Generation (Optional)
When `--with-images` flag is used and IMAGEROUTER_API_KEY is set, the command will:
- Generate a hero banner image
- Generate feature icons
- Generate how-it-works illustrations
- Generate OG image for social sharing
```bash
# With AI-generated images
/eureka:landing --with-images
# Without images (default)
/eureka:landing
```
---
## PREREQUISITES
```
╔══════════════════════════════════════════════════════════════╗
║ ⚠️ REQUIRES DOCUMENTATION FIRST ║
╠══════════════════════════════════════════════════════════════╣
║ ║
║ This command uses data from /eureka:index output. ║
║ ║
║ Required files: ║
║ ✓ docs/analysis.yml (or custom output dir) ║
║ ✓ docs/PROJECT_DOCUMENTATION.md ║
║ ║
║ If missing, run first: ║
║ /eureka:index ║
║ ║
╚══════════════════════════════════════════════════════════════╝
```
---
## EXECUTION FLOW
### ═══════════════════════════════════════════════════════════════
### PHASE 1: Validate Prerequisites
### ═══════════════════════════════════════════════════════════════
#### 1.1: Check for Documentation
```bash
DOCS_DIR="${ARGUMENTS:-docs}"
# Check if documentation exists
if [ ! -f "$DOCS_DIR/analysis.yml" ] && [ ! -f "$DOCS_DIR/PROJECT_DOCUMENTATION.md" ]; then
echo "❌ ERROR: Documentation not found!"
echo ""
echo "Required: $DOCS_DIR/analysis.yml or $DOCS_DIR/PROJECT_DOCUMENTATION.md"
echo ""
echo "Run first: /eureka:index"
exit 1
fi
echo "✅ Documentation found in $DOCS_DIR"
```
#### 1.2: Display Start Banner
```
╔══════════════════════════════════════════════════════════════╗
║ 🎨 EUREKA LANDING - Designer Landing Page Generator ║
╠══════════════════════════════════════════════════════════════╣
║ Creating: Hero + Features + How It Works + Q&A ║
║ Style: Modern, professional, conversion-optimized ║
╚══════════════════════════════════════════════════════════════╝
```
---
### ═══════════════════════════════════════════════════════════════
### PHASE 2: Parallel Content Generation
### ═══════════════════════════════════════════════════════════════
#### 2.1: Launch Content Generation Agents in Parallel
**CRITICAL: Launch ALL agents in a SINGLE message:**
```
Launch these 4 Task agents IN PARALLEL:
┌─────────────────────────────────────────────────────────────────┐
│ AGENT 1: Branding Concept Generator │
├─────────────────────────────────────────────────────────────────┤
│ Task tool with: │
│ subagent_type: "frontend-architect" │
│ run_in_background: true │
│ prompt: | │
│ # CONCEPT BRANDING GENERATION │
│ │
│ Read $DOCS_DIR/analysis.yml and create a branding concept. │
│ │
│ ## Output: branding.json │
│ ```json │
│ { │
│ "brand": { │
│ "name": "Project Name", │
│ "tagline": "Compelling one-liner", │
│ "value_proposition": "What makes it special" │
│ }, │
│ "colors": { │
│ "primary": "#hex - main brand color", │
│ "secondary": "#hex - accent color", │
│ "accent": "#hex - CTA/highlight color", │
│ "background": "#hex - light bg", │
│ "background_dark": "#hex - dark mode bg", │
│ "text": "#hex - primary text", │
│ "text_muted": "#hex - secondary text" │
│ }, │
│ "typography": { │
│ "heading_font": "Inter, system-ui, sans-serif", │
│ "body_font": "Inter, system-ui, sans-serif", │
│ "mono_font": "JetBrains Mono, monospace" │
│ }, │
│ "style": { │
│ "border_radius": "12px", │
│ "shadow": "0 4px 6px -1px rgba(0,0,0,0.1)", │
│ "gradient": "linear-gradient(...)" │
│ }, │
│ "icons": { │
│ "style": "lucide|heroicons|phosphor", │
│ "feature_icons": ["icon1", "icon2", ...] │
│ } │
│ } │
│ ``` │
│ │
│ Base colors on project type: │
│ - Developer tools: Blues, purples │
│ - Business apps: Blues, greens │
│ - Creative tools: Vibrant, gradients │
│ - Data/Analytics: Teals, blues │
│ │
│ Write to: $DOCS_DIR/branding.json │
└─────────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────┐
│ AGENT 2: Hero & Features Content │
├─────────────────────────────────────────────────────────────────┤
│ Task tool with: │
│ subagent_type: "technical-writer" │
│ run_in_background: true │
│ prompt: | │
│ # HERO & FEATURES CONTENT │
│ │
│ Read $DOCS_DIR/analysis.yml and create marketing content. │
│ │
│ ## Output: content.json │
│ ```json │
│ { │
│ "hero": { │
│ "headline": "Powerful, benefit-focused headline", │
│ "subheadline": "Explain the value in one sentence", │
│ "cta_primary": "Get Started", │
│ "cta_secondary": "Learn More", │
│ "social_proof": "Used by X developers" │
│ }, │
│ "features": [ │
│ { │
│ "title": "Feature Name", │
│ "description": "Benefit-focused description", │
│ "icon": "suggested-icon-name" │
│ } │
│ ], │
│ "how_it_works": [ │
│ { │
│ "step": 1, │
│ "title": "Step Title", │
│ "description": "What happens" │
│ } │
│ ], │
│ "stats": [ │
│ { "value": "10x", "label": "Faster" } │
│ ] │
│ } │
│ ``` │
│ │
│ Writing Rules: │
│ - Headlines: Benefit-focused, action-oriented │
│ - Features: Max 6, each with clear benefit │
│ - How It Works: 3-4 steps maximum │
│ - Use numbers and specifics when possible │
│ │
│ Write to: $DOCS_DIR/content.json │
└─────────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────┐
│ AGENT 3: Q&A / FAQ Generator │
├─────────────────────────────────────────────────────────────────┤
│ Task tool with: │
│ subagent_type: "technical-writer" │
│ run_in_background: true │
│ prompt: | │
│ # Q&A / FAQ GENERATION │
│ │
│ Read $DOCS_DIR/analysis.yml and PROJECT_DOCUMENTATION.md │
│ to generate comprehensive Q&A. │
│ │
│ ## Output: faq.json │
│ ```json │
│ { │
│ "categories": [ │
│ { │
│ "name": "Getting Started", │
│ "questions": [ │
│ { │
│ "q": "How do I install [Project]?", │
│ "a": "Clear, step-by-step answer" │
│ } │
│ ] │
│ }, │
│ { │
│ "name": "Features", │
│ "questions": [...] │
│ }, │
│ { │
│ "name": "Technical", │
│ "questions": [...] │
│ }, │
│ { │
│ "name": "Pricing & Support", │
│ "questions": [...] │
│ } │
│ ] │
│ } │
│ ``` │
│ │
│ Q&A Guidelines: │
│ - 3-5 questions per category │
│ - Anticipate real user questions │
│ - Answers should be concise but complete │
│ - Include code snippets where helpful │
│ - Address common concerns and objections │
│ │
│ Write to: $DOCS_DIR/faq.json │
└─────────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────┐
│ AGENT 4: SEO & Meta Content │
├─────────────────────────────────────────────────────────────────┤
│ Task tool with: │
│ subagent_type: "technical-writer" │
│ run_in_background: true │
│ prompt: | │
│ # SEO & META CONTENT │
│ │
│ Read $DOCS_DIR/analysis.yml and create SEO content. │
│ │
│ ## Output: seo.json │
│ ```json │
│ { │
│ "title": "Project Name - Tagline | Category", │
│ "description": "150-160 char meta description", │
│ "keywords": ["keyword1", "keyword2"], │
│ "og": { │
│ "title": "Open Graph title", │
│ "description": "OG description", │
│ "type": "website" │
│ }, │
│ "twitter": { │
│ "card": "summary_large_image", │
│ "title": "Twitter title", │
│ "description": "Twitter description" │
│ }, │
│ "structured_data": { │
│ "@type": "SoftwareApplication", │
│ "name": "...", │
│ "description": "..." │
│ } │
│ } │
│ ``` │
│ │
│ Write to: $DOCS_DIR/seo.json │
└─────────────────────────────────────────────────────────────────┘
```
#### 2.2: Wait for All Content Agents
```
Use TaskOutput tool to wait for each agent:
- TaskOutput with task_id from Agent 1 (branding), block: true
- TaskOutput with task_id from Agent 2 (content), block: true
- TaskOutput with task_id from Agent 3 (faq), block: true
- TaskOutput with task_id from Agent 4 (seo), block: true
```
---
### ═══════════════════════════════════════════════════════════════
### PHASE 3: Generate Landing Page HTML
### ═══════════════════════════════════════════════════════════════
#### 3.1: Generate Designer-Quality Landing Page
**Use Task tool with frontend-architect agent:**
```
Task tool with:
subagent_type: "frontend-architect"
prompt: |
# GENERATE LANDING PAGE HTML
Read these files and generate a stunning landing page:
- $DOCS_DIR/branding.json (colors, typography, style)
- $DOCS_DIR/content.json (hero, features, how-it-works)
- $DOCS_DIR/faq.json (Q&A sections)
- $DOCS_DIR/seo.json (meta tags)
## Output: $DOCS_DIR/landing.html
## Design Requirements
### Structure
```html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- SEO meta tags from seo.json -->
<!-- Fonts: Google Fonts or system fonts -->
<!-- Inline critical CSS -->
</head>
<body>
<!-- Navigation (sticky) -->
<nav>Logo | Links | CTA Button</nav>
<!-- Hero Section -->
<section class="hero">
<h1>Headline</h1>
<p>Subheadline</p>
<div class="cta-buttons">Primary | Secondary</div>
<!-- Optional: Animated gradient background -->
</section>
<!-- Social Proof / Stats -->
<section class="stats">
<div class="stat">Value + Label</div>
</section>
<!-- Features Grid -->
<section class="features">
<h2>Features</h2>
<div class="feature-grid">
<!-- 3-column grid of feature cards -->
</div>
</section>
<!-- How It Works -->
<section class="how-it-works">
<h2>How It Works</h2>
<div class="steps">
<!-- Numbered steps with visual flow -->
</div>
</section>
<!-- Q&A / FAQ -->
<section class="faq">
<h2>Frequently Asked Questions</h2>
<div class="faq-accordion">
<!-- Expandable Q&A items -->
</div>
</section>
<!-- CTA Section -->
<section class="cta-final">
<h2>Ready to Get Started?</h2>
<button>Primary CTA</button>
</section>
<!-- Footer -->
<footer>
Links | Copyright | Social
</footer>
<!-- Inline JavaScript for interactions -->
<script>
// FAQ accordion
// Smooth scroll
// Dark mode toggle
</script>
</body>
</html>
```
### Visual Design Standards
**Hero Section**:
- Full viewport height or 80vh minimum
- Gradient or subtle pattern background
- Large, bold headline (48-72px)
- Clear visual hierarchy
- Floating elements or subtle animation
**Feature Cards**:
- Icon + Title + Description
- Subtle hover effects (scale, shadow)
- Consistent spacing (24-32px gaps)
- 3-column on desktop, 1 on mobile
**How It Works**:
- Visual step indicators (1, 2, 3)
- Connecting lines or arrows
- Icons or illustrations per step
- Horizontal on desktop, vertical on mobile
**FAQ Accordion**:
- Click to expand/collapse
- Smooth animation (max-height transition)
- Plus/minus or chevron indicator
- Category grouping
**Micro-interactions**:
- Button hover: scale(1.02) + shadow
- Card hover: translateY(-4px) + shadow
- Smooth scroll for anchor links
- Fade-in on scroll (intersection observer)
### CSS Requirements
```css
/* CSS Custom Properties from branding.json */
:root {
--color-primary: ...;
--color-secondary: ...;
--font-heading: ...;
--radius: ...;
}
/* Dark mode */
@media (prefers-color-scheme: dark) {
:root {
--color-bg: var(--color-bg-dark);
...
}
}
/* Responsive breakpoints */
/* Mobile: < 640px */
/* Tablet: 640-1024px */
/* Desktop: > 1024px */
```
### JavaScript Requirements
- FAQ accordion functionality
- Smooth scroll for navigation
- Optional: Scroll-triggered animations
- Dark mode toggle (optional)
- Mobile menu toggle
### Performance
- Single HTML file (no external dependencies)
- Inline critical CSS
- Minimal JavaScript
- Optimized for Core Web Vitals
- < 100KB total size
Write complete HTML to: $DOCS_DIR/landing.html
```
---
### ═══════════════════════════════════════════════════════════════
### PHASE 4: Finalization
### ═══════════════════════════════════════════════════════════════
#### 4.1: Validate Generated Files
Verify all files exist:
- `$DOCS_DIR/branding.json`
- `$DOCS_DIR/content.json`
- `$DOCS_DIR/faq.json`
- `$DOCS_DIR/seo.json`
- `$DOCS_DIR/landing.html`
#### 4.2: Display Completion Banner
```
╔══════════════════════════════════════════════════════════════╗
║ ✅ LANDING PAGE GENERATED SUCCESSFULLY ║
╠══════════════════════════════════════════════════════════════╣
║ Output Directory: $DOCS_DIR ║
╠══════════════════════════════════════════════════════════════╣
║ Files Created: ║
║ 🎨 branding.json (Colors, typography, style guide) ║
║ 📝 content.json (Hero, features, how-it-works) ║
║ ❓ faq.json (Q&A content by category) ║
║ 🔍 seo.json (Meta tags, Open Graph, Schema) ║
║ 🌐 landing.html (Designer-quality landing page) ║
╠══════════════════════════════════════════════════════════════╣
║ Landing Page Features: ║
║ ✅ Hero with compelling headline + CTAs ║
║ ✅ Feature grid with icons ║
║ ✅ How It Works visual flow ║
║ ✅ Interactive FAQ accordion ║
║ ✅ Responsive (mobile-first) ║
║ ✅ Dark mode support ║
║ ✅ SEO optimized ║
║ ✅ Single file, no dependencies ║
╠══════════════════════════════════════════════════════════════╣
║ Next Steps: ║
║ → Open landing.html in browser to preview ║
║ → Customize colors in branding.json ║
║ → Add real screenshots/images ║
║ → Deploy to your hosting ║
╚══════════════════════════════════════════════════════════════╝
```
---
## ARGUMENTS
| Argument | Default | Description |
|----------|---------|-------------|
| `[docs_dir]` | `docs` | Directory containing documentation from /eureka:index |
| `--style` | `modern` | Design style: modern, minimal, bold, corporate |
| `--theme` | `auto` | Color theme: auto, light, dark |
## EXAMPLES
```bash
# Generate landing page from default docs directory
/eureka:landing
# Generate from custom documentation directory
/eureka:landing my-docs
# Generate with specific style
/eureka:landing --style minimal
# Generate dark-only theme
/eureka:landing --theme dark
```
---
## DESIGN STYLE OPTIONS
### Modern (Default)
- Gradient backgrounds
- Rounded corners (12-16px)
- Soft shadows
- Vibrant accent colors
- Floating elements
### Minimal
- Clean white space
- Thin borders
- Muted colors
- Typography-focused
- Subtle interactions
### Bold
- Strong colors
- Large typography
- High contrast
- Geometric shapes
- Impactful CTAs
### Corporate
- Professional blues/grays
- Structured layout
- Trust indicators
- Clean lines
- Conservative animations
---
## OUTPUT STRUCTURE
```
docs/
├── analysis.yml (from /eureka:index)
├── PROJECT_DOCUMENTATION.md
├── API_REFERENCE.md
├── COMPONENTS.md
├── QUICK_REFERENCE.md
├── index.html (documentation HTML)
│
├── branding.json (NEW - concept branding)
├── content.json (NEW - marketing content)
├── faq.json (NEW - Q&A content)
├── seo.json (NEW - SEO metadata)
└── landing.html (NEW - landing page)
```
---
## BRANDING SYSTEM
The generated branding.json provides a complete design system:
```json
{
"brand": {
"name": "Project Name",
"tagline": "Your compelling tagline",
"value_proposition": "What makes it unique"
},
"colors": {
"primary": "#6366f1",
"secondary": "#8b5cf6",
"accent": "#f59e0b",
"background": "#ffffff",
"background_dark": "#0f172a",
"text": "#1e293b",
"text_muted": "#64748b"
},
"typography": {
"heading_font": "Inter, system-ui, sans-serif",
"body_font": "Inter, system-ui, sans-serif",
"mono_font": "JetBrains Mono, Consolas, monospace"
},
"style": {
"border_radius": "12px",
"shadow_sm": "0 1px 2px rgba(0,0,0,0.05)",
"shadow_md": "0 4px 6px -1px rgba(0,0,0,0.1)",
"shadow_lg": "0 10px 15px -3px rgba(0,0,0,0.1)",
"gradient": "linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)"
}
}
```
This can be used to:
- Maintain consistent branding across all pages
- Generate CSS custom properties
- Create Figma/design tool exports
- Build component libraries
Reference in New Issue View Git Blame Copy Permalink