plannotator/effective-html

Perfil de plannotator

Última atividade de origem registrada: 15 de outubro de 2026 às 17:20

Catálogo do SkillsMP atualizado: 17 de outubro de 2026 às 00:09

skills coletadas: 7

Estrelas no GitHub: 3.670
Forks no GitHub: 247

README do repositório

Arquivo de origem do README: README.md

Ler o README original

Expandir README completo

<img src="./assets/effective-html-banner.png" width="1280" alt="Effective HTML by Plannotator — HTML wireframes, mockups, prototypes, charts, and diagrams"> # Effective HTML [简体中文](README.zh.md) Focused agent skills for creating useful, self-contained HTML artifacts, from low-fidelity wireframes to working interactive prototypes. ## Fat artifacts + fat context Modern models can do a lot. Give them plenty of useful references and use artifacts to show what you mean. HTML can visualize almost anything, often more clearly than a wall of text. Your prompt can simply point to the artifacts, repositories, and folders that carry the context. > [!NOTE] > You can use this repo without installing anything. Treat it as a reference > first and an installable skill collection second. See the > [Effective HTML guide](https://www.effectivehtml.com/). https://github.com/user-attachments/assets/24306977-7f30-44c9-9bff-55f901d557b0 <a href="https://github.com/backnotprop/plannotator"> <img src="./star-plannotator.svg" width="340" alt="Star Plannotator on GitHub"> </a> Render and annotate local HTML with <a href="https://github.com/backnotprop/plannotator">Plannotator</a>. ## Skill references The repo includes seven optional skills for pragmatic visual artifacts. | Skill | Use it for | | --- | --- | | [`html`](skills/html/SKILL.md) | Broad HTML requests, mixed artifacts, reports, explainers, presentations, landing pages, tools, and routing to a specialist | | [`big-pics-little-words`](skills/big-pics-little-words/SKILL.md) | Explain the current subject in HTML with large visuals and minimal text while preserving key details; copied from [bro](https://github.com/backnotprop/bro/blob/main/skills/big-pics-little-words/SKILL.md) | | [`design-artifact`](skills/design-artifact/SKILL.md) | Subject-specific creative direction for any HTML artifact without imposing a reusable house style | | [`html-wireframe`](skills/html-wireframe/SKILL.md) | Low-fidelity layout directions that test content, hierarchy, navigation, flows, and responsive structure | | [`html-prototype`](skills/html-prototype/SKILL.md) | Working prototypes with realistic states, interaction, keyboard support, and responsive behavior | | [`html-plan`](skills/html-plan/SKILL.md) | Plans, roadmaps, rollouts, and implementation sequences that preserve source commitments | | [`html-diagram`](skills/html-diagram/SKILL.md) | Architecture, sequence, process, state, hierarchy, timeline, and system diagrams | Practical guide: [HTML Wireframes and Prototypes for Coding Agents](https://docs.plannotator.ai/learn/code-context/html-wireframes-and-prototypes-for-coding-agents). ## Install Install the collection when you want these references available to your agent as reusable workflows: ```bash npx skills add plannotator/effective-html ``` List or install individual skills: ```bash npx skills add plannotator/effective-html --list npx skills add plannotator/effective-html --skill big-pics-little-words npx skills add plannotator/effective-html --skill design-artifact npx skills add plannotator/effective-html --skill html-wireframe npx skills add plannotator/effective-html --skill html-prototype ``` ### Claude Code plugin ```text /plugin marketplace add plannotator/effective-html /plugin install plannotator-effective-html@effective-html ``` ### Codex plugin ```bash codex plugin marketplace add plannotator/effective-html codex plugin add plannotator-effective-html@effective-html ``` ## How the skills work The skills separate creative freedom from reliability: - Visual direction comes from the conversation, project, audience, and subject. - `design-artifact` provides a reusable design process without prescribing a reusable look. - Wireframes stay intentionally unfinished so reviewers focus on structure. - Prototypes implement one credible flow and its relevant states. - Plans preserve source commitments. - Diagrams choose a visual model and rendering method that fit the relationship being explained. - Every artifact is responsive, accessible, self-contained, and verified in a browser. Detailed guidance lives only where it is needed. The broad `html` skill routes the work, `design-artifact` supplies optional creative direction, and specialist skills own fidelity and behavior. Each skill remains independently usable. This project was inspired by Thariq Shihipar's [The unreasonable effectiveness of HTML](https://thariqs.github.io/html-effectiveness). <a href="https://github.com/plannotator/tot"> <img src="./use-tot.svg" width="300" alt="Share HTML with tot"> </a> Create a shareable link for an HTML file with <a href="https://github.com/plannotator/tot">tot</a>.

Carregando o README do repositório…

Effective HTML: choose an HTML artifact workflow

Effective HTML collects references for HTML wireframes, interactive prototypes, plans and diagrams. The general `html` Skill routes mixed requests; `design-artifact` supplies creative direction, and specialist Skills handle their own tasks.

Uses

The README allows using the repository as reference without installation. Choose wireframes to discuss layout and structure, or prototypes for a working flow and its relevant states. Each Skill remains independently usable.

How to use

Browse available Skills with npx skills add plannotator/effective-html --list; the README also documents selecting one with --skill.

Sources

README.md

Skills neste repositório

Desenvolvedores web

1 categorias ocupacionais · 86% classificado

skill

ocupação

descrição

atualizado

big-pics-little-words

sem classificação

Explain the current subject in HTML with large visuals and minimal text while preserving key details.