Synthèse automatique
Ce skill garantit une cohérence visuelle, une accessibilité et un professionnalisme dans les interfaces gouvernementales et d'entreprise en utilisant une palette de couleurs définie, des composants Shadcn/UI et Tailwind CSS.
Points forts
- Applique des standards de design reconnus comme Shadcn/UI et Tailwind.
- Assure la compatibilité dark/light mode automatique.
- Impose une typographie lisible (Geist Sans ou Inter).
- Favorise un design responsive mobile-first.
Limites
- Nécessite que le projet utilise déjà Tailwind et Shadcn/UI.
- Ne couvre pas la création de composants complexes non prévus par la librairie.
- La palette de couleurs est fixe et peut ne pas convenir à tous les contextes.
Utilisez ce skill pour toute interface nécessitant une apparence professionnelle, accessible et cohérente, en particulier dans des projets gouvernementaux ou d'entreprise.
Évitez ce skill si le projet n'utilise pas Tailwind ou Shadcn/UI, ou si une liberté créative totale est requise.
Analyse de sécurité
SûrThis skill contains only design guidance with no executable code, system commands, or network interactions. It poses no security risk.
Aucun point d'attention détecté
Comment cette analyse est faiteExemples
Create a dashboard layout using the Gov-Tech design system: blue primary (#1E40AF), slate structure, Shadcn/UI components, Geist Sans font, mobile-first responsive, dark mode support.Build a data table component with Gov-Tech styling – use Shadcn/UI table, apply slate background, blue accent for headers, ensure it works in both light and dark mode.Design an accessible input form with Gov-Tech system: use Shadcn/UI form elements, proper labels, error states, dark mode compatible, consistent spacing (p-4, gap-6).name: Design System Gov-Tech description: Guia de estilos, cores e componentes premium para interfaces governamentais e empresariais.
Skill: Mestre de Design Gov-Tech
Goal
Garantir consistência visual, acessibilidade e credibilidade profissional em todos os módulos do sistema.
Instructions
- Identificação de Padrão: Determinar se a UI necessária é um Dashboard, Formulário de Entrada ou Tabela de Dados.
- Paleta de Cores: Aplicar a cor primária #1E40AF (Azul Profundo) para ações e a escala
Slatepara a estrutura. - Uso de Componentes: Utilizar componentes base do Shadcn/UI. Se um componente não existir, construa-o usando primitivos do Tailwind.
- Tipografia: Forçar o uso de Geist Sans ou Inter para garantir legibilidade em interfaces densas em dados.
- Responsive Design: Todos os layouts devem ser mobile-first e totalmente responsivos.
Constraints
- Não criar componentes de UI customizados se houver um equivalente Shadcn/UI no projeto.
- Manter espaçamentos padrão do Tailwind (ex:
p-4,gap-6) para evitar débito visual. - CRITICAL: Todos os componentes devem suportar Dark/Light modes usando a classe utilitária
dark:.
Du fichier au premier essai
Le téléchargement contient exactement le contenu affiché sur cette fiche. Cette copie peut différer de la dernière version du dépôt source.
Consulter la source et ses fichiers annexesCe téléchargement contient uniquement SKILL.md. Les scripts, références, modèles et dépendances éventuels ne sont pas inclus. Récupérez les fichiers nécessaires depuis la source en conservant leur arborescence avant de poursuivre.
1. Télécharger le fichier
Télécharger SKILL.mdDepuis la racine d’un projet de test, enregistrez le fichier sous .skill-downloads/gov-tech-design-system-master-mm5t8cgq/SKILL.md, ou utilisez la commande suivante. Ce dossier sert à examiner la skill avant son installation.
Commande pour macOS/Linux ou WSL : un shell POSIX et curl sont nécessaires. Sous Windows sans WSL, utilisez le bouton de téléchargement et créez le dossier manuellement.
mkdir -p '.skill-downloads/gov-tech-design-system-master-mm5t8cgq' && curl --fail --show-error --location 'https://skills-guides.com/api/skills/gov-tech-design-system-master-mm5t8cgq/download' --output '.skill-downloads/gov-tech-design-system-master-mm5t8cgq/SKILL.md.part' && mv '.skill-downloads/gov-tech-design-system-master-mm5t8cgq/SKILL.md.part' '.skill-downloads/gov-tech-design-system-master-mm5t8cgq/SKILL.md'2. Vérifier les prérequis
Lisez SKILL.md avant de l’utiliser. Si le fichier cite des scripts ou services externes, examinez-les et préparez les accès nécessaires dans votre environnement de test.
Aucune section de prérequis reconnue dans ce fichier. Cela ne signifie pas qu’il est autonome : les bibliothèques, outils et accès peuvent être cités ailleurs dans le contenu ou dans le dépôt source.
Les plateformes de la fiche sont des indications du catalogue. Les chemins ci-dessous suivent la documentation des outils ; ils ne prouvent pas que cette skill y a été exécutée. Aucune version minimale de ces outils n’est attestée pour cette fiche.
3. Charger la skill
Le fichier ne fournit pas un en-tête name/description exploitable pour cette procédure native. Le téléchargement reste disponible pour lecture ; utilisez le mode manuel ci-dessous.
Mode manuel ou autre outil : joignez SKILL.md à une conversation, ou ouvrez-le dans un agent capable de lire les fichiers. Ajoutez les ressources annexes nécessaires. Il n’existe pas de dossier universel reconnu par tous les outils.
4. Faire un premier essai
Utilisez une entrée courte et fictive : un endpoint d’API, un petit document ou un brief d’interface. Dans une nouvelle conversation, joignez le fichier ou donnez son chemin à l’agent, puis adaptez cette demande :
Lis .skill-downloads/gov-tech-design-system-master-mm5t8cgq/SKILL.md et applique ses instructions à cet exemple : [décrire une entrée de test]. Indique les fichiers, dépendances ou accès qui manquent. Produis le résultat demandé par la skill sans inventer de données ni exécuter de script non examiné.Résultat attendu : une sortie correspondant aux instructions de la skill, ou une liste précise des prérequis manquants. Une simple confirmation de lecture ne valide pas le premier usage. Si une ressource externe est indisponible, ce parcours reste à tester.
Bonnes pratiques React Hook Form
Developpement
Maîtrisez React Hook Form : évitez les anti-patterns, gérez les abonnements, et traitez correctement reset, dirty state et entrées contrôlées.
Migration Emotion vers Mantine
Developpement
Migrer les styled-components Emotion vers des composants Mantine avec style props et modules CSS. Pour convertir .styled.tsx ou supprimer les imports @emotion.
Détecteur de dérive de périmètre
Developpement
Analyse les diffs git par rapport à une intention pour détecter la dérive de périmètre, fichiers non liés et PR trop larges, puis suggère de garder, diviser ou justifier.