ui-design-system
✓Génère des composants d'interface utilisateur, des mises en page et des jetons de conception cohérents selon un système de conception. Applique les normes d'espacement, de couleur, de typographie et d'accessibilité dans les projets React/TypeScript. À utiliser lors de la création de nouveaux composants d'interface utilisateur, de la création de mises en page, du choix des couleurs ou de la typographie, de la configuration de jetons de conception ou de la révision du code de l'interface utilisateur pour garantir la cohérence de la conception. Couvre la grille d'espacement de 8 points, l'utilisation du jeton CSS Tailwind, les primitives shadcn/ui, la conformité WCAG 2.1 AA, les points d'arrêt réactifs, la structure HTML sémantique et les interfaces de composants TypeScript. Ne couvre PAS l'implémentation du backend (utilisez python-backend-expert), les tests (utilisez les modèles de test de réaction) ou le déploiement (utilisez le pipeline de déploiement).
Installation
SKILL.md
Before generating any UI code, check the project for existing tokens:
If no design tokens exist, generate a starter set and ask the user to confirm before proceeding (see Edge Cases).
Define colors as CSS custom properties consumed by Tailwind. Never use hardcoded hex/rgb values in components.
Génère des composants d'interface utilisateur, des mises en page et des jetons de conception cohérents selon un système de conception. Applique les normes d'espacement, de couleur, de typographie et d'accessibilité dans les projets React/TypeScript. À utiliser lors de la création de nouveaux composants d'interface utilisateur, de la création de mises en page, du choix des couleurs ou de la typographie, de la configuration de jetons de conception ou de la révision du code de l'interface utilisateur pour garantir la cohérence de la conception. Couvre la grille d'espacement de 8 points, l'utilisation du jeton CSS Tailwind, les primitives shadcn/ui, la conformité WCAG 2.1 AA, les points d'arrêt réactifs, la structure HTML sémantique et les interfaces de composants TypeScript. Ne couvre PAS l'implémentation du backend (utilisez python-backend-expert), les tests (utilisez les modèles de test de réaction) ou le déploiement (utilisez le pipeline de déploiement). Source : hieutrtr/ai1-skills.
Faits (prêts à citer)
Champs et commandes stables pour les citations IA/recherche.
- Commande d'installation
npx skills add https://github.com/hieutrtr/ai1-skills --skill ui-design-system- Source
- hieutrtr/ai1-skills
- Catégorie
- *Créativité
- Vérifié
- ✓
- Première apparition
- 2026-02-17
- Mis à jour
- 2026-02-18
Réponses rapides
Qu'est-ce que ui-design-system ?
Génère des composants d'interface utilisateur, des mises en page et des jetons de conception cohérents selon un système de conception. Applique les normes d'espacement, de couleur, de typographie et d'accessibilité dans les projets React/TypeScript. À utiliser lors de la création de nouveaux composants d'interface utilisateur, de la création de mises en page, du choix des couleurs ou de la typographie, de la configuration de jetons de conception ou de la révision du code de l'interface utilisateur pour garantir la cohérence de la conception. Couvre la grille d'espacement de 8 points, l'utilisation du jeton CSS Tailwind, les primitives shadcn/ui, la conformité WCAG 2.1 AA, les points d'arrêt réactifs, la structure HTML sémantique et les interfaces de composants TypeScript. Ne couvre PAS l'implémentation du backend (utilisez python-backend-expert), les tests (utilisez les modèles de test de réaction) ou le déploiement (utilisez le pipeline de déploiement). Source : hieutrtr/ai1-skills.
Comment installer ui-design-system ?
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/hieutrtr/ai1-skills --skill ui-design-system 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/hieutrtr/ai1-skills
Détails
- Catégorie
- *Créativité
- Source
- skills.sh
- Première apparition
- 2026-02-17