web-design-mastery
✓UI-Design für Webanwendungen in Produktionsqualität basierend auf den Refactoring-UI-Prinzipien. IMMER aktivieren für: Zielseite, Dashboard, Authentifizierungsbildschirme, Heldenabschnitte, Kartendesign, Schaltflächendesign, Formulareingaben, Navigation, Layouts, Abstandsentscheidungen, Typografiehierarchie, Farbauswahl, Schatten, Tiefe, leere Zustände, Hintergrunddekoration. Bietet Design-Workflow, visuelle Hierarchie, Abstandssysteme (4-Pixel-Raster), Schriftskalierung, HSL-Farbsysteme, Schattenhöhe und den letzten Schliff. Türkisch: sayfa tasarımı, UI/UX, frontend tasarımı, web tasarım, güzel arayüz, modern tasarım, card tasarımı, buton stili, form tasarımı, renk paleti, tipografi. Englisch: schöne Benutzeroberfläche, elegantes Design, erstklassiges Erscheinungsbild, visuelle Hierarchie, Leerzeichen, Farbpalette, Typografieskala.
Installation
SKILL.md
Production-grade UI design principles from Refactoring UI by Adam Wathan & Steve Schoger.
| 1 | 4 | Micro gaps | | 2 | 8 | Tight, within components | | 3 | 12 | Related elements | | 4 | 16 | Section padding | | 6 | 24 | Between sections | | 8 | 32 | Major separation | | 12 | 48 | Large gaps | | 16 | 64 | Hero spacing | | 24 | 96 | Maximum separation |
| 12 | Labels, meta, fine print | | 14 | Body text, default | | 16 | Emphasis, subheadings | | 18 | Section headings | | 20 | Card titles | | 24 | Page section titles | | 30 | Page headings | | 36 | Hero subheading | | 48 | Hero heading | | 60-72 | Display text |
Fakten (zitierbereit)
Stabile Felder und Befehle für KI/Such-Zitate.
- Installationsbefehl
npx skills add https://github.com/anilcancakir/my-claude-code --skill web-design-mastery- Kategorie
- *Kreativität
- Verifiziert
- ✓
- Erstes Auftreten
- 2026-02-01
- Aktualisiert
- 2026-02-18
Schnelle Antworten
Was ist web-design-mastery?
UI-Design für Webanwendungen in Produktionsqualität basierend auf den Refactoring-UI-Prinzipien. IMMER aktivieren für: Zielseite, Dashboard, Authentifizierungsbildschirme, Heldenabschnitte, Kartendesign, Schaltflächendesign, Formulareingaben, Navigation, Layouts, Abstandsentscheidungen, Typografiehierarchie, Farbauswahl, Schatten, Tiefe, leere Zustände, Hintergrunddekoration. Bietet Design-Workflow, visuelle Hierarchie, Abstandssysteme (4-Pixel-Raster), Schriftskalierung, HSL-Farbsysteme, Schattenhöhe und den letzten Schliff. Türkisch: sayfa tasarımı, UI/UX, frontend tasarımı, web tasarım, güzel arayüz, modern tasarım, card tasarımı, buton stili, form tasarımı, renk paleti, tipografi. Englisch: schöne Benutzeroberfläche, elegantes Design, erstklassiges Erscheinungsbild, visuelle Hierarchie, Leerzeichen, Farbpalette, Typografieskala. Quelle: anilcancakir/my-claude-code.
Wie installiere ich web-design-mastery?
Öffnen Sie Ihr Terminal oder Kommandozeilen-Tool (Terminal, iTerm, Windows Terminal, etc.) Kopieren Sie diesen Befehl und führen Sie ihn aus: npx skills add https://github.com/anilcancakir/my-claude-code --skill web-design-mastery Nach der Installation wird der Skill automatisch in Ihrer KI-Programmierumgebung konfiguriert und ist bereit zur Verwendung in Claude Code oder Cursor
Wo ist das Quell-Repository?
https://github.com/anilcancakir/my-claude-code
Details
- Kategorie
- *Kreativität
- Quelle
- skills.sh
- Erstes Auftreten
- 2026-02-01