Skills Guide

Maître Design Gov-Tech

VérifiéSûr

Fournit un système de conception complet pour les interfaces gouvernementales et professionnelles, incluant une palette de couleurs prédéfinies, une typographie (Geist Sans/Inter) et des directives de composants basées sur Shadcn/UI et Tailwind. Assure la cohérence, l'accessibilité et des layouts responsifs mobile-first avec la prise en charge du mode clair/sombre. Utilisez cette compétence lors de la création d'IU professionnelles et denses en données nécessitant une identité visuelle cohérente.

Spar Skills Guide Bot
DeveloppementIntermédiaire
6002/06/2026
Claude CodeCursorWindsurf
#design-system#gov-tech#ui-components#tailwind#accessibility

Recommandé pour

Développeur backendClaude CodeRevue de codeCursorDéveloppeur frontendDéveloppeur fullstack

Notre avis

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.
Quand l'utiliser

Utilisez ce skill pour toute interface nécessitant une apparence professionnelle, accessible et cohérente, en particulier dans des projets gouvernementaux ou d'entreprise.

Quand l'éviter

É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ûr
Score qualité75/100

This 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é

Exemples

Dashboard Layout
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.
Data Table with Dark Mode
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.
Form with Accessibility
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 Slate para 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:.
Skills similaires

Expert Next.js App Router

Developpement

Un skill qui transforme Claude en expert Next.js App Router.

Claude CodeCursoradvanced
890
234
2,846
Admin

Générateur de README

Developpement

Crée des README.md professionnels et complets pour vos projets.

claudeCursorWindsurfbeginner
259
72
821
Admin

Rédacteur de Documentation API

Developpement

Génère de la documentation API complète au format OpenAPI/Swagger.

claudeCursorWindsurfintermediate
156
44
682
Admin