Agent Skills für HTML

Prüft und verbessert die Web-Barrierefreiheit gemäß den WCAG 2.2-Richtlinien. Verwenden, wenn um „improve accessibility“, „a11y audit“, „WCAG compliance“, „screen reader support“, „keyboard navigation“ oder „make accessible“ gebeten wird.

von addyosmani/web-quality-skills

• Forms
• Media
• Accessibility

Prüft UI-Code auf Einhaltung der Web Interface Guidelines. Verwenden, wenn gefragt wird: "review my UI", "check accessibility", "audit design", "review UX" oder "check my site against best practices".

von vercel-labs/agent-skills

• Semantics

Tool-Suite zum Erstellen aufwendiger, mehrkomponentiger claude.ai HTML-Artefakte mit modernen Frontend-Webtechnologien (React, Tailwind CSS, shadcn/ui). Verwenden für komplexe Artefakte, die State Management, Routing oder shadcn/ui-Komponenten erfordern – nicht für einfache Single-File-HTML/JSX-Artefakte.

von anthropics/skills

Frontend-Interface-Design-Skill, der UX, visuelle Hierarchie, Accessibility, responsives Verhalten, Theming und Design Systems für Web-UI abdeckt.

von pbakaus/impeccable

Voraussetzungen (angegeben): Node.js

Konvertiert Markdown in gestyltes HTML mit WeChat-kompatiblen Themes. Unterstützt Code-Highlighting, Mathe, Mermaid (gerendert als PNG über headless Chrome), PlantUML, Fußnoten, Alerts, Infografiken und optionale Fußnoten-Zitate für externe Links. Verwenden, wenn der Nutzer nach "markdown to html", "convert md to…" fragt.

von jimliu/baoyu-skills

• Semantics
• Forms

Erstellt ausgefeilte Architektur-, Workflow-, Sequenz- und Datenflussdiagramme als eigenständiges interaktives HTML mit Inline-SVG und Themes.

von tt-a1i/archify

• Semantics
• Forms
• Media

Verwandelt eine Antwort in eine einseitige visuelle HTML-Erklärung: Das Modell schreibt einen kurzen Markdown-Entwurf, und die mitgelieferte CLI baut eine Seite. Proaktiv und großzügig einsetzen, ohne gefragt zu werden, wann immer eine Seite dem Leser mehr hilft als reiner Text, selbst wenn reiner Text auch funktionieren würde: jede Erklärung, wie etwas funktioniert oder wie Teile zusammenhängen (Ablauf, Request-Pfad, Architektur, Code- oder Ordnerstruktur, Zustandsmaschine, Lebenszyklus, Historie); jeder Vergleich, Trade-off oder jede Entscheidung mit Vor- und Nachteilen; jede Diagnose, Review oder Untersuchung, besonders mit mehreren Ursachen oder Befunden zum Ranken; jede Antwort mit einer Tabelle, einer nummerierten oder gerankten Liste, Schritten, Verzweigungen oder mehreren Abschnitten; oder wenn der Nutzer sagt "I don't get it / draw it / explain visually / 讲讲原理 / 没看懂 / 画个图". Im Zweifel einsetzen: Eine Seite ist schnell und günstig zu erstellen. Auch für Erklärvideos ("make a video", "做个视频") und zum Ändern seiner Einstellungen. Nur bei Small Talk, einer trivialen einzeiligen Antwort oder wenn der Nutzer reinen Text verlangt, überspringen.

von QingYunA/answer-me-with-html

• Media

Der HyperFrames-Composition-Vertrag: renderbare HTML-Projekte mit data-*-Timing-Attributen, Tracks, Sub-Compositions und Validierung erstellen.

von heygen-com/hyperframes

• Forms

Sucht, installiert und verdrahtet Registry-Blöcke und -Komponenten in HyperFrames-Kompositionen, einschließlich der Verdrahtung installierter Elemente in index.html.

von heygen-com/hyperframes

• Semantics

Design-Token-Architektur, Komponentenspezifikationen, CSS-Variablen und Foliengenerierung für systematische Designsysteme.

von nextlevelbuilder/ui-ux-pro-max-skill

