Effective HTML plugin for Grok Build
Agent skills for useful HTML artifacts, wireframes, interactive prototypes, plans, and diagrams.
How to install Effective HTML in Grok Build
1. Add this repo as a plugin marketplace in Grok Build (once per computer):
grok plugin marketplace add plannotator/effective-html2. Install the plugin:
grok plugin install plannotator-effective-html@plannotator/effective-html --trustReview before you trust it. --trust lets this plugin's hooks, MCP servers and scripts run code on your computer. It's a community repo that neither xAI nor GrokStacks has reviewed, so read its code first.
Then start a new Grok session, or press r in /plugins, to load it.
Inside Grok Build: type /plugins, open the Marketplace tab, press a and add plannotator/effective-html, then select plannotator-effective-html and press i.
Command format: Grok Build's plugin guide
What we checked: on Oct 18, 2026 it installed with grok 1.0.62 and Grok found 7 skills. That's an install check only: we haven't run it in a live Grok session.
What it contains
Skills (7)
html— Create or redesign self-contained single-file HTML artifacts with a visual direction shaped by the user's brief, project, and subject. Use when HTML is the deliverable for a report, explainer, landing page, presentation, tool, mixed artifacbig-pics-little-words— Explain the current subject in HTML with large visuals and minimal text while preserving key details.design-artifact— Design principles and creative direction for building HTML artifacts — pages, reports, plans, landing pages, demos, decks, and small tools. Use when creating or restyling any visual HTML deliverable and deciding its palette, type pairing, lhtml-wireframe— Direct-invocation specialist for low-fidelity, self-contained HTML wireframes that test information hierarchy, content, navigation, task flow, and responsive structure before visual design. Use when the user explicitly invokes html-wireframhtml-prototype— Direct-invocation specialist for polished, responsive, self-contained HTML mockups and interactive prototypes grounded in the user's conversation, product context, and design language. Use when the user explicitly invokes html-prototype orhtml-diagram— Direct-invocation specialist for self-contained HTML diagrams whose layout, notation, and interaction clarify relationships, sequence, topology, state, hierarchy, or quantitative structure. Use when the user explicitly invokes html-diagramhtml-plan— Direct-invocation specialist for clear, self-contained HTML plans that preserve source material while improving hierarchy, sequence, ownership, dependencies, and reviewability. Use when the user explicitly invokes html-plan or the broad htm
About this listing
Effective HTML is a community plugin on GitHub by plannotator, written as a Claude Code plugin that Grok Build installs. We install-checked it in Grok; we haven't run it in a live session or reviewed its code. When we installed it, Grok found 7 skills. Its license is MIT. We checked commit 975b047f6da6. It's one of 144 listings in the Design category on GrokStacks.
Stacks Weekly: every new Grok Build and Codex plugin, every Tuesday.
One short email for GrokStacks and CodexStacks readers, with each new plugin's install line and what it ships. Subscribe and get the free starter list: 20 Grok Build plugins worth installing first.
You'll get a confirmation email first. Unsubscribe anytime.
Effective HTML FAQ
How do I install Effective HTML in Grok Build?
Add the repo as a marketplace with grok plugin marketplace add plannotator/effective-html, then run grok plugin install plannotator-effective-html@plannotator/effective-html --trust. Then start a new Grok session, or press r in /plugins, to load it.
Is Effective HTML an official Grok Build plugin?
No. Effective HTML is a community plugin on GitHub by plannotator, not in xAI's official Grok Build marketplace. We checked that it installs and what Grok loads from it, but haven't run it in a live Grok session or reviewed its code.
What does Effective HTML include?
According to what Grok loaded in our install check, Effective HTML includes 7 skills: html, big-pics-little-words, design-artifact, html-wireframe, html-prototype, html-diagram….
Details
- Type
- Plugin
- Category
- Design
- Source
- Community Claude Code plugin, installs in Grok
- License
- MIT
- Author
- plannotator
- Keywords
- agent-skills, claude-code, codex, html-artifacts, html-prototype, html-wireframe, prototyping, skills
- Source repo
- https://github.com/plannotator/effective-html
- Checked commit
975b047f6da6- Homepage
- https://plannotator.ai
- Checked by GrokStacks
- Install-checked in Grok Build on Oct 18, 2026; not run in a live session
Something wrong or missing? Submit or improve this listing. Marketplace listings also refresh automatically every night.
For maintainers: badge and embeds
Maintain Effective HTML? Add the badge; it links to this page.
Markdown
[](https://grokstacks.com/p/effective-html/)HTML
<a href="https://grokstacks.com/p/effective-html/"><img src="https://grokstacks.com/badge.svg" alt="Listed on GrokStacks" width="164" height="28"></a>Embed card (static HTML and inline CSS, no JavaScript). Preview:
<a href="https://grokstacks.com/p/effective-html/" style="display:block;max-width:380px;box-sizing:border-box;padding:14px 16px;border:1px solid #2a2e3c;border-radius:12px;background:#0a0b0f;color:#e8eaf0;font:14px/1.45 -apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;text-decoration:none"><span style="display:block;font-size:16px;font-weight:700;color:#e8eaf0">Effective HTML</span><span style="display:block;margin:2px 0 8px;font-size:12px;color:#9aa0b1">Community plugin for Grok Build · 7 skills</span><span style="display:block;margin:0 0 10px;color:#c9cdd8">Agent skills for useful HTML artifacts, wireframes, interactive prototypes, plans, and diagrams.</span><span style="font-size:12px;font-weight:600;color:#7c9cff">View on GrokStacks →</span></a>Markdown summary
**[Effective HTML on GrokStacks](https://grokstacks.com/p/effective-html/)**: Community plugin for Grok Build with 7 skills. Install: `grok plugin install plannotator-effective-html@plannotator/effective-html --trust` (after `grok plugin marketplace add plannotator/effective-html`)More on badges, embeds and keeping your listing up to date: GrokStacks for plugin authors.
Also in Design
3dicon
One prompt in, a looping animated 3D icon out — with real transparency. A Claude Code skill.
3dviz Pro Max
Agent skill for creative 3D visualization: turn an idea into a Three.js/Blender scene worth exploring. Claude Code + Codex plugin, 223 recipes, 440 knowledge records, 22 proved kits, 37 runnable studies.
Adobe Premiere Pro MCP
Adobe Premiere Pro MCP. Tools for AI-driven video editing via MCP, for Codex, Claude, and other MCP clients.
Agent Sprite Forge
Agent Skill for generating 2D sprite sheets and map, transparent PNG frames, and animated GIFs from prompts.
Agent Storyboard
本地优先的 Agent 视频分镜工作台：让 Codex、Claude Code 通过 MCP 写分镜、生成图片/视频素材和配音，并自动回填。Local-first storyboard workbench for AI agents (Codex, Claude Code).
AI Business Skills
138 bilingual AI marketing skills (69 VN + 69 Global) for Claude Code, OpenCode, Codex, VS Code. Four role SOP packs — content, design, performance, leader ops — plus strategy, personal brand, AI avatar, dropshipping, design master, knowledge library. 4 regions (US/EU/SEA/LATAM) + Vietnam 2025-2026. Companion: opa-kit.