plannotator/effective-html

plannotator のプロフィール

記録された最新のソース活動: 2026年10月15日 17:20

SkillsMP カタログ更新: 2026年10月17日 00:09

収集済み skills: 7

GitHub スター: 3,670
GitHub フォーク: 247

リポジトリの README

README の元ファイル：README.md

README の元ファイルを読む

README 全文を表示

<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>.

リポジトリの README を読み込んでいます…

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

ウェブ開発者

1 件の職業カテゴリ · 86% 分類済み

skill

職業分類

説明

更新

big-pics-little-words

未分類

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

原文の言語: 英語

2026-10-15

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, layout, theming, or…

原文の言語: 英語

2026-08-03

html-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-diagram or the broad html…

原文の言語: 英語

2026-08-02

html-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 html skill routes a…

原文の言語: 英語

2026-08-02

html-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 or the broad html…

原文の言語: 英語

2026-08-02

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 artifact, or broad…

原文の言語: 英語

2026-08-02

html-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-wireframe or the broad html…

原文の言語: 英語

2026-08-02

収集済み skill 7 件中 7 件を表示しています。

AI アシスタントでインストール

このプロンプトをコピーして、使用中の AI アシスタントに送ってください。

Follow https://skillsmp.com/skill-install/prompt.md to install Agent Skills from https://github.com/plannotator/effective-html.