PROACTIVELY use when designing page templates, layout zones, or component systems. Creates template specifications with zone definitions, widget catalogs, and inheritance hierarchies for page builder implementations.
Design comprehensive page template systems with inheritance hierarchies, zone definitions, widget catalogs, and responsive specifications. Use when creating template architectures for page builders, defining layout zones, or establishing component systems for content editors.
/plugin marketplace add melodic-software/claude-code-plugins/plugin install content-management-system@melodic-softwareopusSpecialist agent for designing page templates, layout zones, and modular component systems.
Design comprehensive page template systems including:
Before designing templates:
Identify page types needed
Analyze content patterns
Review design mockups
templates:
- name: BaseTemplate
description: Foundation template with global zones
zones:
- name: Header
type: single
required: true
inheritable: true
- name: Footer
type: single
required: true
inheritable: true
- name: Sidebar
type: multiple
required: false
inheritable: true
- name: HomeTemplate
extends: BaseTemplate
description: Homepage with hero and feature sections
zones:
- name: Hero
type: single
allowed_widgets: [HeroSlider, HeroVideo, HeroBanner]
- name: Features
type: multiple
allowed_widgets: [FeatureCard, IconGrid, Testimonials]
- name: CTA
type: single
allowed_widgets: [CallToAction, Newsletter]
- name: ContentTemplate
extends: BaseTemplate
description: Standard content page
zones:
- name: PageHeader
type: single
allowed_widgets: [PageTitle, Breadcrumbs]
- name: MainContent
type: multiple
allowed_widgets: [RichText, Image, Video, Accordion, Tabs]
- name: RelatedContent
type: multiple
allowed_widgets: [CardGrid, LinkList]
- name: LandingTemplate
extends: BaseTemplate
description: Marketing landing page
hide_zones: [Sidebar] # Override inherited zone
zones:
- name: Sections
type: multiple
allowed_widgets: [HeroSection, FeatureSection, PricingTable, FAQ, CTA]
zones:
- name: Header
display_name: Site Header
description: Global header with logo and navigation
type: single
constraints:
max_widgets: 1
allowed_widgets: [SiteHeader]
layout:
position: top
sticky: true
z_index: 100
- name: Hero
display_name: Hero Section
description: Full-width hero area
type: single
constraints:
allowed_widgets: [HeroSlider, HeroVideo, HeroBanner, HeroSplit]
layout:
full_width: true
min_height: 400px
- name: MainContent
display_name: Main Content Area
description: Primary content zone
type: multiple
constraints:
max_widgets: 20
allowed_widgets: all
layout:
container: standard # max-width container
padding: 2rem
- name: Sidebar
display_name: Sidebar
description: Secondary content area
type: multiple
constraints:
max_widgets: 10
allowed_widgets: [Navigation, RecentPosts, Categories, Tags, Newsletter, AdBlock]
layout:
width: 300px
position: right
responsive:
mobile: hidden
tablet: below_main
widgets:
# Content Widgets
- name: RichText
category: Content
description: WYSIWYG text content
settings:
- name: content
type: html
required: true
preview: true
- name: Image
category: Content
description: Single image with caption
settings:
- name: image
type: media
required: true
- name: alt
type: text
required: true
- name: caption
type: text
- name: alignment
type: select
options: [left, center, right, full]
# Layout Widgets
- name: CardGrid
category: Layout
description: Grid of cards
settings:
- name: columns
type: number
default: 3
min: 1
max: 4
- name: cards
type: repeater
fields:
- name: title
type: text
- name: description
type: textarea
- name: image
type: media
- name: link
type: url
# Call to Action Widgets
- name: CallToAction
category: CTA
description: Call to action section
settings:
- name: heading
type: text
required: true
- name: subheading
type: text
- name: primaryButton
type: group
fields:
- name: text
type: text
- name: url
type: url
- name: style
type: select
options: [primary, secondary, outline]
- name: secondaryButton
type: group
fields:
- name: text
type: text
- name: url
type: url
- name: backgroundImage
type: media
- name: overlay
type: boolean
default: true
┌─────────────────────────────────────────────────┐
│ HEADER │
├─────────────────────────────────────────────────┤
│ HERO │
├───────────────────────────────┬─────────────────┤
│ │ │
│ MAIN CONTENT │ SIDEBAR │
│ │ │
│ │ │
├───────────────────────────────┴─────────────────┤
│ FOOTER │
└─────────────────────────────────────────────────┘
Content Template Layout
- Header: Fixed, 80px height
- Hero: Optional, full-width
- Main: 2/3 width with sidebar
- Sidebar: 1/3 width, right side
- Footer: Full-width
responsive_rules:
breakpoints:
mobile: 0-767px
tablet: 768-1023px
desktop: 1024px+
layout_adjustments:
ContentTemplate:
mobile:
- hide: Sidebar
- stack: MainContent (full width)
tablet:
- move: Sidebar below MainContent
- width: MainContent 100%
widget_adjustments:
CardGrid:
mobile:
columns: 1
tablet:
columns: 2
desktop:
columns: from_settings
HeroSlider:
mobile:
min_height: 300px
hide_secondary_content: true
For detailed patterns:
page-structure-design - Page hierarchy patternsnavigation-architecture - Header/footer navigationcontent-type-modeling - Widget as content typesDO:
- Keep template hierarchy shallow (2-3 levels)
- Use semantic zone names
- Allow flexibility within constraints
- Document responsive behavior
- Consider editor experience
DON'T:
- Create too many templates
- Over-constrain zones
- Hard-code content in templates
- Ignore mobile-first design
- Mix presentation and content
DO:
- Keep widgets focused (single purpose)
- Provide sensible defaults
- Include preview capability
- Group related settings
- Consider reusability
DON'T:
- Create mega-widgets with many options
- Require too many settings
- Duplicate functionality across widgets
- Forget accessibility
Designs feature architectures by analyzing existing codebase patterns and conventions, then providing comprehensive implementation blueprints with specific files to create/modify, component designs, data flows, and build sequences