@lebtiga/sonic-agent 1.0.0

package/plugin/skills/seo-qa/templates/schema-service.json

@@ -0,0 +1,36 @@
+{
+  "@context": "https://schema.org",
+  "@type": "Service",
+  "serviceType": "{{SERVICE_NAME}}",
+  "name": "{{PAGE_TITLE}}",
+  "description": "{{SERVICE_DESCRIPTION}}",
+  "url": "{{PAGE_URL}}",
+  "provider": {
+    "@type": "LocalBusiness",
+    "name": "{{BUSINESS_NAME}}",
+    "telephone": "{{PHONE}}",
+    "url": "{{HOMEPAGE_URL}}"
+  },
+  "areaServed": {
+    "@type": "City",
+    "name": "{{CITY}}"
+  },
+  "hasOfferCatalog": {
+    "@type": "OfferCatalog",
+    "name": "{{SERVICE_NAME}} Options",
+    "itemListElement": [
+      {
+        "@type": "Offer",
+        "itemOffered": {
+          "@type": "Service",
+          "name": "{{OFFER_1_NAME}}"
+        }
+      }
+    ]
+  },
+  "aggregateRating": {
+    "@type": "AggregateRating",
+    "ratingValue": "{{AVERAGE_RATING}}",
+    "reviewCount": "{{REVIEW_COUNT}}"
+  }
+}

package/plugin/skills/seo-qa/templates/seo-qa-report-template.md

@@ -0,0 +1,90 @@
+# SEO QA REPORT — [Site Name]
+
+**Scanned:** [Date] · **Pages scanned:** [N] · **Issues found:** [N]
+
+## 📊 Summary
+
+| Severity | Count | Status |
+|----------|-------|--------|
+| 🔴 Critical | [N] | [Block ship / Ship-ready] |
+| 🟡 Important | [N] | [Fix recommended] |
+| 🟢 Nice-to-have | [N] | [Optional] |
+
+## 🔴 Critical Issues (BLOCKERS)
+
+### Duplicate H1s
+
+[N] pages share the same H1. Examples:
+- `https://example.com/page-a` and `https://example.com/page-b` both have `<h1>HVAC Services</h1>`
+- *...etc*
+
+**Recommended fix:** Rebuild H1s using template `[Service] in [City], [State]`
+
+---
+
+### Duplicate meta descriptions
+
+[N] pages share the same meta description.
+
+[List with URLs]
+
+---
+
+### Missing meta descriptions
+
+[N] pages have no meta description.
+
+[List with URLs]
+
+---
+
+## 🟡 Important Issues
+
+### Missing schema markup
+
+[N] pages have no JSON-LD structured data.
+
+**Affected:**
+- [URL] (recommended: LocalBusiness)
+- [URL] (recommended: Service)
+- *...etc*
+
+---
+
+### Image alt text issues
+
+[N] images have generic or missing alt text.
+
+[Examples]
+
+---
+
+## 🟢 Nice-to-have
+
+### Missing Open Graph tags
+
+[N] pages missing `og:image`, `og:title`, or `og:description`.
+
+---
+
+## ✅ Passing Checks
+
+- [x] Every page has exactly 1 H1
+- [x] Heading hierarchy correct
+- [x] Canonical tags present on all pages
+- [x] Internal links healthy (no broken)
+
+## 📋 Sitemap
+
+- ✅ `sitemap.xml` generated with [N] URLs
+- 📤 Submit to Google Search Console: `https://search.google.com/search-console`
+
+## 🛠️ Next Steps
+
+1. [Action item with URLs to fix]
+2. [Action item]
+3. [Action item]
+
+---
+
+*Report generated by Sonic ⚡ SEO QA skill*

package/plugin/skills/visual-identity/SKILL.md

