Design Arsenal

Design Arsenal — الأداة الموحدة لتصميم الواجهات

Ein Werkzeug. Ein Einstiegspunkt. Elf Module. Dies ist eine einzige Fähigkeit – alles läuft über diese Datei. Sieben weltklasse externe Werkzeuge und vier eigene Module sind keine separaten Fähigkeiten mehr; sie sind interne Module, jedes dokumentiert in einer MANUAL.md, die Sie bei Bedarf von der Festplatte lesen.

EXTRAKTION → GESCHMACK → AUFBAU → BEWEGUNG → VERFEINERUNG → VERIFIKATION
 extrahieren   geschmack   code      gsap /        impeccable   playwright-cli
 + design-tokens            react-bits  transitions
rtl-arabic (Kontextebene – jeglicher arabischer Inhalt)
a11y (durchläuft jede Stufe)       web-vitals (budgetiert jede Stufe)

Ein-Werkzeug-System: Diese Fähigkeit wird einmal als einzelnes Werkzeug namens design-arsenal installiert, und alles, was Sie tun, läuft über diese Datei. Die sieben vorherigen Werkzeuge sind jetzt interne Module (zusammen mit 4 eigenen Modulen: rtl-arabic, a11y, design-tokens und web-vitals) – sie werden nicht einzeln installiert und erscheinen nicht als eigenständige Werkzeuge, sondern ihre Handbücher (MANUAL.md) werden bei Bedarf von der Festplatte gelesen.

---

🧭 Modul-Dispatch – Lesen Sie zuerst diese Tabelle

Identifizieren Sie EIN Modul aus der Aufgabe, lesen Sie dessen MANUAL.md von der Festplatte (Pfade relativ zum Verzeichnis dieser Datei) und folgen Sie ihm. Laden Sie niemals mehr als zwei Module für eine einzelne Aufgabe.

#	Aufgabensignal (wonach der Benutzer fragt)	Modul	Von Festplatte lesen
1	Das Design einer Website kopieren: "Extrahiere Design von stripe.com", "Welche Tokens/Farben/Schriftarten verwendet diese Seite?", "Wandle diese URL in ein Tailwind-Theme um"	extrahieren (designlang)	skills/extract-design/MANUAL.md
2	Art Direction & Anti-Slop vor dem Bau: "Erstelle eine Landing Page", "Design, das nicht nach Vorlage aussieht", "Wähle eine Palette/Schriftrichtung"	geschmack (taste-skill v2)	skills/taste/MANUAL.md
3	Vorhandene UI verfeinern, überprüfen oder verbessern: "polieren", "prüfen", "kritisieren", "kräftiger", "leiser", "setzen", "färben", "härten", "destillieren"	polieren (impeccable, 24 Befehle)	skills/impeccable/MANUAL.md
4	Fortgeschrittene programmatische Animation: "GSAP", "Scroll-Animation", "Timeline", "ScrollTrigger", "Staffelung", "Pinning"	bewegung/gsap (8 Module)	skills/gsap/gsap-<modul>/MANUAL.md
5	Fertige animierte React-Komponenten: "Animierter Hero", "Text-Effekt", "Animierter Hintergrund", "Glare-Hover", "Splitscreen"	komponenten (react-bits, 218)	skills/react-bits/CATALOG.md
6	Mikrointeraktionen & UI-Bewegung in CSS: "Modal-Übergang", "Toast", "Benachrichtigungs-Badge", "Skeleton-Loader", "Erfolgs-Check", "KI-Denkzustand"	bewegung/transitions (43+ Snippets)	skills/transitions/transitions-dev/MANUAL.md
7	Verifizieren oder automatisieren: "Im Browser testen", "Screenshot", "Überprüfen, ob der Ablauf funktioniert", "Video aufnehmen", "Durch den Ablauf klicken"	verifizieren (playwright-cli)	skills/playwright-cli/MANUAL.md
8	Arabische/RTL-Oberfläche: "Arabische UI", "RTL", "عربي", "Rechts-nach-links", "bidi", jeglicher Inhalt mit arabischen Zeichen	rtl-arabic (eigen)	skills/rtl-arabic/MANUAL.md
9	Barrierefreiheit: "a11y", "barrierefrei", "WCAG", "Kontrast", "aria", "Screenreader", "Tastatur"	a11y (eigen)	skills/a11y/MANUAL.md
10	Design-Tokens: "Design-Tokens", "DTCG", "Theme-Tokens", "CSS-Variablen-Theme", "Palette in Tailwind konvertieren", "Token-Architektur"	tokens (eigen)	skills/design-tokens/MANUAL.md
11	Leistung: "Langsame Seite", "Lighthouse", "Core Web Vitals", "LCP", "INP", "CLS", "Perf-Budget", "Render-blockierend", "أداء", "بطيء", "سرعة"	web-vitals (eigen)	skills/web-vitals/MANUAL.md

