New Claude Code Skill Generates Structured HTML Plans

X postThariqTool

Developer Thariq has unveiled a skill for Claude Code that formats development plans into HTML documents. It uses plain language, displays code snippets, surfaces open questions, and generates mockups, using linting to prevent common failures.

Key points

  1. Builds development plans inside Claude Code as HTML documents.
  2. Surfaces open questions and embeds code snippets and mockups.
  3. Employs linting to reduce standard failure modes encountered by Claude.
  4. Currently seeking community feedback ahead of a wider release.

Why it matters

In AI-assisted coding tools like Claude Code, hidden assumptions during the planning phase often cause compounding errors downstream. Inspectable, visual plans make manual verification simpler before executing code.

Analysis

Replacing walls of Markdown prose with inspectable HTML surfaces improves reviewability. Explicitly highlighting unresolved questions tackles a key vulnerability of LLM workflows, where models tend to fabricate details instead of asking for clarification. Adding linting into the planning generation further tightens output quality.

Original post

Thariq

@trq212 · 5 October 2026

I've been working on a skill that makes better HTML plans in Claude Code. It uses simple language, shows code snippets, surfaces questions & makes mockups. Linting reduces the normal failure cases that Claude runs into. Would love your feedback before shipping more broadly! t.co/U2Gb1K37vl

4.6k likes301 replies4.7k bookmarks509.5k views

View on X
Selected replies (5)
  • @alfrodo_perez @trq212 @dillon_mulroy Love the call stack blocks. This is why I built SpecKit Companion: a visual way to see everything a spec run created, so I understand it instead of scrolling through files. In case anyone is interested ..it is or @github Spec Kit and works in @VisualStudio IDE, @claudeai Mod, t.co/0HbvCCpAog
  • @darrenallatt @trq212 @GustavoValverde Or better yet, why don’t you ship plan mode with the ability for it to be integrated into a system of record like Jira or Linear etc? I have setup so when ExitPlanMode hook fires, background Claude process puts it all in Jira with each step as a task, updates plan to add issueId
  • @Karmedge @trq212 Cool. I actually made the entire software end‑to‑end generative with LLM buttons and backend & claude code sends there html canvas with those buttons for review very good experience/ dont opne claude anymore just review output + give feedback now
  • @MichaelRyerse @trq212 Just tried this out today and I really like the concept, but think that it needs some work. It seems evident that you fall on the “I read the code” side of the debate while a lot of others don’t. Typically, when I ask Claude to build an HTML file representing a plan, I ask it to
  • @rcsaxe @trq212 Excited to check this out and give you some feedback and get inspiration. I’ve been doing this with my skills for quite some time. I recently decided to ship something similar. Maybe you can take some inspiration from it: t.co/XHqOsaplBp t.co/nEjEfx6ZU1

Mentioned links

Summary generated by AI (Gemini 3.8 Flash, 9 October 2026). It may contain errors – the original source is authoritative.

Related entries

Similar in content, found by the AI search.

  • Article:Anthropic

    Extending Claude Code with Skills: Architecture and Best Practices

    Anthropic details the skills system for Claude Code. Developers can encapsulate recurring procedures and workflows inside SKILL.md files built on the open Agent Skills standard, supporting dynamic context injection and subagent delegation.

    AI & LLMs· Tool

  • Article:Anthropic

    Anthropic Announces Claude Design Research Preview

    Anthropic Labs has launched Claude Design, a tool for creating prototypes, interface mockups, presentations, and marketing collateral in collaboration with Claude. Powered by Claude Opus 4.7, it is available in research preview for Pro, Max, Team, and Enterprise subscribers.

    AI & LLMs· Announcement

  • Repository:display-dev/visualize

    visualize: On-Brand HTML Artifacts for AI Coding Agents

    visualize is an open-source skill for AI coding assistants such as Claude Code, Cursor, and Codex, designed to eliminate generic AI styling in generated HTML by applying persistent brand profiles and structured refinement commands.

    67starsHTML

    AI & LLMs· Tool

Back to the knowledge base

Let's talk about your project

Get in touch

Locations

  • Mattersburg
    Johann Nepomuk Bergerstraße 7/2/14
    7210 Mattersburg, Austria
  • Vienna
    Ungargasse 64-66/3/404
    1030 Wien, Austria

Parts of this content were created with the assistance of AI.