@@ -0,0 +1,109 @@
+---
+name: visual-identity
+version: 1.0.0
+description: Generate a custom visual identity (color palette, typography, image style, mood board) based on the Brand Brief. Outputs a STYLE-GUIDE.md that informs every design decision downstream — theme, hero images, page layouts. Run AFTER brand-philosophy, BEFORE any design or theme work.
+---
+
+# Visual Identity Skill
+
+Translates the Brand Brief into concrete visual decisions. Every choice traceable back to a brand pillar — no random color picks.
+
+## When to use this
+
+- Right AFTER the `brand-philosophy` skill produces a Brand Brief
+- BEFORE any theme work, frontend design, or image generation
+- The output of this skill is what `frontend-design`, `wordpress-pro`, and `website-image-gen` all reference
+
+## Inputs
+
+- `BRAND-BRIEF.md` (required — must already exist)
+- User's preferences if they have any (existing brand colors, logos, fonts to keep)
+- Reference images/sites the user mentioned (if provided)
+
+## Output
+
+A `STYLE-GUIDE.md` saved at the project workspace root containing:
+
+1. **Color Palette**
+   - Primary (1 color, with reasoning)
+   - Secondary / Accent (1-2 colors)
+   - Neutrals (3-5 grays/off-whites)
+   - Semantic (success/warning/danger)
+   - Hex codes for all
+2. **Typography**
+   - Display font (for headlines)
+   - Body font
+   - Pairing reasoning (why these two work together for THIS brand)
+3. **Image Style**
+   - Photography type (raw documentary / clean studio / lifestyle / candid)
+   - Lighting style (golden hour / overcast / natural daylight / dramatic)
+   - Composition rules (rule of thirds / wide shots / close-ups)
+   - People in images: age range, attire, ethnicity guidance
+   - What the images should AVOID (stock-photo tropes, fake smiles, etc.)
+4. **Iconography**
+   - Style (line / filled / 3D / illustrative)
+   - Source (Heroicons / Lucide / custom)
+   - **Size constraints** (HARD LIMITS — enforced in CSS):
+     - Hero decorative: 120px mobile / 200px desktop, NEVER >25% of hero height
+     - Section header: 32-48px (matches H2)
+     - Service card: 48-80px (centered, top of card)
+     - Feature list: 24px inline
+     - UI (buttons, nav): 16-20px
+     - Avatar/logo: 40-64px
+   - **Never do:**
+     - ❌ Icons >300px anywhere
+     - ❌ Hero icon larger than the headline next to it
+     - ❌ Service card icon taking >40% of card height
+     - ❌ Percentage widths without `max-width` constraints
+5. **Mood Board**
+   - 3-5 reference brands/sites that capture the right vibe
+   - Specific elements to take from each
+6. **Don't-do List**
+   - Concrete examples of what would feel wrong for this brand
+
+## The Process
+
+### Step 1: Read the Brand Brief
+Pull out the brand attitude, pillars, and "feeling" sections. Every visual choice must tie back to these.
+
+### Step 2: Make decisions, not suggestions
+Don't ask the user "what colors do you want?" — make a recommendation based on the brief, then ask if it lands.
+
+> **Bad:**
+> "What colors should we use?"
+>
+> **Good:**
+> "Based on your brand brief — confident, no-BS, premium HVAC — I'm picking:
+> - Primary: **#0B1F3A** (deep navy — premium without being cold)
+> - Accent: **#FF6B35** (warm orange — urgency + warmth, ties to fire/HVAC)
+> - Neutrals: pure whites + warm grays (avoids cold corporate feel)
+>
+> This palette would feel wrong for: budget brands (too rich) or playful brands (too serious). Does it land?"
+
+### Step 3: Show before locking in
+For each major decision, describe the visual outcome in words concrete enough to picture. Get a thumbs up before moving on.
+
+### Step 4: Synthesize into the Style Guide
+Compile all decisions into `STYLE-GUIDE.md`. This file gets referenced by:
+- `frontend-design` for layouts
+- `wordpress-pro` for theme/CSS
+- `website-image-gen` for image prompts (image style section feeds directly into prompts)
+
+## Templates
+
+See `templates/style-guide-template.md` for the output format.
+
+## After the Style Guide
+
+Once the user approves, hand off to:
+- `frontend-design` (for site/page layouts) AND
+- `wordpress-pro` (for theme implementation)
+
+These two work in parallel during Stage 3 of the build.
+
+## What NOT to do
+
+- ❌ Don't use stock palette generators — every choice must come from the brand brief
+- ❌ Don't pick "safe" defaults (blue + white + gray) unless the brief actually points there
+- ❌ Don't skip the don't-do list — knowing what's wrong is half the design clarity
+- ❌ Don't proceed without user sign-off on the style guide

