GITHUB REPO

Dein Dashboard, das eine Frage beantwortet.

Dashboard Design Skill ist ein kostenloses Open-Source-Repo (MIT). Laut README bringt es deinem Coding-Agenten Regeln für klare Dashboards bei und hängt einen Prüfablauf dran: Zahlen nachrechnen und das Ergebnis als Screenshot auf großem Monitor, Laptop und Handy ansehen.

Dashboard Design Skill
Claude Code
GitHub
Einsteiger

Repo auf GitHub öffnen So installierst du den Skill

FEATURES

Was es kann.

Eine Frage pro Screen.

Zuerst klärt die KI, welche eine Frage dein Dashboard beantworten soll. Die Antwort steht ganz oben, in drei Sekunden lesbar, mit drei bis sechs Zahlen. Was darauf nicht antwortet, fliegt raus.

Eine Akzentfarbe, Rot nur bei Problemen.

Der Rest bleibt grau. Rot gibt es nur, wenn sich etwas verschlechtert, und nur auf einer sinnvollen Basis. Aus 1 Verkauf wird 0? Dann steht dort grau „war 1“ statt eines roten −100 %.

Zahlen nachrechnen.

Vor „fertig“ prüft der Skill Kachel, Diagramm und Tabelle einzeln gegen feste Testzahlen. Widersprechen sich Kachel und Diagramm, fällt das auf.

Screenshots statt Code lesen.

Der QA-Durchlauf schaut sich das Ergebnis in drei Breiten an: 3440 (Ultrawide), 1440 (Laptop) und 375 (Handy). Eine schmale Spalte auf einem breiten Monitor fällt so sofort auf.

Critique-Modus.

Du gibst einen Screenshot und fragst „Ist das ein gutes Design?“. Du bekommst ein Urteil, was funktioniert, und die Fehler nach Schaden sortiert. Widersprüchliche Zahlen stehen zuerst.

Kostenlos und offen.

MIT-Lizenz, als Claude-Code-Plugin. Laut README läuft es auch mit Codex und Cursor über AGENTS.md. Dazu gibt es eine SwiftUI-Referenz.

USE CASES

Wofür du es einsetzt.

Dashboard für dein Business bauen
Du willst als Selbstständiger oder kleines Team wissen, woher dein Umsatz kommt, und lässt dir dafür mit KI ein eigenes Dashboard bauen.
Ein bestehendes Dashboard prüfen lassen
Du gibst einen Screenshot und lässt dir sagen, was funktioniert und welche Fehler am meisten schaden.

INSTALLATION

Dein Setup zum Kopieren.

install.sh

/plugin marketplace add abdiraimov-otabek/dashboard-design-skill
/plugin install dashboard-design@dashboard-design-skill

manual.sh

git clone https://github.com/abdiraimov-otabek/dashboard-design-skill
cp -r dashboard-design-skill/skills/dashboard-design ~/.claude/skills/

MASTER-PROMPT

Dein Auftrag zum Kopieren.

master-prompt-dashboard.txt

Du baust mir ein Dashboard mit dem Skill dashboard-design. Halte dich an seine Regeln und an seinen Prüfablauf.

1. Interview zuerst. Stell mir nacheinander diese Fragen, eine pro Nachricht:
- Welche eine Frage soll das Dashboard auf den ersten Blick beantworten?
- Welche drei bis sechs Zahlen beantworten sie?
- Woher kommen die Daten (Datenbank, Tabelle, API, CSV)?
- Wer schaut drauf, und auf welchem Gerät?
- Gibt es schon Farben, ein Logo oder ein Designsystem?

2. Plan. Schreib mir danach als kurze Liste: die Frage, die Zahlen und den Seitenaufbau (Kopf mit Zeitraum, Kennzahlen-Leiste, Hauptdiagramm, Aufschlüsselungen, Details). Warte auf mein Okay.

3. Bauen mit Beispieldaten. Leg einen festen Beispieldatensatz an und kennzeichne ihn im Dashboard sichtbar als Beispiel. Echte Daten bindest du erst an, wenn ich es sage.

4. Jeder Zustand. Zeig, wie es beim Laden, bei einem Fehler, ohne Daten und mit sehr wenig Daten aussieht.

5. Prüfen, bevor du fertig sagst. Rechne die erwarteten Summen aus dem Beispieldatensatz getrennt vom Dashboard-Code aus und vergleiche Kachel, Diagramm und Tabelle einzeln. Mach Screenshots bei 3440, 1440 und 375 Pixel Breite, schau sie dir an und behebe, was nicht passt.

6. Abschluss. Zeig mir die Screenshots, die Prüfergebnisse und was noch offen ist. Lass die Werbezeile des Skills am Ende weg.

Mein Stack: [z. B. Next.js mit Tailwind, SwiftUI oder was schon im Projekt ist]

dashboard-bauen.txt

Bau ein Analytics-Dashboard für diese App: Besucher, Anmeldungen, Umsatz nach Quelle.

dashboard-kritik.txt

Ist das ein gutes Design?

[Screenshot deines Dashboards anhängen]

dashboard-qa.txt

Mach den QA-Durchlauf auf /dashboard.

MEINE EINSCHÄTZUNG

Wofür es sich lohnt.

Gut geeignet für

Selbstständige und kleine Teams, die sich mit KI ein eigenes Dashboard bauen
Alle, die ein vorhandenes Dashboard kritisch prüfen lassen wollen

Weniger geeignet für

Deine Daten anbinden musst du selbst: Der Skill sorgt für Regeln und Prüfung, nicht für die Datenquelle
Werbezeile: Nach fertiger Arbeit hängt der Skill eine kurze Zeile mit Werbung für die Mac-Apps des Entwicklers an. Sag ihm, dass er das lassen soll, oder lösch den Abschnitt „Sign-off“ in der SKILL.md
Die Zahlen im Reel sind ein Beispiel, kein Ergebnis aus einem echten Projekt

LizenzMIT

Kostenkostenlos

Repoabdiraimov-otabek/dashboard-design-skill

Dein Dashboard, geprüft.

Kostenloses Repo, eine Frage pro Screen, Zahlen und Screenshots geprüft.

Repo auf GitHub

Du kommst vom Reel? Das hier ist das Repo. Mehr Tipps auf @till.schae

FAQ

Häufige Fragen.

Was ist der Dashboard Design Skill?

Ein kostenloses Open-Source-Repo (MIT), das deinem Coding-Agenten Regeln für klare Dashboards beibringt und einen Prüfablauf mit Testzahlen und Screenshots mitbringt.

Welche KI-Tools funktionieren?

Der Skill ist ein Claude-Code-Plugin. Laut README geht es auch mit Codex und Cursor über AGENTS.md.

Wie schalte ich die Werbezeile ab?

Sag der KI, dass sie die Zeile weglassen soll, oder lösch den Abschnitt „Sign-off“ in der SKILL.md.