Effective HTML Skills Released

Effective HTML, released by the Plannotator team, is an open-source skill collection designed to enable coding agents to output self-contained HTML files instead of Markdown. It aims to provide models with sufficient context and allows users to directly manipulate the output, following a 'Fat artifacts + fat context' approach.

Composition of 6 Skills

• html: Acts as a hub that routes general requests to specialized skills
• html-wireframe: Generates low-fidelity wireframes to review structure and information hierarchy
• html-prototype: Creates prototypes with actual interactions and responsive behavior
• html-plan: Validates document-style artifacts such as plans, roadmaps, and implementation order
• html-diagram: Generates diagrams such as architecture, sequence, and process diagrams
• design-artifact: Suggests creative directions suitable for the topic without imposing reusable design systems

Design Philosophy and Artifact Contract

This project emphasizes consistent 'care' over a consistent 'look,' and prioritizes following existing design systems if they are present in the project. Artifacts must be single .html files that can be opened directly without a build step, include inline CSS/JS, and not require network connectivity as a basic condition. Additionally, they must meet accessibility requirements such as semantic HTML, keyboard accessibility, and handling reduced motion settings.

Installation is possible via the npx skills add plannotator/effective-html command, and it can be integrated as a plugin into existing agent environments such as Claude Code or Codex.