Überlappungen → Tie-Breaker:

• Neues erstellen → zuerst geschmack (Richtung), dann beim Implementieren react-bits oder gsap.
• Vorhandenes neu gestalten → zuerst polieren prüfen/kritisieren, dann geschmack falls eine neue Richtung nötig ist.
• Reine Mikrointeraktion (ein Element, Öffnen/Schließen-Zustand) → transitions (CSS, günstig). Vollständige Szenenchoreografie, Scroll oder Physik → gsap.
• Maschinenlesbare Tokens (JSON/DTCG-Dateien) → tokens. Prosa-Design-Brief von einer Live-Seite → extrahieren. Screenshot → Tokens → tokens direkt.
• Jeglicher arabischer Inhalt → rtl-arabic vor dem Styling lesen, unabhängig davon, welches Modul führt.
• Bewegung + Barrierefreiheitsfrage → die a11y-Reduced-Motion-Regeln gewinnen immer über Bewegungsreichtum.
• Bewegung + Leistungsfrage → das web-vitals-Main-Thread-Budget gewinnt; Animationen werden nur auf transform/opacity ausgeliefert.
• "Seite ist langsam" → zuerst web-vitals statisches Linting (strukturelle Ursachen), dann messen (§8 seines Handbuchs) – niemals eine Metrik raten.
• Nach JEDER UI-Änderung → anbieten, mit verifizieren zu überprüfen (Screenshot des Ergebnisses).

---

🌳 Entscheidungsbaum – Route in vier Fragen

Fragen Sie in dieser Reihenfolge, und stoppen Sie beim ersten Treffer:

1. Enthält der Inhalt Arabisch (oder eine andere RTL-Schrift)? → rtl-arabic als Kontextebene hinzufügen, dann unten fortfahren.
2. Ist die Eingabe ein vorhandenes Design, das konsumiert werden soll? URL → extrahieren; Screenshot/Mockup → tokens; Palettendatei → tokens.
3. Erstellt die Aufgabe etwas Neues, oder ändert sie etwas Bestehendes? Neu → geschmack → bauen (bei Bedarf aus react-bits/gsap/transitions ziehen). Vorhanden → erst polieren prüfung (/impeccable audit), dann geschmack nur, wenn eine neue Richtung nötig ist.
4. Womit endet die Aufgabe? Auslieferung von UI → a11y-Gates + web-vitals-Lint + verifizieren-Screenshots ausführen. Erstellung einer Theme-/Tokendatei → tokens-Exporte + a11y-Prüfung der Paare.

Lesen Sie höchstens zwei MANUAL.md-Dateien pro Aufgabe; die vier eigenen Module können mit einem externen Modul kombiniert werden (z.B. rtl-arabic + geschmack).

---

🚫 Anti-Pattern-Register – Diese niemals ausliefern

Modulübergreifende Verbote aus den Handbüchern. Wenn Ihre Ausgabe eines davon enthält, ist die Aufgabe nicht erledigt:

• Ein <div onClick> als Ersatz für einen Button (a11y §3) – Tastatur-tot, Screenreader-unsichtbar.
• Grau-auf-Farbe-Text, oder jedes Vorder-/Hintergrundpaar unter 4.5:1 (a11y §2, impeccable-Verbot) – führen Sie das Kontrastskript aus, anstatt zu raten.
• outline: none ohne Ersatz-Fokusring (a11y §5).
• Animation ohne prefers-reduced-motion-Schutz (a11y §7, transitions-Regel) – die strengere Regel gewinnt.
• letter-spacing auf arabischem Text (rtl-arabic §3) – es zerbricht die verbundene Schrift.
• Physische left/right-CSS-Eigenschaften in einer RTL-Seite (rtl-arabic §1) – verwenden Sie logische Eigenschaften.
• Hartcodierte Hex-/px-Werte in Komponenten, wenn eine Tokendatei existiert (tokens §7) – nur Tokendateien enthalten Rohwerte.
• GSAP für einen Ein-Element-Hover (verwenden Sie transitions) oder CSS-Übergänge für eine gescrollte Szene (verwenden Sie gsap).
• Ein react-bits-Komponentenname, der nicht in catalog.json ist – niemals einen erfinden.
• Karten in Karten verschachtelt, Bounce-Easing auf UI, und die anderen impeccable-Slop-Anzeichen – /impeccable audit fängt sie.
• loading="lazy" auf dem Hero/LCP-Bild (web-vitals §2) – der Browser entdeckt die Anfrage erst nach dem Layout.
• Ein <img> oder <iframe> ohne explizite width/height (web-vitals §3) – garantierte Layoutverschiebung.
• Ein klassisches <script src> in <head> ohne defer/async, oder jedes document.write (web-vitals §7).
• Ein @font-face ohne font-display, oder ein Google-Fonts-Stylesheet ohne preconnect zu fonts.gstatic.com (web-vitals §6).

---

📦 Was ist enthalten

design-arsenal/                  ← EINE Fähigkeit, einmal installiert
├── SKILL.md                     ← der einzige Einstiegspunkt (diese Datei)
├── index.json                   ← maschinenlesbarer Modul-Index
├── install.sh                   ← Ein-Befehl-Installer (alle Plattformen)
├── ATTRIBUTION.md               ← Quellen & Lizenzen
├── README.md                    ← الدليل الكامل بالعربية
├── demo/index.html              ← funktionierende Demo des Bewegungs-Stacks
├── examples/gsap/               ← GSAP-Einstiegsbeispiele (react/vue/nuxt/vanilla)
└── skills/                      ← interne Module (nur Referenzhandbücher)
    ├── extract-design/          ← designlang: URL → vollständiges Designsystem (17+ Dateien)
    ├── taste/                   ← taste-skill v2: 13 Anti-Slop-Regeln + Bibliothek + Inspektor
    ├── impeccable/              ← impeccable: 24 Befehle + 60+ Detektorregeln + Skripte
    ├── gsap/                    ← 8 GSAP-Module: core/timeline/scrolltrigger/react/plugins/…
    ├── react-bits/              ← 218 animierte React-Komponenten (TS-CSS + TS-Tailwind) + Katalog
    ├── transitions/             ← transitions.dev: 18 Übergangsreferenzen + Tokens
    ├── playwright-cli/          ← Browser-Automatisierungsmodul + 10 Referenzen
    ├── rtl-arabic/              ← eigen: Arabische/RTL-Oberflächen (logische Eigenschaften, Typografie, 10-Punkte-Prüfung)
    ├── a11y/                    ← eigen: WCAG 2.2 AA Gates + null-Abhängigkeits-Kontrastskript
    ├── design-tokens/           ← eigen: DTCG-Architektur + Multi-Ziel-Konverter
    └── web-vitals/              ← eigen: Core Web Vitals Playbook + statischer HTML-Linter

Jedes Modulverzeichnis enthält eine MANUAL.md (früher seine eigene SKILL.md). Da nur diese SKILL.md im Stammverzeichnis existiert, registriert und lädt Ihr Agent genau ein Werkzeug – keine Fähigkeiten-Schwemme, keine doppelten Auslöser, keine Kontextaufblähung durch sieben installierte Fähigkeiten.

---

🚀 Schnellstarts

Von Null zur Landing Page (die vollständige Pipeline):

1. (Optionale Vorerkundung) extrahieren von 1–2 Konkurrenz-URLs → Tokens + Muster.
2. geschmack → Brief lesen, Richtung ableiten (Schrift/Palette/Layout-Familie), Verbote durchsetzen.
3. Bauen. Bewegung aus transitions, fertige Komponenten aus react-bits, Szenenarbeit aus gsap ziehen.
4. polieren → /impeccable polish + /impeccable audit vor der Auslieferung.
5. verifizieren → Screenshots Desktop + Mobilbreiten, bestätigen, dass nichts kaputt ist.