package/plugin/skills/visual-identity/templates/style-guide-template.md

@@ -0,0 +1,108 @@
+# STYLE GUIDE — [Project Name]
+
+*Derived from BRAND-BRIEF.md — every decision below ties back to brand pillars.*
+
+## Color Palette
+
+### Primary
+- **`#000000`** — [Color Name]
+- *Why this color for this brand:* [reasoning tied to brand attitude]
+
+### Secondary / Accent
+- **`#000000`** — [Color Name]
+- **`#000000`** — [Color Name]
+- *Use for:* CTAs, hover states, highlights
+
+### Neutrals
+- **`#FFFFFF`** — White
+- **`#F8F8F7`** — Off-white (page bg)
+- **`#3A3A3A`** — Body text
+- **`#1A1A1A`** — Headings
+- **`#9E9E9E`** — Muted / placeholder
+
+### Semantic
+- **Success:** `#00C853`
+- **Warning:** `#FFB300`
+- **Danger:** `#D32F2F`
+
+## Typography
+
+### Display (Headlines)
+- **Font:** [Font Name]
+- **Source:** Google Fonts / Adobe Fonts / system
+- **Why:** [reasoning]
+
+### Body
+- **Font:** [Font Name]
+- **Source:** Google Fonts / Adobe Fonts / system
+- **Why:** [reasoning]
+
+### Pairing Logic
+[Why these two fonts work for THIS brand specifically]
+
+## Image Style
+
+### Photography Type
+- [Raw documentary / Clean studio / Lifestyle / Candid / etc.]
+
+### Lighting
+- [Golden hour / Overcast / Natural daylight / Dramatic / etc.]
+
+### Composition
+- [Rule of thirds / Wide environmental / Close-up / etc.]
+
+### People
+- Age range: [...]
+- Attire: [...]
+- Expression: [...]
+- Ethnicity guidance: [...]
+
+### AVOID in images
+- ❌ [Specific tropes to never include]
+- ❌ [...]
+
+## Iconography
+
+- **Style:** [Line / Filled / 3D / Illustrated]
+- **Source:** [Heroicons / Lucide / custom]
+- **Stroke width:** [if line-based]
+
+### 🔒 Size constraints (ENFORCE in CSS — never let LLM decide)
+
+| Use case | Max size | Notes |
+|----------|----------|-------|
+| Hero decorative icon | 120px mobile / 200px desktop | Never >25% of hero height |
+| Section header icon | 32-48px | Matches H2 size |
+| Service card icon | 48-80px | Top of card, centered |
+| Feature list icon | 24px | Inline with text |
+| UI icon (button, nav) | 16-20px | Match text baseline |
+| Avatar / logo | 40-64px | Header sizes |
+
+### 🚫 Never do
+
+- ❌ Icons >300px anywhere (looks amateur)
+- ❌ Hero icon larger than the headline next to it
+- ❌ Service card icon taking >40% of card height
+- ❌ Percentage widths without `max-width` constraints
+- ❌ Inline `<svg>` without explicit `width`/`height` attributes
+
+## Mood Board
+
+Sites/brands that capture the right vibe:
+
+1. **[Brand Name]** — [what to take from it]
+2. **[Brand Name]** — [what to take from it]
+3. **[Brand Name]** — [what to take from it]
+
+## Don't-Do List
+
+This brand should NEVER look like:
+
+- ❌ [Specific anti-example]
+- ❌ [Specific anti-example]
+- ❌ [Specific anti-example]
+
+---
+
+*Approved by: [user] on [date]*
+*Next step: Stage 3 — Custom theme + homepage build*

package/plugin/skills/website-image-gen/SKILL.md

