# Wp Rich Article

> Generate rich HTML articles for the WordPress Classic Editor with inline CSS. Produces visually appealing content using gradients, cards, grids, color-coded boxes, and code blocks. Plain text-only articles are not allowed. Use when writing WordPress articles that need professional visual design.

- Skill: `koach08/wp-rich-article` (Agent Skill)
- Install (CLI): `npx skillmds@latest add koach08/wp-rich-article`
- Raw SKILL.md: https://api.skillmd.com/api/skills/koach08/wp-rich-article/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: koach08 (https://skillmd.com/u/koach08)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/koach08/wp-rich-article

---


# WP Rich Article — WordPress Classic Editor Rich HTML Generator

Generate visually rich HTML articles designed to be pasted directly into the
WordPress Classic Editor "Text" tab. Every article must include visual design
components — plain text-only output is not acceptable.

---

## Writing Style

- Write in a clear, reader-friendly tone
- Avoid AI boilerplate phrases ("In today's rapidly evolving...", "It's worth noting that...")
- Be specific and concrete rather than vague and abstract
- Match the tone to your site's audience

---

## Design Requirements (no plain text)

All styling uses inline CSS. No external stylesheets or class dependencies.

### Required Components

1. **Lead section box** — Gradient background (e.g., `linear-gradient(135deg, #667eea 0%, #764ba2 100%)`), white text, `padding: 2rem`, `border-radius: 12px`

2. **Card sections** — `background: #fff`, `border-radius: 12px`, `box-shadow: 0 2px 12px rgba(0,0,0,0.08)`, `padding: 2rem`, `margin: 1.5rem 0`

3. **Grid layout** — `display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem`

4. **Color-coded comparison cards** — Different accent colors per item (left border: `border-left: 4px solid {color}`)

5. **Code blocks** — `background: #1e1e1e; color: #d4d4d4; padding: 1.5rem; border-radius: 8px; overflow-x: auto; font-family: 'Fira Code', monospace`

6. **Pastel summary boxes** — `background: #f0f7ff` (blue) or `#f0fff4` (green), `border-radius: 12px`, `padding: 1.5rem`

7. **Quotes and Tips** — Icon-decorated, distinguished by background color

### Color Palette Examples
- Main: `#667eea`, `#764ba2`
- Accent: `#f093fb`, `#4facfe`, `#43e97b`
- Pastel: `#f0f7ff`, `#fff5f5`, `#f0fff4`, `#fffff0`

You can customize these colors to match your site's branding.

---

## Article Structure

```
1. Lead section (gradient box)
2. Introduction (why this topic matters)
3. Main content (cards and grids for visual organization)
4. Practical examples (code blocks, screenshots, step-by-step)
5. Summary (pastel box)
```

---

## Output

- Save as an `.html` file
- The HTML should be ready to paste directly into the Classic Editor "Text" tab
- All styles must be inline (no `<style>` blocks or external CSS)
- Responsive design via `max-width`, `auto-fit` grids, and relative units