heraspec 0.1.13 → 0.1.15

package/dist/core/templates/skills/design-system/skill.md

@@ -0,0 +1,176 @@
+# Skill: Design System Reference (Cross-Cutting)
+
+## Purpose
+
+This skill provides access to **54 real-world design systems** extracted from production websites (Stripe, Vercel, Linear, Supabase, Apple, etc.) in the Google Stitch DESIGN.md format. Each design system contains detailed color palettes, typography rules, component stylings, shadow systems, and agent-ready prompts.
+
+Use this skill to create UIs that match the look and feel of specific well-known brands, or to find design inspiration from real-world references.
+
+## When to Use
+
+- When user requests UI "like Stripe" / "inspired by Vercel" / "Linear-style"
+- When building a product in a specific industry (fintech, devtools, AI) and need proven design patterns
+- When you need precise color values, font weights, shadow values from real design systems
+- When creating a DESIGN.md for a new project
+- When comparing design approaches (e.g., Stripe vs Vercel shadow philosophies)
+
+## Prerequisites
+
+None — this skill uses the same search engine as UI/UX skill.
+
+## Step-by-Step Process
+
+### Step 1: Identify the Design Reference
+
+Determine which design system(s) are relevant:
+
+**By brand name:**
+```bash
+python3 scripts/search.py "stripe" --domain design-system
+python3 scripts/search.py "linear dark mode" --domain design-system  
+python3 scripts/search.py "vercel minimal" --domain design-system
+```
+
+**By style/industry:**
+```bash
+python3 scripts/search.py "fintech premium dark" --domain design-system
+python3 scripts/search.py "developer tools dark emerald" --domain design-system
+python3 scripts/search.py "ai platform warm editorial" --domain design-system
+python3 scripts/search.py "enterprise blue structured" --domain design-system
+```
+
+**By visual technique:**
+```bash
+python3 scripts/search.py "shadow-as-border" --domain design-system
+python3 scripts/search.py "neon glow dark" --domain design-system
+python3 scripts/search.py "blue-tinted shadows" --domain design-system
+python3 scripts/search.py "luminance stacking" --domain design-system
+```
+
+### Step 2: Read the Full DESIGN.md
+
+After finding a matching brand, read the complete DESIGN.md from knowledge base:
+
+```
+knowledge/design-systems/<folder>/DESIGN.md
+```
+
+The `Folder` field in search results tells you the directory name. For example:
+- Stripe → `knowledge/design-systems/stripe/DESIGN.md`
+- Linear → `knowledge/design-systems/linear.app/DESIGN.md`
+- Supabase → `knowledge/design-systems/supabase/DESIGN.md`
+
+### Step 3: Apply the Design System
+
+Use the `Agent_Quick_Prompt` from search results as a starting point, then reference the full DESIGN.md for details:
+
+1. **Colors**: Apply exact hex values from Color Palette section
+2. **Typography**: Use specified fonts, weights, and letter-spacing
+3. **Components**: Follow button, card, input, navigation specifications
+4. **Shadows**: Use exact shadow values (this is often what makes a design "feel" right)
+5. **Spacing**: Follow the spacing scale and border-radius values
+6. **Do's/Don'ts**: Respect the design system's guardrails
+
+### Step 4: Combine with UI/UX Skill
+
+For maximum quality, combine design-system references with other UI/UX skill searches:
+
+```bash
+# 1. Get the design system reference
+python3 scripts/search.py "stripe" --domain design-system
+
+# 2. Get UX guidelines
+python3 scripts/search.py "animation" --domain ux
+python3 scripts/search.py "accessibility" --domain ux
+
+# 3. Get page structure
+python3 scripts/search.py "pricing plans" --domain pages
+
+# 4. Get stack-specific guidelines
+python3 scripts/search.py "responsive layout" --stack html-tailwind
+```
+
+## Available Design Systems
+
+### By Category
+
+| Category | Count | Examples |
+|----------|-------|---------|
+| **AI & ML** | 12 | Claude, Mistral AI, Ollama, Cursor, xAI, ElevenLabs |
+| **Developer Tools** | 14 | Vercel, Linear, Supabase, Raycast, Warp, Sentry |
+| **Infrastructure** | 6 | Stripe, MongoDB, HashiCorp, ClickHouse, Sanity |
+| **Design & Productivity** | 10 | Notion, Figma, Framer, Miro, Airtable, Pinterest |
+| **Fintech & Crypto** | 4 | Coinbase, Revolut, Wise, Kraken |
+| **Enterprise & Consumer** | 8 | Apple, Airbnb, Spotify, BMW, SpaceX, Uber, IBM |
+
+### By Theme
+
+| Theme | Brands |
+|-------|--------|
+| **Dark-mode native** | Linear, Supabase, Cursor, Spotify, SpaceX, Warp, Resend |
+| **Light-first** | Stripe, Vercel, Notion, Apple, Mintlify, Ollama |
+| **Both modes** | IBM, Uber, Framer, Lovable, Cohere, Together AI |
+
+### By Design Philosophy
+
+| Philosophy | Brand | Key Technique |
+|------------|-------|---------------|
+| Weight-as-luxury | Stripe | font-weight: 300 for elegance |
+| Shadow-as-border | Vercel | box-shadow: 0px 0px 0px 1px rgba() |
+| Luminance stacking | Linear | Background opacity stepping for depth |
+| Warm editorial | Claude | Terracotta accent, anti-tech-cold palette |
+| Terminal-native | Resend, Warp | Monospace accents, dark void backgrounds |
+| Full-bleed imagery | SpaceX | Text over cinematic photos |
+
+## Search Reference
+
+```bash
+# Search by brand
+python3 scripts/search.py "<brand-name>" --domain design-system
+
+# Search by keywords
+python3 scripts/search.py "<style-keywords>" --domain design-system
+
+# Search with semantic mode
+python3 scripts/search.py "elegant dark developer tool" --domain design-system --mode hybrid
+
+# Multiple results
+python3 scripts/search.py "fintech" --domain design-system -n 5
+```
+
+## DESIGN.md Format (Google Stitch Standard)
+
+Each DESIGN.md file contains 9 standard sections:
+
+1. **Visual Theme & Atmosphere** — Design philosophy, mood, density
+2. **Color Palette & Roles** — Hex values with semantic roles
+3. **Typography Rules** — Font families, full type scale table
+4. **Component Stylings** — Buttons, cards, inputs with states
+5. **Layout Principles** — Spacing scale, grid, whitespace
+6. **Depth & Elevation** — Shadow system, surface hierarchy
+7. **Do's and Don'ts** — Design guardrails, anti-patterns
+8. **Responsive Behavior** — Breakpoints, touch targets
+9. **Agent Prompt Guide** — Quick reference prompts for AI agents
+
+## Updating Design Systems
+
+Design system files are sourced from [awesome-design-md](https://github.com/VoltAgent/awesome-design-md). To update:
+
+1. Pull latest from `awesome-design-md` repository
+2. Copy updated `DESIGN.md` files to `knowledge/design-systems/<folder>/`
+3. Update `design-systems.csv` in `data/` if new brands are added
+4. Update `index.json` in `knowledge/design-systems/` with new entries
+
+## Tips for Best Results
+
+1. **Be specific** — "dark mode with purple accents" is better than "dark"
+2. **Reference real brands** — "like Stripe" gives much better results than "fintech"
+3. **Read the full DESIGN.md** — The CSV gives a summary, but the DESIGN.md has full specs
+4. **Combine skills** — Design-system + UI/UX + Stack = production-quality output
+5. **Use Agent_Quick_Prompt** — Each entry has a ready-to-use prompt in the CSV
+
+## Links to Other Skills
+
+- **ui-ux**: Use together for comprehensive design system + UX guidelines
+- **documents**: Use to document your project's design system
+- **content-optimization**: Use to optimize CTA placement with brand colors

package/dist/core/templates/skills/design-system-skill.md

@@ -0,0 +1,176 @@
+# Skill: Design System Reference (Cross-Cutting)
+
+## Purpose
+
+This skill provides access to **54 real-world design systems** extracted from production websites (Stripe, Vercel, Linear, Supabase, Apple, etc.) in the Google Stitch DESIGN.md format. Each design system contains detailed color palettes, typography rules, component stylings, shadow systems, and agent-ready prompts.
+
+Use this skill to create UIs that match the look and feel of specific well-known brands, or to find design inspiration from real-world references.
+
+## When to Use
+
+- When user requests UI "like Stripe" / "inspired by Vercel" / "Linear-style"
+- When building a product in a specific industry (fintech, devtools, AI) and need proven design patterns
+- When you need precise color values, font weights, shadow values from real design systems
+- When creating a DESIGN.md for a new project
+- When comparing design approaches (e.g., Stripe vs Vercel shadow philosophies)
+
+## Prerequisites
+
+None — this skill uses the same search engine as UI/UX skill.
+
+## Step-by-Step Process
+
+### Step 1: Identify the Design Reference
+
+Determine which design system(s) are relevant:
+
+**By brand name:**
+```bash
+python3 scripts/search.py "stripe" --domain design-system
+python3 scripts/search.py "linear dark mode" --domain design-system  
+python3 scripts/search.py "vercel minimal" --domain design-system
+```
+
+**By style/industry:**
+```bash
+python3 scripts/search.py "fintech premium dark" --domain design-system
+python3 scripts/search.py "developer tools dark emerald" --domain design-system
+python3 scripts/search.py "ai platform warm editorial" --domain design-system
+python3 scripts/search.py "enterprise blue structured" --domain design-system
+```
+
+**By visual technique:**
+```bash
+python3 scripts/search.py "shadow-as-border" --domain design-system
+python3 scripts/search.py "neon glow dark" --domain design-system
+python3 scripts/search.py "blue-tinted shadows" --domain design-system
+python3 scripts/search.py "luminance stacking" --domain design-system
+```
+
+### Step 2: Read the Full DESIGN.md
+
+After finding a matching brand, read the complete DESIGN.md from knowledge base:
+
+```
+knowledge/design-systems/<folder>/DESIGN.md
+```
+
+The `Folder` field in search results tells you the directory name. For example:
+- Stripe → `knowledge/design-systems/stripe/DESIGN.md`
+- Linear → `knowledge/design-systems/linear.app/DESIGN.md`
+- Supabase → `knowledge/design-systems/supabase/DESIGN.md`
+
+### Step 3: Apply the Design System
+
+Use the `Agent_Quick_Prompt` from search results as a starting point, then reference the full DESIGN.md for details:
+
+1. **Colors**: Apply exact hex values from Color Palette section
+2. **Typography**: Use specified fonts, weights, and letter-spacing
+3. **Components**: Follow button, card, input, navigation specifications
+4. **Shadows**: Use exact shadow values (this is often what makes a design "feel" right)
+5. **Spacing**: Follow the spacing scale and border-radius values
+6. **Do's/Don'ts**: Respect the design system's guardrails
+
+### Step 4: Combine with UI/UX Skill
+
+For maximum quality, combine design-system references with other UI/UX skill searches:
+
+```bash
+# 1. Get the design system reference
+python3 scripts/search.py "stripe" --domain design-system
+
+# 2. Get UX guidelines
+python3 scripts/search.py "animation" --domain ux
+python3 scripts/search.py "accessibility" --domain ux
+
+# 3. Get page structure
+python3 scripts/search.py "pricing plans" --domain pages
+
+# 4. Get stack-specific guidelines
+python3 scripts/search.py "responsive layout" --stack html-tailwind
+```
+
+## Available Design Systems
+
+### By Category
+
+| Category | Count | Examples |
+|----------|-------|---------|
+| **AI & ML** | 12 | Claude, Mistral AI, Ollama, Cursor, xAI, ElevenLabs |
+| **Developer Tools** | 14 | Vercel, Linear, Supabase, Raycast, Warp, Sentry |
+| **Infrastructure** | 6 | Stripe, MongoDB, HashiCorp, ClickHouse, Sanity |
+| **Design & Productivity** | 10 | Notion, Figma, Framer, Miro, Airtable, Pinterest |
+| **Fintech & Crypto** | 4 | Coinbase, Revolut, Wise, Kraken |
+| **Enterprise & Consumer** | 8 | Apple, Airbnb, Spotify, BMW, SpaceX, Uber, IBM |
+
+### By Theme
+
+| Theme | Brands |
+|-------|--------|
+| **Dark-mode native** | Linear, Supabase, Cursor, Spotify, SpaceX, Warp, Resend |
+| **Light-first** | Stripe, Vercel, Notion, Apple, Mintlify, Ollama |
+| **Both modes** | IBM, Uber, Framer, Lovable, Cohere, Together AI |
+
+### By Design Philosophy
+
+| Philosophy | Brand | Key Technique |
+|------------|-------|---------------|
+| Weight-as-luxury | Stripe | font-weight: 300 for elegance |
+| Shadow-as-border | Vercel | box-shadow: 0px 0px 0px 1px rgba() |
+| Luminance stacking | Linear | Background opacity stepping for depth |
+| Warm editorial | Claude | Terracotta accent, anti-tech-cold palette |
+| Terminal-native | Resend, Warp | Monospace accents, dark void backgrounds |
+| Full-bleed imagery | SpaceX | Text over cinematic photos |
+
+## Search Reference
+
+```bash
+# Search by brand
+python3 scripts/search.py "<brand-name>" --domain design-system
+
+# Search by keywords
+python3 scripts/search.py "<style-keywords>" --domain design-system
+
+# Search with semantic mode
+python3 scripts/search.py "elegant dark developer tool" --domain design-system --mode hybrid
+
+# Multiple results
+python3 scripts/search.py "fintech" --domain design-system -n 5
+```
+
+## DESIGN.md Format (Google Stitch Standard)
+
+Each DESIGN.md file contains 9 standard sections:
+
+1. **Visual Theme & Atmosphere** — Design philosophy, mood, density
+2. **Color Palette & Roles** — Hex values with semantic roles
+3. **Typography Rules** — Font families, full type scale table
+4. **Component Stylings** — Buttons, cards, inputs with states
+5. **Layout Principles** — Spacing scale, grid, whitespace
+6. **Depth & Elevation** — Shadow system, surface hierarchy
+7. **Do's and Don'ts** — Design guardrails, anti-patterns
+8. **Responsive Behavior** — Breakpoints, touch targets
+9. **Agent Prompt Guide** — Quick reference prompts for AI agents
+
+## Updating Design Systems
+
+Design system files are sourced from [awesome-design-md](https://github.com/VoltAgent/awesome-design-md). To update:
+
+1. Pull latest from `awesome-design-md` repository
+2. Copy updated `DESIGN.md` files to `knowledge/design-systems/<folder>/`
+3. Update `design-systems.csv` in `data/` if new brands are added
+4. Update `index.json` in `knowledge/design-systems/` with new entries
+
+## Tips for Best Results
+
+1. **Be specific** — "dark mode with purple accents" is better than "dark"
+2. **Reference real brands** — "like Stripe" gives much better results than "fintech"
+3. **Read the full DESIGN.md** — The CSV gives a summary, but the DESIGN.md has full specs
+4. **Combine skills** — Design-system + UI/UX + Stack = production-quality output
+5. **Use Agent_Quick_Prompt** — Each entry has a ready-to-use prompt in the CSV
+
+## Links to Other Skills
+
+- **ui-ux**: Use together for comprehensive design system + UX guidelines
+- **documents**: Use to document your project's design system
+- **content-optimization**: Use to optimize CTA placement with brand colors

package/dist/core/templates/skills/documents/skill.md

@@ -0,0 +1,104 @@
+# Skill: Documents (Cross-Cutting & Multi-Format)
+
+## Purpose
+
+This skill is used to create comprehensive documentation for both technical and end-user audiences. It supports parallel generation of Markdown files (for repository/GitHub) and interactive HTML files (for browser-based manuals).
+
+## Core Requirements
+
+### 1. Multi-Format Output
+Every documentation task should ideally generate four versions:
+- `documentation.txt`: A concise, text-only overview for quick reading and AI context.
+- `documentation.md`: High-quality Markdown for version control and GitHub READMEs.
+- `documentation.html`: An interactive, premium documentation page with sidebar navigation.
+- `documentation-landing-page.html`: A visual, high-end landing page to showcase the project/plugin.
+
+### 2. Dynamic Design (Not Fixed Templates)
+- **Do NOT follow a rigid template**: The Agent must **design** the documentation layout and content structure specifically for the project.
+- **Synergy with ui-ux**: use of the `ui-ux` skill is **MANDATORY** for `documentation.html` and `documentation-landing-page.html`.
+
+### 3. Standard Quality Structure (Mandatory)
+To ensure clarity and completeness, the generated documentation MUST include:
+
+#### A. Interactive Documentation (documentation.html)
+1.  **Quick Start**: Clear steps to get running in < 2 minutes.
+2.  **System Requirements**: OS, versions, dependencies.
+3.  **Installation & Setup**: Detailed step-by-step guide.
+4.  **Configuration**: Explanation of all settings (config files, UI settings).
+5.  **Core Features**: Deep dive into each component found in `heraspec/specs/`.
+6.  **Technical Reference**: (For Devs) API endpoints, Hooks, Filters, Functions.
+7.  **Troubleshooting & FAQ**: Common issues and solutions.
+
+#### B. Premium Landing Page (documentation-landing-page.html)
+1.  **Hero Section**: High-impact headline and clear sub-headline.
+2.  **Value Proposition**: Briefly explain "The Problem" vs "The Solution".
+3.  **Feature Showcase**: A visual grid of key benefits with icons/images.
+4.  **How It Works**: A simplified 1-2-3 step process of using the project.
+5.  **CTA (Call to Action)**: Prominent buttons to "Get Started" or "View Docs".
+
+### 4. Visual Excellence
+- Use gradients, smooth animations (fade-in, slide), and premium fonts (e.g., Inter, Montserrat).
+- The HTML documentation should feel like a modern SaaS dashboard or a high-end technical manual.
+
+### 4. Project-Wide Scope
+When tasked with generating documentation for the entire project:
+- **Data Source**: Agent MUST read `heraspec/project.md` and ALL files in `heraspec/specs/`.
+- **Synthesis**: Agent must combine information from all components and features into a unified manual.
+- **Landing Page**: Should serve as the project homepage, summarizing the main value proposition and key features across all modules.
+
+## Implementation Steps
+
+### Step 1: Intelligence Gathering & Design Planning
+1. **Analyze Project**: Scan all relevant `.md` files in the project. Understand the core purpose and technical details.
+2. **Enforce UI/UX Dependency**:
+   - Check if `heraspec/skills/ui-ux/` exists.
+   - If missing: **Execute `heraspec skill add ui-ux`** immediately. Do NOT proceed with HTML generation until this skill is available.
+3. **Define Design System**: Consult the `ui-ux` skill to establish a visual language (colors, fonts, animation styles).
+4. **Plan Structures**: Outline what needs to go into the `.txt`, `.md`, and `.html` versions.
+
+### Step 2: Constructing Documentation Assets
+1. **Compose documentation.txt & .md**: Focus on clarity and technical accuracy.
+2. **Develop documentation.html**: Build a split-panel layout (Sidebar + Content). DO NOT just fill a template; **write the HTML/CSS/JS** needed to make it look premium and project-specific.
+3. **Design documentation-landing-page.html**: Create a compelling Hero section and feature showcase. Link to the main docs.
+
+## Required Input
+
+- **Project Context**: The name of the plugin/project (e.g., "polyutilities").
+- **Specs/Docs**: All existing documentation and specification files.
+- **Design Guidelines**: Inputs from the `ui-ux` skill.
+
+## Expected Output (Save to /documentations/)
+
+**CRITICAL**: All files MUST be placed in a `/documentations` folder at the project root. If this folder does not exist, the Agent MUST create it first.
+
+- `/documentations/documentation.txt`: Plain text overview.
+- `/documentations/documentation.md`: Markdown version.
+- `/documentations/documentation.html`: Interactive split-panel HTML.
+- `/documentations/documentation-landing-page.html`: Visual landing page.
+- `/documentations/style.css` & `/documentations/landing-style.css`: Custom-generated styles.
+- `/documentations/script.js` & `/documentations/landing-script.js`: Interactive logic.
+
+## Tone & Rules
+
+- **Consistent Content**: The core information must be synchronized across all formats.
+- **Design Autonomy**: The Agent is responsible for the final aesthetic and structural quality.
+- **Visual Impact**: Documentation must WOW the user with its premium feel.
+
+## Reference Templates
+These are provided as starting points or inspiration. The Agent should feel free to expand or modify them to suit the project:
+
+- `templates/documentation.html` - Base HTML documentation layout
+- `templates/documentation-landing-page.html` - Premium Landing Page layout
+- `templates/style.css` - Premium styles for HTML documentation
+- `templates/landing-style.css` - Premium styles for Landing Page
+- `templates/script.js` - Interactive logic for HTML documentation
+- `templates/landing-script.js` - Interactive logic for Landing Page
+- `templates/technical-doc-template.md` - Technical documentation
+- `templates/user-guide-template.md` - User guide
+- `templates/api-doc-template.md` - API documentation
+- `templates/changelog-template.md` - Changelog template
+
+## Links to Other Skills
+
+- **ui-ux**: ESSENTIAL. Use this to determine the look and feel of the HTML documentation.
+- **content-optimization**: Use to ensure the text is clear and professional.

package/dist/core/templates/skills/documents/templates/documentation-landing-page.html

@@ -1,63 +1,63 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>{{title}} - Welcome</title>
-    <link rel="stylesheet" href="landing-style.css">
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap" rel="stylesheet">
-</head>
-<body>
-    <nav class="navbar">
-        <div class="container">
-            <span class="logo">{{title}}</span>
-            <div class="nav-links">
-                <a href="#features">Features</a>
-                <a href="documentation.html" class="btn-primary">View Docs</a>
-            </div>
-        </div>
-    </nav>
-
-    <header class="hero">
-        <div class="container hero-content">
-            <!-- AI: Design a unique Hero section with high-impact text -->
-            <h1 class="fade-in">{{title}}</h1>
-            <p class="fade-in delay-1">{{description}}</p>
-            <div class="hero-btns fade-in delay-2">
-                <a href="documentation.html" class="btn-primary btn-lg">Get Started</a>
-                <a href="#features" class="btn-outline btn-lg">Learn More</a>
-            </div>
-        </div>
-    </header>
-
-    <!-- AI: Construct a Problem vs Solution / Value Prop section here if needed -->
-
-    <section id="features" class="features">
-        <div class="container">
-            <h2 class="section-title">Why Choose {{title}}?</h2>
-            <!-- AI: Dynamically create feature showcase based on project specs -->
-            <div class="feature-grid">
-                {{feature_cards}}
-            </div>
-        </div>
-    </section>
-
-    <!-- AI: Add a 'How it Works' or 'Gallery' section here -->
-
-    <section class="cta">
-        <div class="container">
-            <h2>Ready to dive in?</h2>
-            <p>Explore the full potential and detailed implementation guides.</p>
-            <a href="documentation.html" class="btn-primary btn-lg">View Detailed Documentation</a>
-        </div>
-    </section>
-
-    <footer class="footer">
-        <div class="container">
-            <p>&copy; {{year}} {{author|default:"HeraSpec"}}. Built for excellence.</p>
-        </div>
-    </footer>
-
-    <script src="landing-script.js"></script>
-</body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{{title}} - Welcome</title>
+    <link rel="stylesheet" href="landing-style.css">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap" rel="stylesheet">
+</head>
+<body>
+    <nav class="navbar">
+        <div class="container">
+            <span class="logo">{{title}}</span>
+            <div class="nav-links">
+                <a href="#features">Features</a>
+                <a href="documentation.html" class="btn-primary">View Docs</a>
+            </div>
+        </div>
+    </nav>
+
+    <header class="hero">
+        <div class="container hero-content">
+            <!-- AI: Design a unique Hero section with high-impact text -->
+            <h1 class="fade-in">{{title}}</h1>
+            <p class="fade-in delay-1">{{description}}</p>
+            <div class="hero-btns fade-in delay-2">
+                <a href="documentation.html" class="btn-primary btn-lg">Get Started</a>
+                <a href="#features" class="btn-outline btn-lg">Learn More</a>
+            </div>
+        </div>
+    </header>
+
+    <!-- AI: Construct a Problem vs Solution / Value Prop section here if needed -->
+
+    <section id="features" class="features">
+        <div class="container">
+            <h2 class="section-title">Why Choose {{title}}?</h2>
+            <!-- AI: Dynamically create feature showcase based on project specs -->
+            <div class="feature-grid">
+                {{feature_cards}}
+            </div>
+        </div>
+    </section>
+
+    <!-- AI: Add a 'How it Works' or 'Gallery' section here -->
+
+    <section class="cta">
+        <div class="container">
+            <h2>Ready to dive in?</h2>
+            <p>Explore the full potential and detailed implementation guides.</p>
+            <a href="documentation.html" class="btn-primary btn-lg">View Detailed Documentation</a>
+        </div>
+    </section>
+
+    <footer class="footer">
+        <div class="container">
+            <p>&copy; {{year}} {{author|default:"HeraSpec"}}. Built for excellence.</p>
+        </div>
+    </footer>
+
+    <script src="landing-script.js"></script>
+</body>
+</html>