Skill: sebastiangansca/kadence-theme-design-system (version 0.1.0)

--- name: kadence-theme-design-system description: Use Kadence Theme as a design system for WordPress delivery. Covers design tokens, layout system, header/footer/navigation setup, page/archive/single templates, and a practical Free vs Pro capability matrix so agents choose valid implementations before building. metadata: {"openclaw":{"emoji":"🎛️"}} --- # Kadence Theme Design System Use this skill when working on WordPress sites built with Kadence Theme. Primary goals: 1. Build and maintain pages/templates with Kadence-native patterns. 2. Keep design decisions tied to global tokens (colors, typography, spacing). 3. Prevent Pro-only feature usage when site only has Free. ## Read Order (important) 1. [references/free-vs-pro-matrix.md](references/free-vs-pro-matrix.md) 2. [references/design-system-foundation.md](references/design-system-foundation.md) 3. [references/elements-and-template-architecture.md](references/elements-and-template-architecture.md) 4. [references/website-management-playbook.md](references/website-management-playbook.md) ## Operating Rules - Confirm theme/license capability before proposing implementation details. - Default to **Kadence Free compatible** solutions unless Pro is explicitly confirmed. - Prefer Gutenberg + Kadence Blocks; avoid custom CSS/JS unless requested. - Reuse global palette/typography/spacing variables. - Keep templates editable by non-technical editors. - For content reads/writes, pair this skill with `wordpress-content-rest-api`. ## Capability Check (before execution) Do this first in any Kadence task: 1. Verify active theme is Kadence. 2. Verify whether Kadence Pro/Theme Kit Pro features are installed and licensed. 3. Determine feature tier (Free-only vs Free+Pro). 4. Select implementation path from the capability matrix. If Pro status is unknown, proceed with Free-safe fallback and state the assumption. ## Done Criteria A Kadence design/system task is complete only when: - Chosen pattern matches confirmed feature tier. - Global style tokens are reused (no random hardcoded styling). - Header/footer/nav/template behavior matches requested UX. - Any Pro-dependent enhancement is listed separately as optional. - Editor can maintain the result in Gutenberg without code edits. ## Source Scope This skill is based on Kadence public docs + help-center pages curated in: [references/sources.md](references/sources.md) If docs change, re-check source pages before asserting feature availability.

path: references/design-system-foundation.md
content: # Kadence Design System Foundation

This is the practical design-system layer for Kadence sites.

## 1) Token hierarchy

Always design in this order:
1. Palette tokens (brand + neutral + semantic)
2. Typography scale (display, h1-h6, body, small)
3. Spacing rhythm (section, component, inline)
4. Container/layout width rules
5. Component variants (primary/secondary/ghost etc.)

Avoid hardcoded one-off values when a global token exists.

## 2) Global color strategy

- Define a small intentional palette:
  - Primary brand
  - Secondary accent
  - Text strong / text muted
  - Surface / surface-alt
  - Border subtle
  - Success / warning / error where needed
- Reuse palette slots consistently across blocks and templates.

## 3) Typography strategy

- Keep heading and body families coherent.
- Use predictable type scale and line-height.
- Preserve contrast and readability over stylistic novelty.

## 4) Layout system

- Set one content max-width and one wider marketing width.
- Use repeatable section spacing presets.
- Prefer stacked, responsive section patterns over custom breakpoint CSS.

## 5) Component conventions

Standardize these primitives:
- Hero sections
- Card grids
- Feature rows
- FAQ blocks
- CTA strips
- Buttons and links

Keep variant count low; consistency beats novelty.

## 6) Accessibility defaults

- One H1 per page.
- Logical heading nesting.
- Adequate color contrast.
- Clear focus states and usable nav labels.
- Avoid text embedded inside decorative images.

## 7) SEO-aware structure

- Semantic sectioning and heading hierarchy.
- Internal links where intent aligns.
- Clear page intro above the fold.
- Scannable blocks with concise paragraphs and bullets.

path: references/elements-and-template-architecture.md
content: # Elements and Template Architecture (Kadence)