Nur hässliche UI reparieren? → polieren allein (Start: /impeccable audit <ziel>). Nur animieren? → transitions für Mikro, gsap für Szenen, niemals beides auf demselben Element. Seite langsam / Vitals fallen durch? → web-vitals: Markup linten, LCP/CLS/INP-Playbook anwenden, dann messen (§8).

---

⚙️ Einmalige Umgebungsnotizen

• extrahieren benötigt Node 20+ und Playwright (npx designlang <url> erledigt die Installation beim ersten Durchlauf).
• polieren-Skripte sind eigenständige Binärdateien in skills/impeccable/scripts/; unter Windows ohne sh verwenden Sie impeccable.cmd.
• geschmack-Skripte sind null-Abhängigkeits-Node (node skills/taste/scripts/lint.mjs src/).
• web-vitals-Linter ist null-Abhängigkeits-Node 18+ (node skills/web-vitals/scripts/webvitals.mjs page.html).
• verifizieren benötigt npm install -g @playwright/cli + playwright-cli install-browser chromium.
• komponenten lokale Quellen sind einfache Dateien – kopieren Sie aus ts-tailwind/ (Tailwind-Projekte) oder ts-default/ (CSS-Projekte), oder verwenden Sie das Live-Register: {"registries":{"@react-bits":"https://reactbits.dev/r/{name}.json"}} in components.json.
• GSAP-Beispiele befinden sich in examples/gsap/{vanilla,react,vue,nuxt}.

🧠 Regeln für den Agenten

1. Ein Werkzeug, ein Einstieg. Alle Anfragen laufen über diese Datei. Wenn eine Aufgabe zur Pipeline passt, arbeiten Sie Modul für Modul in der Pipeline-Reihenfolge – suchen Sie nicht nach den Modulen als separate installierte Fähigkeiten; sie sind intern zu dieser einen.
2. Von der Festplatte lesen. Modulpfade sind relativ zum Verzeichnis dieser Datei. Lesen Sie die MANUAL.md des Moduls vollständig, bevor Sie handeln.
3. Treffen, nicht mischen. Eine Aufgabe → ein primäres Modul. Module nur in der obigen Pipeline-Reihenfolge stapeln.
4. Respektieren Sie die Verbote jedes Moduls. geschmack verbietet Schablonen-Looks; impeccable verbietet Grau-auf-Farbe, verschachtelte Karten, Bounce-Easing; transitions und a11y erfordern prefers-reduced-motion-Schutz; rtl-arabic verbietet Buchstabenabstand auf Arabisch und physische left/right in RTL-Seiten; web-vitals verbietet faule Helden, dimensionslose Medien und render-blockierende Kopfskripte. Bei Regelkonflikten gewinnt die strengere Regel – und a11y-Sicherheitsregeln überwiegen jede ästhetische Präferenz.
5. Niemals Komponentennamen erfinden. Für react-bits verwenden Sie nur Namen, die in skills/react-bits/catalog.json vorhanden sind; andernfalls bauen Sie unter geschmack-Regeln von Grund auf neu.
6. Messen, nicht schätzen. Kontrastbehauptungen kommen von node skills/a11y/scripts/contrast.mjs; Token-Exporte von node skills/design-tokens/scripts/convert.mjs; strukturelle Leistungsbehauptungen von node skills/web-vitals/scripts/webvitals.mjs. Wenn die Skripte Ihrem Auge widersprechen, gewinnen die Skripte.
7. Arabischer Inhalt wird über rtl-arabic geleitet. Sobald eine Aufgabe arabischen oder RTL-Inhalt enthält, lesen Sie skills/rtl-arabic/MANUAL.md, bevor Sie CSS schreiben – selbst wenn ein anderes Modul führt.
8. Namensnennung. Die sieben externen Module stammen von unabhängigen Open-Source-Projekten – behalten Sie deren Lizenzen intakt (siehe ATTRIBUTION.md). Die vier eigenen Module (rtl-arabic, a11y, design-tokens, web-vitals) sind Teil dieses Bundles.