plannotator/effective-html

Agent skills for useful HTML artifacts, wireframes, interactive prototypes, plans, and diagrams.

What it solves

It provides a set of specialized skills for AI agents to create high-quality, self-contained HTML artifacts. This allows agents to move beyond text-based explanations and instead generate visual aids like wireframes, prototypes, and diagrams that more clearly communicate structure and intent.

How it works

The project offers a collection of six distinct skills that separate creative direction from technical reliability. A broad html skill handles general requests and routing, while specialized skills manage specific fidelity levels: html-wireframe for low-fidelity layouts, html-prototype for interactive behavior, html-diagram for system architecture, and html-plan for implementation roadmaps. A separate design-artifact skill provides a design process without forcing a specific visual style.

Who it’s for

It is designed for developers and users of AI coding agents (such as Claude Code or Codex) who want their agents to produce visual documentation and interactive prototypes rather than just code or text.

Highlights

  • Specialized Artifacts: Generates everything from low-fidelity wireframes to fully interactive prototypes and system diagrams.
  • Self-Contained: Every generated artifact is responsive, accessible, and verified for browser compatibility.
  • Plugin Support: Easily installable as a plugin for agents like Claude Code and Codex.
  • Modular Design: Skills are independent and can be used individually or as a complete collection.

Related

  • Project
    kangarooking/kangarooking-skills

    A collection of structured, open-source Agent Skills compatible with the Agent Skills standard, providing reusable workflows for content creation, image generation, and AI project engineering.

  • Project
    DannyMac180/skills

    A collection of reusable AI agent skills and plugins for Claude Code and Codex, enabling advanced supervised workflows, mod management, and personalized learning.

  • Project
    shengjidaguai-china/personal-homepage-skill

    Personal Homepage Skill is an AI‑agent plug‑in that lets Claude‑style agents generate high‑quality personal websites, portfolios, and HTML slide decks using a library of 18 ready‑made visual templates. It includes a React/Tailwind gallery, single‑file HTML templates, and a documented workflow that enforces reference‑first design and quality checks. Install as a Claude skill or run the gallery locally to pick a style, then export a share‑ready HTML page.

  • Project
    Pluviobyte/rnskill

    A comprehensive library of modular AI Agent skills for Codex and Claude Code, specializing in automated content creation pipelines for video, social media, and business analysis.

  • Project
    nateherkai/scroll-craft

    An agent skill and design framework for AI coding agents to build premium, scroll-driven websites that avoid generic AI design tropes through strict craft standards and automated verification.