/scaffold

name: scaffold
description: Generate complete Divi 5 page section templates (hero, pricing, testimonials, FAQ, CTA, etc.) with best-practice CSS, responsive design, and accessibility baked in.
argument-hint: <section-type>
allowed-tools: Read, Write, Glob, Grep, WebSearch, WebFetch

Divi 5 Section Scaffold Generator

You are generating complete, production-ready Divi 5 page section templates. Each scaffold includes CSS, class naming, responsive behavior, accessibility attributes, and step-by-step builder instructions.

When to Research

The built-in scaffolds in this command cover the common cases. Use `WebFetch` or `WebSearch` only when:

• The user requests a section type that isn't covered by the built-in templates (Step 1 menu)
• You need to verify a specific Divi 5.6 selector, class name, or new module behavior
• You're unsure whether a CSS feature is currently supported in the builder vs. only via custom CSS

Prefer official sources: `help.elegantthemes.com`, `elegantthemes.com/blog`, `victorduse.com/divi-5-changelog`. Do not research for general CSS knowledge — only Divi-specific facts.

Step 1: Identify Section Type

If the user hasn't specified, present this menu:

| # | Section | Description | |---|---------|-------------| | 1 | **Hero** | Full-width hero with heading, subheading, CTA buttons, optional background | | 2 | **Feature Grid** | 3- or 4-column feature/blurb cards with icons | | 3 | **Pricing Table** | 2-4 tier pricing comparison | | 4 | **Testimonials** | Carousel or grid of customer quotes | | 5 | **FAQ Accordion** | Expandable question/answer toggles | | 6 | **CTA Banner** | Call-to-action strip with heading + button | | 7 | **Team Grid** | Team member cards with photos and roles | | 8 | **Stats Counter** | Animated number counters with labels | | 9 | **Logo Bar** | Client/partner logo carousel or grid | | 10 | **Contact Section** | Contact form with info sidebar | | 11 | **Footer** | Multi-column footer with links, social, copyright | | 12 | **WooCommerce Product Grid** | Loop Builder product layout with CSS Grid | | 13 | **Off-Canvas Menu** | Canvas-based slide-out navigation | | 14 | **Popup Modal** | Canvas Portal popup with overlay |

Ask about: 1. **Color scheme** — dark, light, or brand colors? *(Defaults to the project's `scaffold_style` config if set — see Step 2.)* 2. **Output format** — Theme Options, Code Module, Child Theme, or Free-Form CSS? *(Defaults to `default_format` if set.)* 3. **Any customization** — specific fonts, spacing, content?

Step 2: Read Project Config

Read `.claude/divi5-toolkit.local.md` if it exists. Apply these settings (use defaults if missing):

css_prefix: my                # custom class prefix (defaults to "my")
default_format: theme-options # output format default
scaffold_style: light         # "light" | "dark" | "brand" — color scheme default
active_breakpoints:           # which breakpoints to target
  - phone
  - tablet
  - desktop

**Behavior:**

• If the user did not specify a color scheme in Step 1, use `scaffold_style`. If unset, default to `light`.
• If the user did not specify an output format in Step 1, use `default_format`.
• Use `css_prefix` for all custom classes in the generated CSS (substitute `{prefix}` placeholders).
• Generate responsive CSS only for breakpoints listed in `active_breakpoints`.

Also check for existing design tokens (CSS variables) in the project and reuse them where possible.

Step 3: Generate the Scaffold

Each scaffold MUST include all of the following:

A. CSS with Design Tokens

/* ==========================================================================
   [Section Name] — Scaffold
   Format: [output format]
   Generated: [date]

   SETUP:
   1. [Where to paste CSS]
   2. [How to add classes in builder]
   ========================================================================== */

/* Design tokens (merge into existing :root if present) */
:root {
  /* Section-specific variables */
}

/* Section styles */

B. Class Map

Document every custom class and where to apply it:

CLASS MAP:
┌─────────────────────┬──────────────┬─────────────────────┐
│ Class               │ Apply To     │ Via                  │
├─────────────────────┼──────────────┼─────────────────────┤
│ {prefix}-hero       │ Section      │ Advanced > Attributes│
│ {prefix}-hero__title│ Text Module  │ Advanced > Attributes│
└─────────────────────┴──────────────┴─────────────────────┘

C. Responsive Behavior

• Use `clamp()` for fluid values
• Include media queries only for layout shifts
• Test against the project's active breakpoints

D. Accessibility Checklist

Every scaffold must address:

• [ ] Semantic Elements set (section, nav, header, etc.)
• [ ] Color contrast meets WCAG 2.1 AA (4.5:1 for text, 3:1 for large text)
• [ ] Focus indicators visible for interactive elements
• [ ] ARIA attributes added via Attributes panel where needed
• [ ] Touch targets minimum 44x44px for mobile
• [ ] `prefers-reduced-motion` respected for animations

E. Builder Instructions

Step-by-step instructions for recreating in the Visual Builder:

BUILDER SETUP:
1. Add a [Section type] section
2. Set Element Type to <section> via Advanced > HTML > Element Type
3. Add class "{prefix}-[name]" via Advanced > Attributes
4. Add [Row configuration]
5. Add [Modules with specific settings]
6. Configure responsive visibility for each breakpoint

F. Interaction Notes (if applicable)

For sections using Canvas, Interactions, or dynamic content:

• Canvas setup instructions
• Interaction trigger configuration
• Canvas Portal placement

Step 4: Validate the Scaffold

Before presenting, verify:

• [ ] All button overrides have `body` prefix and `!important`
• [ ] CSS Variables in `:root`
• [ ] Correct format wrapping (style tags for Code Module, none for Theme Options)
• [ ] Custom classes used (no numbered selectors)
• [ ] Hover/focus states for all interactive elements
• [ ]