---
name: webkreator-medtoledo
description: Build professional WordPress/Oxygen websites and individual pages from client-provided copy or AGENC-IA copy artifacts. Use when the user asks to create, design, wireframe, improve, or convert a web page/site for WordPress or Oxygen; mentions WebKreator, MedToledo web design, HTML/CSS for Oxygen Code Block, Oxygen native/JSON, copy-to-sections, SEO keywords, H1/H2/H3 structure, or wants Codex to decide sections from supplied copy. Do not use for GoHighLevel or Elementor.
---

# WebKreator MedToledo

Convert real copy into a polished, responsive, SEO-aware WordPress/Oxygen page. Prefer a practical copy-first workflow over rebuilding marketing strategy when the user already has client or agency copy.

For full rules, read `references/webkreator-medtoledo-v1.md` when starting a WebKreator task, especially for SEO, visual rhythm, mobile QA, and Oxygen output details.

## Core Position

- Use WordPress/Oxygen as the target ecosystem.
- Primary output: HTML/CSS/JS for an Oxygen Code Block.
- Secondary output: native Oxygen/Oxygen JSON only when the layout is simple and stable.
- Do not produce GoHighLevel or Elementor outputs.
- Do not force Marketing Intelligence, avatar, or Oferta Irresistible when the user already provides copy.

## Required Inputs

Before building, make sure these are known or ask for them:

1. Page copy.
2. Page type: home, about, services, service page, landing, contact, blog/archive, or other.
3. Page objective: inform, capture leads, sell, generate trust, receive donations, rank for SEO, or other.
4. Main keyword.
5. Secondary keywords.

If the user has copy but no keywords, ask for the main keyword and secondary keywords. If they do not have keywords, propose them from the copy and mark them as suggestions.

## Recommended Inputs

Use these when available, but do not block unnecessarily:

- Logo and brand colors.
- Images or media URLs.
- Visual references or screenshots.
- Contact details and location.
- CTA text and destination.
- Testimonials, FAQ, trust proof, case studies, or social links.

## Workflow

1. Read the copy and identify page intent.
2. Identify missing content needed for conversion, SEO, or implementation.
3. Apply quick design thinking:
   - client type
   - visual tone
   - hero type
   - corner style
   - light/dark/gradient rhythm
   - one memorable visual idea
4. Map the copy to sections. Let the copy decide the structure.
5. Propose a text wireframe before code unless the user explicitly asks to build immediately.
6. After approval, generate the page.
7. Verify mobile behavior and avoid flat or repetitive section rhythm.
8. Deliver implementation notes and a QA checklist.

## SEO Rules

- Put the main keyword in the H1, ideally near the beginning.
- Use secondary keywords or semantic variations in H2s.
- Use H3s for subtopics, benefits, services, FAQs, or process steps.
- Use `strong` for important keywords and `em` for semantic variants or related concepts.
- Write natural semantic paragraphs; do not keyword-stuff.
- Include descriptive alt text for meaningful images.
- Include FAQ/AEO structure when it fits the page.
- Suggest title/meta and internal links when useful.

## Visual Rules

- Avoid generic AI-looking layouts.
- Do not place more than three similar sections in a row.
- Alternate image/text layouts when using multiple split sections.
- Add visual rests after dense content: metrics, parallax, quote band, dark band, image break, gradient band, or collage.
- When a hero, CTA band, dark band, or section uses a background image and the design can support motion, make it parallax-capable by default. Use a real or pseudo background layer with transform-based movement, keep a contrast overlay, and respect `prefers-reduced-motion`.
- Use references as inspiration and adapt to the client; do not copy blindly.
- Define one memorable visual feature per page.
- Mobile is mandatory: menu, hero, grids, forms, CTAs, image compositions, and footer must work around 375-390px.

## Output Decision

Use **HTML/CSS for Oxygen Code Block** when:

- The page has custom visuals, overlays, collages, gradients, or complex responsive behavior.
- The user wants a fast and reliable implementation.
- Native Oxygen JSON has already proven fragile.

Use **native Oxygen/Oxygen JSON** when:

- The section is simple and should be editable in Oxygen.
- It maps cleanly to `ct_section`, `ct_div_block`, `ct_headline`, `ct_text_block`, `ct_image`, `ct_link_text`, `ct_video`, or `ct_new_columns`.
- A real export from the same site/design set is available.

If producing Oxygen JSON, use `$oxygen-json-med` and validate the JSON before delivery.

## Code Block Requirements

For HTML/CSS output:

- Wrap everything in one root class such as `.mt-page` or a project-specific class.
- Scope CSS under that root class.
- Use absolute URLs for images already in WordPress.
- Include minimal JS only when needed.
- For image-background parallax, use small scroll JS with `requestAnimationFrame`, CSS custom properties, and a `prefers-reduced-motion` guard.
- When uploading HTML content to WordPress, save/send it as UTF-8 without BOM. The content must start immediately with `<!-- wp:html -->` or the root element; do not allow invisible BOM characters, blank lines, or whitespace before the first block, because they can create a visible gap above the first section.
- Include Oxygen wrapper resets if the page will be pasted into a Code Block.
- Keep the output responsive and inspectable.

## Deliverables

Depending on the task, deliver:

- Wireframe proposal.
- HTML/CSS/JS block for Oxygen.
- Native Oxygen JSON if appropriate.
- SEO notes: H1/H2/H3, keywords, title/meta suggestions.
- QA checklist and implementation notes.