@@ -0,0 +1,82 @@
+---
+name: website-image-gen
+version: 1.0.0
+description: Generate realistic, contextual images for WordPress authority sites. Use this when a page needs hero images, service photos, blog post visuals, or location-specific imagery. Creates web-ready images in 16:9, 4:3, or square formats. Saves to WordPress media library or local /images folder.
+metadata:
+  openclaw:
+    tools: ["image_generate"]
+---
+
+# Website Image Generation
+
+Generate realistic, photo-quality images tailored to WordPress authority site content. Replaces generic stock photo searches with on-demand, on-brand images.
+
+## When to use this
+
+- Hero/banner images for service pages
+- Blog post featured images
+- Location-specific photos (e.g. "HVAC technician in Tampa")
+- Service-in-action shots (e.g. "mold inspection underway")
+- Trust-building imagery (team, equipment, before/after)
+
+## How it works
+
+The agent has access to OpenClaw's `image_generate` tool (powered by gpt-image-2 or FLUX). This skill provides:
+
+1. **Prompt templates** for common authority-site image types
+2. **Style presets** that keep all generated images visually consistent across a site
+3. **Sizing guides** for WordPress hero, thumbnail, and inline use
+4. **Workflow patterns** for generating images at scale
+
+## Standard sizes for authority sites
+
+| Use case | Dimensions | Aspect |
+|----------|-----------|--------|
+| Hero banner | 1920×1080 | 16:9 |
+| Featured image | 1200×675 | 16:9 |
+| Service card | 800×600 | 4:3 |
+| Inline content | 1024×576 | 16:9 |
+| Square thumb | 800×800 | 1:1 |
+
+## Prompt template library
+
+See `templates/` for ready-to-use prompts for common authority-site categories:
+
+- `hero-service-photo.md` — service in action, professional lighting
+- `team-portrait.md` — team member or business owner shots
+- `location-context.md` — location-specific scene setting
+- `before-after.md` — transformation imagery
+- `equipment-tools.md` — tools, equipment, processes
+- `blog-featured.md` — generic blog post header
+
+## Style consistency
+
+To keep all images on a site visually consistent, define a `style-preset.md` per site that includes:
+- Color palette (e.g. "warm tones, blue accents")
+- Lighting style (e.g. "natural daylight, soft shadows")
+- Composition rules (e.g. "rule of thirds, professional framing")
+- People: age range, attire, ethnicity guidance
+- Location/setting: indoor/outdoor preferences
+
+Then prepend the style preset to every image generation prompt for the site.
+
+## Workflow: Generate images for a full page
+
+1. Read the page content draft
+2. Identify image needs (hero + 2-3 inline)
+3. Pull style preset for the site
+4. Generate each image using the appropriate template
+5. Save to `images/<page-slug>/` or upload directly to WordPress media library
+6. Return image URLs ready to embed in the page
+
+## Example invocations
+
+**Hero image for an HVAC service page:**
+> "Generate a 1920×1080 hero image: a professional HVAC technician installing a high-efficiency air conditioner in a residential garage. Bright daylight, clean modern home, technician wearing branded uniform, tools visible, service-in-progress moment."
+
+**Blog post featured image for "Mold Inspection Tampa":**
+> "Generate a 1200×675 featured image: an indoor air quality specialist in protective gear examining a wall in a Florida home. Warm lighting, moisture damage visible, professional and reassuring tone."
+
+## Cost note
+
+OpenAI's gpt-image-2 charges per image. Budget roughly $0.04–$0.19 per image depending on size and quality. For a 50-page authority site needing 3 images per page = ~$10–$30 in image costs. Pass through to client or include in your build price.

package/plugin/skills/website-image-gen/templates/blog-featured.md

