Créer des interfaces utilisateur accessibles avec Tailwind et shadcn
Les équipes ont besoin de recommandations d’interface cohérentes couvrant les composants, le style, l’accessibilité et le comportement responsive. Cette skill fournit des références shadcn/ui, Tailwind CSS et de design visuel pour les workflows Claude, Codex et Claude Code.
Arrêtez-vous et demandez confirmation avant l’installation.
Examinez le plan et obtenez le consentement explicite de l’utilisateur avant de modifier des fichiers.
Copiez cette demande dans votre Agent. Elle contient la page Skill de référence et le manifeste.
Review the Skillstore skill "ckm-ui-styling" from https://skillstore.io/skills/nextlevelbuilder-ckm-ui-styling.md and its manifest at https://skillstore.io/api/skills/nextlevelbuilder-ckm-ui-styling/manifest. Verify the artifact. Stop and obtain explicit user consent before installing or changing files.Votre Agent doit toujours présenter son plan et demander toute confirmation exigée par la politique de sécurité.
Utilisez ces liens lorsqu’un Agent IA, un crawler ou un script a besoin d’un contexte propre au lieu de lire toute la page.
Utilisation de « ckm-ui-styling ». Une page de paramètres a besoin de cartes responsive, du mode sombre et d’actions de formulaire claires.
Résultat attendu:
Utilisation de « ckm-ui-styling ». Une boîte de dialogue existante échoue à la revue clavier et lecteur d’écran.
Résultat attendu:
Utilisation de « ckm-ui-styling ». Une équipe veut des tokens Tailwind cohérents sur toutes les pages produit.
Résultat attendu:
Most static hits are false positives in documentation, license text, tests, and coverage data. Real issues remain around unpinned npx execution in a helper script and numerous bundled binary font assets that need manual verification.
Il s’agit de capacités locales réelles qui peuvent être attendues pour cette compétence ; elles nécessitent donc un examen, mais ne sont pas comptabilisées comme comportement malveillant confirmé.
Partagez le rapport d’évaluation versionné, le badge neutre, la carte intégrable et les citations. Skillstore présente les preuves sans décider si ce Skill est sûr.
https://skillstore.io/skills/nextlevelbuilder-ckm-ui-styling/audits/4?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report[](https://skillstore.io/skills/nextlevelbuilder-ckm-ui-styling?utm_source=security_passport_badge)<a href="https://skillstore.io/skills/nextlevelbuilder-ckm-ui-styling?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/nextlevelbuilder-ckm-ui-styling/security.svg" alt="Skillstore security assessment" loading="lazy"></a><iframe src="https://skillstore.io/embed/skills/nextlevelbuilder-ckm-ui-styling.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>nextlevelbuilder. (2026). ckm-ui-styling security audit report (audit version 4) [Author version 1.0.0]. Skillstore. https://skillstore.io/skills/nextlevelbuilder-ckm-ui-styling/audits/4@techreport{nextlevelbuilder-nextlevelbuilder-ckm-ui-styling-2026,
author = {nextlevelbuilder},
title = {ckm-ui-styling security audit report (audit version 4)},
institution = {Skillstore},
year = {2026},
number = {4},
url = {https://skillstore.io/skills/nextlevelbuilder-ckm-ui-styling/audits/4},
note = {Author version 1.0.0}
}cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "ckm-ui-styling security audit report (audit version 4)"
version: "1.0.0"
type: report
authors:
- name: "nextlevelbuilder"
date-released: "2026-07-05"
url: "https://skillstore.io/skills/nextlevelbuilder-ckm-ui-styling/audits/4"
identifiers:
- type: other
value: "skillstore:nextlevelbuilder-ckm-ui-styling:audit:4"
description: "Skillstore immutable audit report identifier"
Créer une page mobile-first à l’aide de cartes, formulaires et boîtes de dialogue shadcn, ainsi que des règles d’espacement Tailwind.
Définir les tokens, le comportement du mode sombre, les variantes de composants et les états d’interaction accessibles pour un système d’interface partagé.
Examiner la gestion du focus, le comportement au clavier, les erreurs de formulaire, le contraste des couleurs et les annonces des lecteurs d’écran.
Utilise ckm-ui-styling pour styliser un bouton et une carte shadcn responsive pour un écran d’inscription simple.
Crée une boîte de dialogue de paramètres accessible avec navigation au clavier, états de focus, messages de formulaire et styles de mode sombre Tailwind.
Définis un thème Tailwind et shadcn pour un tableau de bord financier, incluant les tokens, les variantes et les recommandations de mise en page responsive.
Examine cette interface React pour l’accessibilité, la cohérence de mise en page, le mode sombre et la composition shadcn. Fournis des changements précis et des étapes de validation.
Auteur
nextlevelbuilderLicence
MIT
Version de l’auteur
v1.0.0
Révision Skillstore
r1
Réf
62e2a730c5cd74eab4c7164309d810de660fcea3
Récence de maintenance
18/07/2026
Utilisation
8 téléchargements · 15 vues
Structure de fichiers
Build Accessible Tailwind Interfaces
Building consistent, responsive interfaces requires many component, styling, and accessibility decisions. This skill provides shadcn/ui patterns, Tailwind guidance, and focused automation.
Build Consistent Design Systems and Slides
Inconsistent tokens and components make design handoffs difficult. This skill structures tokens, validates usage, and generates brand-aligned presentation assets.
Create Strategic HTML Presentations
Building persuasive, responsive presentations requires coordinated structure, design, copy, and data visualization. This skill turns a topic and audience brief into a complete HTML deck.
Améliorer les workflows de conception UI et UX
Le travail d'interface nécessite souvent un style cohérent, l'accessibilité et des conseils propres à la stack. Cette compétence donne à Claude, Codex et Claude Code une référence UI/UX consultable pour planifier, créer et réviser des designs.
Créer des directives de marque et des workflows d’actifs
Le travail de marque dérive souvent entre la voix, les visuels, les actifs et les tokens de design. Cette compétence aide Claude, Codex et Claude Code à créer, réviser et appliquer des systèmes de marque cohérents.
Build consistent brand guidelines and assets
Brand work can become inconsistent across content, assets, and interfaces. This skill provides structured guidance, validation, and token synchronization to keep brand decisions aligned.
Auditer l’accessibilité web pour la conformité WCAG
par 89jobrien
Les lacunes d’accessibilité peuvent bloquer les utilisateurs et créer un risque de non-conformité. Cette compétence guide les audits WCAG, les vérifications avec lecteur d’écran, les tests au clavier et la planification des corrections.
Planifier l'UX avant de construire
par pbakaus
Les équipes construisent souvent des interfaces avant de clarifier les objectifs des utilisateurs, les états et les contraintes. Cette compétence guide la découverte et produit un brief de conception pour l'implémentation.
Améliorer l'UX grâce à des recommandations de design guidées par la recherche
par shubhamsaboo
Les équipes conçoivent souvent des parcours à partir d'hypothèses et passent à côté de problèmes d'accessibilité. Cette compétence guide la recherche, la structure, le design d'interaction et la revue à l'aide des meilleures pratiques UX.
Concevoir des prototypes d’interface utilisateur distinctifs
par tencentcloudbase
Les interfaces d’IA génériques manquent souvent de direction visuelle et de détails adaptés à la plateforme. Cette compétence guide Claude, Codex et Claude Code pour définir l’intention de conception avant de créer des prototypes.
Check designs with deterministic CSS rules
par cubha
Design reviews can vary between reviewers and slow down delivery. This skill applies repeatable checks to HTML and CSS so teams can catch token, layout, and accessibility issues before release.
Créer des interfaces shadcn/ui dans Next.js
par Asmayaseen
Les équipes React ont besoin de modèles d’interface utilisateur cohérents qui fonctionnent avec Next.js moderne. Cette compétence fournit des conseils de configuration shadcn/ui, des exemples de composants, la validation de formulaires, des tableaux, des barres latérales et des modèles de mode sombre.