web-design-mastery
✓Conception d’interface utilisateur d’application Web de niveau production basée sur les principes de refactorisation de l’interface utilisateur. TOUJOURS activer pour : la page de destination, le tableau de bord, les écrans d'authentification, les sections de héros, la conception de cartes, la conception de boutons, les entrées de formulaire, la navigation, les mises en page, les décisions d'espacement, la hiérarchie typographique, la sélection des couleurs, les ombres, la profondeur, les états vides, la décoration d'arrière-plan. Fournit un flux de travail de conception, une hiérarchie visuelle, des systèmes d'espacement (grille 4 pixels), une échelle de caractères, des systèmes de couleurs HSL, une élévation des ombres et des touches de finition. Turc : 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. Anglais : belle interface, design élégant, sensation premium, hiérarchie visuelle, espaces, palette de couleurs, échelle de typographie.
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 |
Faits (prêts à citer)
Champs et commandes stables pour les citations IA/recherche.
- Commande d'installation
npx skills add https://github.com/anilcancakir/my-claude-code --skill web-design-mastery- Catégorie
- *Créativité
- Vérifié
- ✓
- Première apparition
- 2026-02-01
- Mis à jour
- 2026-02-18
Réponses rapides
Qu'est-ce que web-design-mastery ?
Conception d’interface utilisateur d’application Web de niveau production basée sur les principes de refactorisation de l’interface utilisateur. TOUJOURS activer pour : la page de destination, le tableau de bord, les écrans d'authentification, les sections de héros, la conception de cartes, la conception de boutons, les entrées de formulaire, la navigation, les mises en page, les décisions d'espacement, la hiérarchie typographique, la sélection des couleurs, les ombres, la profondeur, les états vides, la décoration d'arrière-plan. Fournit un flux de travail de conception, une hiérarchie visuelle, des systèmes d'espacement (grille 4 pixels), une échelle de caractères, des systèmes de couleurs HSL, une élévation des ombres et des touches de finition. Turc : 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. Anglais : belle interface, design élégant, sensation premium, hiérarchie visuelle, espaces, palette de couleurs, échelle de typographie. Source : anilcancakir/my-claude-code.
Comment installer web-design-mastery ?
Ouvrez votre terminal ou outil de ligne de commande (Terminal, iTerm, Windows Terminal, etc.) Copiez et exécutez cette commande : npx skills add https://github.com/anilcancakir/my-claude-code --skill web-design-mastery Une fois installé, le skill sera automatiquement configuré dans votre environnement de programmation IA et prêt à être utilisé dans Claude Code ou Cursor
Où se trouve le dépôt source ?
https://github.com/anilcancakir/my-claude-code
Détails
- Catégorie
- *Créativité
- Source
- skills.sh
- Première apparition
- 2026-02-01