@@ -0,0 +1,56 @@
+# Blog Featured Image Template
+
+For blog post headers. Goal: visually represent the post topic, draw attention, work at small thumbnail sizes too.
+
+## Prompt formula
+
+```
+A [SUBJECT/SCENE] representing [BLOG_TOPIC]. [STYLE_DESCRIPTOR].
+[COMPOSITION]. [COLOR_PALETTE]. Professional photography, sharp focus.
+Suitable for a blog post header. [MOOD].
+```
+
+## Variables
+
+- **SUBJECT/SCENE** — what the image shows (be concrete)
+- **BLOG_TOPIC** — the post title or theme
+- **STYLE_DESCRIPTOR** — "Editorial photography", "Lifestyle photography", "Documentary style"
+- **COMPOSITION** — "Close-up", "Wide shot", "Overhead view", "Rule of thirds"
+- **COLOR_PALETTE** — match site brand
+- **MOOD** — "Optimistic", "Educational", "Urgent", "Reassuring"
+
+## Example: "5 Signs You Need Mold Remediation"
+
+```
+A close-up of a homeowner's hand pointing at dark mold spots on a
+bathroom wall, with subtle warning indicators. Documentary style
+photography, natural lighting, neutral color palette with slight
+desaturation. Sharp focus on the wall texture. Professional photography.
+Suitable for a blog post header. Educational and slightly urgent mood.
+```
+
+## Example: "How to Choose the Right HVAC Contractor"
+
+```
+A homeowner shaking hands with a uniformed HVAC contractor in front
+of a residential home, both smiling, contractor's truck visible in
+the background. Lifestyle photography, golden hour lighting, warm
+color palette with blue accents from the contractor's uniform.
+Wide shot composition. Professional photography. Suitable for a blog
+post header. Trustworthy and reassuring mood.
+```
+
+## Sizing
+
+Generate at **1200×675** (16:9). This works for both featured image and social sharing.
+
+## Quick variants by post type
+
+| Post type | Visual approach |
+|-----------|-----------------|
+| How-to | Person performing an action |
+| List/comparison | Layout of objects, side-by-side |
+| Warning/risk | Close-up of the problem |
+| Trust/credibility | People, handshakes, faces |
+| Educational | Diagrams, tools, equipment |
+| Local/seasonal | Recognizable location/season cues |

package/plugin/skills/website-image-gen/templates/hero-service-photo.md

@@ -0,0 +1,56 @@
+# Hero Service Photo Template
+
+Use for hero banners on service pages. Goal: show the service being performed by a real-looking professional in a real-looking environment.
+
+## Prompt formula
+
+```
+A professional [SERVICE_PROVIDER] [VERB doing SERVICE] in a [SETTING].
+[LIGHTING_STYLE]. [PERSON_DETAILS]. [EQUIPMENT_VISIBLE].
+Photorealistic, high quality, professional photography style.
+[MOOD/TONE]. Shot on DSLR, natural color grading.
+```
+
+## Variables to fill in
+
+- **SERVICE_PROVIDER** — "HVAC technician", "mold inspector", "plumber", "dumpster delivery driver"
+- **VERB** — "installing", "inspecting", "repairing", "delivering", "examining"
+- **SERVICE** — what they're doing (specific to the page)
+- **SETTING** — "residential home interior", "commercial kitchen", "suburban driveway", "office building exterior"
+- **LIGHTING_STYLE** — "Natural daylight through windows", "Bright midday sun", "Soft overcast lighting"
+- **PERSON_DETAILS** — age range, uniform/attire, ethnicity guidance, expression
+- **EQUIPMENT_VISIBLE** — tools, equipment, vehicles relevant to the service
+- **MOOD/TONE** — "Trustworthy and competent", "Friendly and approachable", "Skilled and focused"
+
+## Example (HVAC install)
+
+```
+A professional HVAC technician in his 40s installing a high-efficiency
+air conditioner in a residential garage. Natural daylight through open
+garage door, bright and clean. Technician wearing branded blue uniform
+with tools on a workbench beside him, attaching ductwork. Photorealistic,
+high quality, professional photography style. Trustworthy and competent
+mood. Shot on DSLR, natural color grading.
+```
+
+## Example (Mold inspection)
+
+```
+A professional mold inspector in protective white gear examining a
+moisture-damaged wall in a Florida home interior. Warm afternoon
+lighting through windows. Inspector in his 30s holding a moisture meter,
+focused expression, taking notes on a clipboard. Photorealistic, high
+quality, professional photography style. Reassuring and expert mood.
+Shot on DSLR, natural color grading.
+```
+
+## Sizing
+
+Generate at **1920×1080** (16:9) for hero use. Compress for web before deploying.
+
+## What to AVOID in the prompt
+
+- ❌ "Cartoon", "illustration", "anime" — keep it photorealistic
+- ❌ Too many people — 1-2 max for clarity
+- ❌ Generic stock photo tropes — be specific about setting and action
+- ❌ Brand logos or trademarked uniforms (legal risk)

package/plugin/skills/wordpress-pro/SKILL.md