妙搭（Spark/Miaoda）应用开发与托管：应用创建、本地全栈开发、云端生成迭代、创意设计（UI mockup / 可交互原型 / 线框图 / 落地页 / 仪表盘 / 幻灯片 deck / 视觉探索）、AI相关能力和飞书平台能力或者其他外部能力集成、日志/Trace/监控指标/PV/UV 查询、环境变量管理、应用协作者与协作权限设置、应用角色与成员管理、自动化触发器（定时/记录变更/Webhook/飞书审批）。当用户要开发/新建一个系统·工具·平台·应用，或要本地开发 / 云端开发 / 修改 / 部署 / 发布 / 上线 / 拿可分享链接，或用 HTML 做页面·网站·部署到妙搭，或要设计 / design / mockup / prototype / wireframe / 做 PPT / deck / 视觉探索，或提到妙搭/Spark/Miaoda（应用运行时域名形如 *.aiforce.cloud）、应用数据库、应用文件存储、开放 API Key、可见范围、应用协作者/开发权限、应用角色/角色成员、线上日志、接口请求量、错误量、延迟、访问量、环境变量、给妙搭应用配自动化任务/定时触发/审批通过后自动触发时使用。不负责普通云盘文件上传（lark-drive）、飞书文档编辑（lark-doc）、原生幻灯片创建（lark-slides）。

von larksuite/cli

Browser-Automatisierungs-CLI für KI-Agents: Seiten navigieren, Formulare ausfüllen, klicken, Screenshots erstellen, Daten extrahieren und Web-Apps über CDP testen.

von vercel-labs/agent-browser

Browser-Automatisierungs-CLI für KI-Agents: gerenderte Inhalte abrufen, Formulare ausfüllen, klicken, Screenshots erstellen und Netzwerkantworten erfassen.

von browser-act/skills

• Semantics

Voraussetzungen (angegeben): Python

Prüft ein Penpot-Design gegen WCAG 2.1/2.2 AA (optional AAA) und erstellt einen strukturierten Schweregrad-Bericht: Farbkontrast, Touch-/Zielgrößen, Textalternativen, Überschriftenhierarchie und Tastatur-/Fokusreihenfolge. Schlägt Korrekturen vor — wendet sie nicht automatisch an. Dient außerdem als Evaluator im Brief-to-Screen-Loop. Auslöser: 'check accessibility', 'accessibility audit', 'WCAG check', 'contrast audit', 'a11y review', 'check color contrast', 'is this accessible'.

von penpot/penpot-ai-kit

Übersetzt den Code einer bestehenden Anwendungsseite, View oder Komponente in einen Penpot-Screen, der an das bestehende Design-System gebunden ist — Code-Styles werden auf semantische Tokens abgebildet und Library-Komponenten statt roher Formen wiederverwendet. Verwenden, wenn der Nutzer echten Code/Markup hat und ihn in Penpot Abschnitt für Abschnitt systemkonform rekonstruieren möchte. Trigger: 'build this in Penpot from code', 'turn this React/HTML/CSS into a Penpot screen', 'recreate this view in Penpot', 'port this page to Penpot', 'translate this component to Penpot bound to our tokens', 'code to Penpot'.

von penpot/penpot-ai-kit

• Forms

Prüfe ein Penpot-Design gegen seinen implementierten Code (eine Quellkomponente oder Storybook-Story) und gib einen strukturierten DRIFT-Bericht aus. Verwende dies, wenn ein Engineer bestätigen muss, dass der Build zum Design passt: HTML/CSS aus einer Auswahl extrahieren, seine Tokens/Struktur/Zustände auf die Code-Komponente abbilden, sie diffen und auflisten, was auf jeder Seite fehlt, mit Schweregrad und Abgleich. Fällt bei fehlender Code-Quelle sauber auf eine Design-System-Token-Prüfung zurück. Auslöser: 'design to code review', 'does my code match the design', 'design code parity', 'compare Penpot to my component', 'check this against Storybook', 'extract HTML/CSS from this selection', 'find design drift', 'design implementation diff'.

von penpot/penpot-ai-kit

Benennt Penpot-Ebenen semantisch in HTML-Elementnamen um (nav, header, main, section, article, button, input, label, h1-h6, p, ul, li, img) oder in Kebab-Case-Rollennamen und ersetzt automatisch generierte Namen wie 'Rectangle 12'. Verwende dies, um die Ebenenbenennung zu bereinigen, eine Datei für die Übergabe vorzubereiten oder als Voraussetzung für Barrierefreiheitsprüfungen (Überschriftenhierarchie) und Design-to-Code-Reviews (semantisches Mapping). Auslöser: 'rename layers', 'semantic layer names', 'rename to HTML elements', 'clean up layer names', 'fix layer naming', 'add semantic names to layers', 'prepare layers for handoff'.

von penpot/penpot-ai-kit

• Document structure
• Semantics
• Forms