IFQ Design Skills

Verzweigt verifizierte HTML-Vorlagen für Decks, Dashboards und Landing Pages mit einem echten Lint-Gate

von peixl · peixl/ifq-design-skills

Getestet · Funktioniert ★ 9.6/10

IFQ Design Skills — Verzweigt verifizierte HTML-Vorlagen für Decks, Dashboards und Landing Pages mit einem echten Lint-Gate

Was es kann

Leitet eine HTML-zentrierte visuelle Designanfrage (Landing Page, Deck, Dashboard, Infografik, Visitenkarte, Brand System oder Motion-/Exportauftrag) an eine von 12 integrierten Vorlagen weiter, füllt diese aus und verifiziert sie vor der Auslieferung mit einem gebündelten Zero-Install Placeholder/IFQ-Label Linter. Wird ausgelöst bei konkreten Anfragen für visuelle Lieferobjekte und lehnt explizit Produktions-Frontend-Engineering, SEO-Seiten, Backend-Arbeiten oder reine Textbearbeitungen ab. MP4/GIF/PDF/PPTX Export ist eine separate Opt-in-Stufe, die ffmpeg/Playwright erfordert.

Testbericht

Den gebündelten Smoke-Test live ausgeführt (16/16 Checks grün) und dann den echten verify-lite Linter gegen eine geforkte Portfolio-Landingpage – er fing korrekt ein unbesetztes dynamisches `data-ifq-year` Attribut ab und ließ den Build fehlschlagen, bis es behoben war, ein Defekt, den das handgeschriebene Basislinien-HTML überhaupt nicht erfassen konnte.

Getestet am: 2026-07-14 · Claude Code 2.x (agent harness)

Installation

git clone https://github.com/peixl/ifq-design-skills
cd ifq-design-skills
mkdir -p ~/.claude/skills
cp -r . ~/.claude/skills/ifq-design-skills

Befehle & Beispiel-Prompts

  • /ifq-design-skillsVerzweigt verifizierte HTML-Vorlagen für Decks, Dashboards und Landing Pages mit einem echten Lint-Gate

Skills reagieren auf normale Anfragen — keine Slash-Befehle nötig. Nach der Installation aktivieren Prompts wie diese den Skill (auf Englisch):

  • Build a landing page for our data-viz portfolio from a template
  • Fork a dashboard template and fill it with my real content
  • Turn this template into a business card design and verify it