Neuer Claude-Code-Skill für strukturierte HTML-Pläne

X-PostThariq5. Oktober 2026Tool

Entwickler Thariq stellt einen Skill für Claude Code vor, der Entwicklungspläne als interaktive HTML-Dokumente aufbereitet. Das Tool nutzt einfache Sprache, zeigt Code-Ausschnitte, hebt offene Fragen hervor und generiert Mockups, während Linting typische Fehler verhindert.

Das Wichtigste

Generiert Entwicklungspläne in Claude Code als HTML-Dokumente.
Hebt ungelöste Fragen hervor und bindet Code-Snippets sowie Mockups ein.
Nutzt Linting, um typische Fehlerfälle bei der Listenerstellung durch Claude zu verringern.
Der Entwickler sammelt Feedback aus der Community vor der breiteren Veröffentlichung.

Warum das relevant ist

Bei KI-gestützten Programmierwerkzeugen wie Claude Code führen unklare Annahmen in der Planungsphase oft zu Fehlern in späteren Schritten. Strukturierte und visuelle Pläne erleichtern Entwicklern das Prüfen vor der Ausführung.

Einordnung

Anstelle von unübersichtlichen Textblöcken bereitet der Skill den Planungsfortschritt visuell auf. Das explizite Herausstellen offener Fragen adressiert ein Kernproblem generativer Modelle, die Lücken im Prompt häufig ungefragt durch fehlerhafte Vermutungen füllen. Die Integration von Linting dient als zusätzliche Absicherung gegen Halluzinationen oder fehlerhafte Ausgaben im Planungsprozess.

Original-Post

Thariq

@trq212 · 5. Oktober 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

4640 Likes301 Antworten4722 Lesezeichen509.538 Aufrufe

Auf X ansehen

Ausgewählte Antworten (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

Erwähnte Links

Announcement post by Thariq on Xx.com/trq212/status/2107192901537329354

Zusammenfassung von KI erstellt (Gemini 3.8 Flash, 9. Oktober 2026). Sie kann Fehler enthalten – maßgeblich ist die Originalquelle.

Inhaltlich ähnlich, ermittelt über die KI-Suche.

X-Post:Dan McAteer9. Sep. 2026
diagram-design: Diagramm-Skill für Claude Code und Codex
Dan McAteer empfiehlt den Skill „diagram-design“, mit dem Entwickler über Codex und Claude Code 39 verschiedene Diagrammtypen erstellen können.
1202Lesezeichen52.104Aufrufe
KI & AI· Tool
Artikel:Anthropic5. Sep. 2026
Claude Code mit Skills erweitern: Architektur und Best Practices
Anthropic dokumentiert das Skill-System für Claude Code. Entwickler können Arbeitsabläufe, Workflows und wiederkehrende Prompts über SKILL.md-Dateien definieren, die auf dem offenen Agent-Skills-Standard basieren und dynamische Kontext-Injektion sowie Subagenten unterstützen.
KI & AI· Tool
Repository:Motionsites-AI/claude-skill28. Okt. 2026
MotionSites Web Builder: Claude-Skill für hochwertige Landingpages
Der kostenlose Claude-Skill von MotionSites hilft KI-Modellen, visuell anspruchsvolle Websites mit echten Medien und Animationen zu erstellen. Statt generischer Layouts nutzt Claude Design-Vorlagen, ein Media-Archiv und Playwright-Screenshots zur automatischen Selbstkorrektur.
555SternePython
KI & AI· Tool
Link:chaseai-yt5. Sep. 2026
claudex-loop: Vierstufige Planungsoptimierung für Claude Code
claudex-loop ist ein Open-Source-Skill für Claude Code, der Implementierungspläne vor der Codegenerierung in vier Stufen absichert. Zwei KI-Modelle prüfen und verifizieren dabei Entwürfe gemeinsam.
KI & AI· Tool
Artikel:Anthropic5. Sep. 2026
Anthropic stellt Claude Design als Research Preview vor
Anthropic Labs hat Claude Design angekündigt, ein neues Werkzeug zur gemeinsamen Erstellung von Benutzeroberflächen, Prototypen, Präsentationen und Marketingmaterialien. Das Tool basiert auf dem Vision-Modell Claude Opus 4.7 und richtet sich an Designer, Produktmanager und Marketing-Teams mit Pro-, Max-, Team- oder Enterprise-Abonnements.
KI & AI· Ankündigung
X-Post:angel10. Aug. 2026
Anthropic Skill „Frontend Design“ gegen generische KI-Webdesigns
Laut einem Beitrag von angel (@angeldot_) bietet Anthropic mit „Frontend Design“ einen Open-Source-Skill, der generischen Webdesigns durch LLMs entgegenwirken soll. Das Tool zwingt das Modell dazu, vor der Codegenerierung ein festes visuelles Konzept festzulegen.
5776Lesezeichen413.040Aufrufe
KI & AI· Tool