How do I install the Wp Rich Article skill?

Run npx skillmds@latest add koach08/wp-rich-article in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Wp Rich Article safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Wp Rich Article?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Wp Rich Article free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Wp Rich Article?

koach08 (@koach08) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Wp Rich Article by koach08 — Agent Skill

Name: Wp Rich Article
Author: koach08

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.

koach08 Updated Sep 21, 2026

File contents

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

Lead section box — Gradient background (e.g., linear-gradient(135deg, #667eea 0%, #764ba2 100%)), white text, padding: 2rem, border-radius: 12px
Card sections — background: #fff, border-radius: 12px, box-shadow: 0 2px 12px rgba(0,0,0,0.08), padding: 2rem, margin: 1.5rem 0
Grid layout — display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem
Color-coded comparison cards — Different accent colors per item (left border: border-left: 4px solid {color})
Code blocks — background: #1e1e1e; color: #d4d4d4; padding: 1.5rem; border-radius: 8px; overflow-x: auto; font-family: 'Fira Code', monospace
Pastel summary boxes — background: #f0f7ff (blue) or #f0fff4 (green), border-radius: 12px, padding: 1.5rem
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

---name: wp-rich-articledescription: 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.---# WP Rich Article — WordPress Classic Editor Rich HTML GeneratorGenerate visually rich HTML articles designed to be pasted directly into theWordPress Classic Editor "Text" tab. Every article must include visual designcomponents — 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 Components1. **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

Frequently asked questions