Use this to decide structure, not just block selection.

## A) Site shell areas

1. Header
   - Identity (logo)
   - Primary navigation
   - Utility actions (CTA/login/contact)
2. Footer
   - Navigation/support links
   - Legal/company details
   - Optional CTA or lead capture
3. Content region
   - Page/post templates
   - Archive templates

## B) Template layers

Design each request across these layers:
- Global defaults (site-wide)
- Content type defaults (page/post/archive)
- Page-specific overrides (only when necessary)

Minimize overrides to reduce maintenance cost.

## C) Kadence Elements (Pro-capability)

When Pro is confirmed, use Elements for reusable conditional logic:
- Hooked Element: inject content into theme hook locations.
- Fixed Element: persistent UI region.
- Content Element: reusable content region with display controls.
- Template Element: override template areas under conditions.

If Pro is not confirmed, do not rely on this mechanism.

## D) Header architecture patterns

Free-safe patterns:
- Standard: logo + menu + CTA button
- Marketing: logo + menu + dual CTA
- Compact mobile: logo + off-canvas toggle + primary CTA

Pro-leaning enhancement patterns:
- Conditional header variants by context
- Premium header utilities (widget/search-bar/dark mode toggle/dividers)

## E) WooCommerce structure guidance

Baseline:
- Clean product/archive typography and spacing
- Consistent button and price styles
- Mobile-first cart/checkout readability

Advanced (verify Pro/add-ons):
- Additional WooCommerce add-ons and merchandising behavior

## F) Change management pattern

For any template/system change:
1. Snapshot current behavior.
2. Apply smallest viable configuration change.
3. Validate desktop/tablet/mobile.
4. Validate affected routes (home, key landing, blog/archive, single).
5. Document Free-safe fallback if Pro enhancement was requested.

path: references/free-vs-pro-matrix.md
content: # Kadence Theme Free vs Pro Matrix

Use this matrix to avoid mismatched implementations.

## Quick rule

- If Pro is not explicitly confirmed, implement from **Free Baseline** only.
- Treat all Pro items as conditional enhancements.

## Free Baseline (safe defaults)

Commonly available in Kadence Theme Free and safe to assume:
- Global color palette usage
- Typography settings
- Page layout controls
- Archive layout controls
- Single post layout controls
- Header builder baseline items (logo, primary navigation, basic buttons/social/html/search)
- Mobile navigation customization
- Sticky/transparent header behaviors (where available in theme settings)
- Basic WooCommerce theme integration settings
- Performance settings in theme customizer

## Pro / Premium-leaning Features (require verification)

From Kadence docs and header item labeling, these should be treated as Pro-dependent unless verified otherwise:

1. **Kadence Elements system**
   - Hooked Elements
   - Fixed Elements
   - Content Elements
   - Template Elements
   - Element display conditions
2. **Conditional header logic / advanced display targeting**
3. **Header premium item set** (as documented in classic header items)
   - Free Shipping Cart Notice
   - Dividers
   - Search Bar (advanced header item)
   - Widget Area
   - Toggle Widget Area
   - Dark Mode Toggle
4. **Theme Kit Pro / Pro template flows**
5. **Advanced WooCommerce add-ons** beyond baseline styling

## Practical Decision Tree

1. Need only content pages + standard site shell?
   - Use Free baseline.
2. Need conditional injections, template overrides by rules, or global hook regions?
   - Requires Pro-capability check first.
3. Need premium header utilities (widget area, dark mode toggle, etc.)?
   - Mark as Pro-dependent and propose Free fallback.

## Free Fallback Patterns

When Pro is unavailable:
- Replace Hooked/Template element logic with native Gutenberg page/template composition.
- Replace conditional header behavior with a single universal header design.
- Replace premium header utilities with standard nav + button + icon links.
- Keep CTA bands and promos as reusable block patterns instead of dynamic elements.

Security scan verdicts — ClawScan: clean | static analysis: clean | VirusTotal: clean | SkillSpector: clean (LOW)