@@ -0,0 +1,105 @@
+---
+name: wordpress-pro
+description: Use when developing WordPress themes, plugins, customizing Gutenberg blocks, implementing WooCommerce features, or optimizing WordPress performance and security.
+triggers:
+  - WordPress
+  - WooCommerce
+  - Gutenberg
+  - WordPress theme
+  - WordPress plugin
+  - custom blocks
+  - ACF
+  - WordPress REST API
+  - hooks
+  - filters
+  - WordPress performance
+  - WordPress security
+role: expert
+scope: implementation
+output-format: code
+---
+
+# WordPress Pro
+
+Expert WordPress developer specializing in custom themes, plugins, Gutenberg blocks, WooCommerce, and WordPress performance optimization.
+
+## Role Definition
+
+You are a senior WordPress developer with deep experience building custom themes, plugins, and WordPress solutions. You specialize in modern WordPress development with PHP 8.1+, Gutenberg block development, WooCommerce customization, REST API integration, and performance optimization. You build secure, scalable WordPress sites following WordPress coding standards and best practices.
+
+## When to Use This Skill
+
+- Building custom WordPress themes with template hierarchy
+- Developing WordPress plugins with proper architecture
+- Creating custom Gutenberg blocks and block patterns
+- Customizing WooCommerce functionality
+- Implementing WordPress REST API endpoints
+- Optimizing WordPress performance and security
+- Working with Advanced Custom Fields (ACF)
+- Full Site Editing (FSE) and block themes
+
+## Core Workflow
+
+1. **Analyze requirements** - Understand WordPress context, existing setup, goals
+2. **Design architecture** - Plan theme/plugin structure, hooks, data flow
+3. **Implement** - Build using WordPress standards, security best practices
+4. **Optimize** - Cache, query optimization, asset optimization
+5. **Test & secure** - Security audit, performance testing, compatibility checks
+
+## Reference Guide
+
+Load detailed guidance based on context:
+
+| Topic | Reference | Load When |
+|-------|-----------|-----------|
+| Theme Development | `references/theme-development.md` | Templates, hierarchy, child themes, FSE |
+| Plugin Architecture | `references/plugin-architecture.md` | Structure, activation, settings API, updates |
+| Gutenberg Blocks | `references/gutenberg-blocks.md` | Block dev, patterns, FSE, dynamic blocks |
+| Hooks & Filters | `references/hooks-filters.md` | Actions, filters, custom hooks, priorities |
+| Performance & Security | `references/performance-security.md` | Caching, optimization, hardening, backups |
+
+## Constraints
+
+### MUST DO
+- Follow WordPress Coding Standards (WPCS)
+- Use nonces for form submissions
+- Sanitize all user inputs with appropriate functions
+- Escape all outputs (esc_html, esc_url, esc_attr)
+- Use prepared statements for database queries
+- Implement proper capability checks
+- Enqueue scripts/styles properly (wp_enqueue_*)
+- Use WordPress hooks instead of modifying core
+- Write translatable strings with text domains
+- Test across multiple WordPress versions
+
+### MUST NOT DO
+- Modify WordPress core files
+- Use PHP short tags or deprecated functions
+- Trust user input without sanitization
+- Output data without escaping
+- Hardcode database table names (use $wpdb->prefix)
+- Skip capability checks in admin functions
+- Ignore SQL injection vulnerabilities
+- Bundle unnecessary libraries (use WordPress APIs)
+- Create security vulnerabilities through file uploads
+- Skip internationalization (i18n)
+
+## Output Templates
+
+When implementing WordPress features, provide:
+1. Main plugin/theme file with proper headers
+2. Relevant template files or block code
+3. Functions with proper WordPress hooks
+4. Security implementations (nonces, sanitization, escaping)
+5. Brief explanation of WordPress-specific patterns used
+
+## Knowledge Reference
+
+WordPress 6.4+, PHP 8.1+, Gutenberg, WooCommerce, ACF, REST API, WP-CLI, block development, theme customizer, widget API, shortcode API, transients, object caching, query optimization, security hardening, WPCS
+
+## Related Skills
+
+- **PHP Pro** - Modern PHP development patterns
+- **Laravel Specialist** - PHP framework expertise
+- **Fullstack Guardian** - Full-stack feature implementation
+- **Security Reviewer** - WordPress security audits