Communitygithub.com

theme-review

Utilisez-le uniquement lorsque l'utilisateur demande de réviser ou auditer un thème d'interface utilisateur, des jetons de design, ou un design ou une base de code pour la cohérence visuelle et la réutilisation des composants par rapport à son thème. Ne pas l'utiliser pour une revue de code générale, des revues de flux UX ou un travail non lié à l'interface utilisateur.

Qu'est-ce que theme-review ?

Cette compétence, appelée `theme-review`, audite la conformité d'un projet à son thème : elle évalue la solidité du fichier de thème lui-même et vérifie si les designs et le code l'utilisent réellement. Son objectif principal est de s'appuyer sur le thème existant du projet, sans jamais en inventer un nouveau. Les écarts par rapport au thème sont traités comme des propositions d'ajouts ou de modifications à effectuer via la compétence `theme`. Elle est utile pour les développeurs et les concepteurs qui souhaitent garantir une cohérence visuelle stricte et une réutilisation optimale des composants dans leurs projets. Les plateformes prises en charge incluent des environnements où l'on utilise des thèmes, des jetons de design et des composants, comme les projets web avec des fichiers de thème et des artefacts de design. Le fonctionnement de la compétence repose sur des scripts d'analyse pour détecter les valeurs codées en dur, les écarts par rapport au thème et les problèmes de réutilisation des composants. Elle produit un rapport classé des constats, des propositions de modifications du thème, et utilise une échelle de sévérité de 0 à 4, similaire à celle de la compétence `review`. Les règles suivies sont définies dans des fichiers partagés et la liste de contrôle de la compétence garantit une évaluation complète et rigoureuse.

Compatible avec✓Claude Code~Codex CLI~Cursor
Part ofDesign & UI
npx skills add https://github.com/mrgnhnt96/ultrahand/tree/main/skills/theme-review
Voir l'original→Voir toutes les compétences

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentation

ultrahand : theme-review

Auditer dans quelle mesure un projet respecte son thème : si le fichier de thème lui-même est solide, et si les designs et le code l'utilisent réellement. Le résultat est une liste classée de constats ainsi qu'une liste de modifications proposées pour le thème. L'examinateur s'appuie sur le thème du projet ; il n'invente jamais de nouveau thème. Un écart dans le thème devient une proposition d'ajout pour la compétence theme, pas une nouvelle palette.

Les règles se trouvent dans shared/theme/rules.md (non-négociables NN-n, axes créatifs CR-n, règles d'évolution EV-n) ; chaque vérification est dans références/checklist.md, et les deux citent shared/theme/sources.md. Pour les problèmes UX au-delà du thème (flux, étiquettes, conventions de la plateforme), orientez vers la compétence review à la place.

Les scripts ci-dessous se trouvent dans ${CLAUDE_PLUGIN_ROOT}/shared/theme/.

1. Obtenir le thème et la cible

  • Le thème : trouvez design/THEME.md et le fichier de jetons (cherchez comme le fait l'étape 1 de la compétence theme). Lisez THEME.md : sa personnalité, quelles décisions sont verrouillées, son inventaire de composants et son journal des modifications. C'est à cela que la cible est tenue.
  • Pas encore de thème : n'en inventez pas. Exécutez node scan.mjs <rép src> pour afficher les valeurs que le code utilise aujourd'hui, et évaluez uniquement par rapport aux non-négociables. Recommandez la compétence theme pour en extraire un thème, et placez les principaux regroupements de l'analyse dans le rapport comme point de départ.
  • La cible : du code (un dossier source, un diff ou une PR), un artefact de canevas, ou une capture d'écran. Comme pour review, dites ce que vous avez et marquez chaque constat Confirmé (mesuré dans le code, le fichier de jetons ou le canevas) ou Probable (jugé à partir d'une image). Pour un diff, évaluez ce qu'il modifie, et notez toute dérive qu'il ajoute.

2. Exécuter les vérifications

  1. Fichier de thème : node check.mjs design/theme.tokens.json --json. Chaque erreur est un constat ; lisez le tableau de contraste pour les deux schémas.
  2. Utilisation des jetons dans le code : node scan.mjs <rép src> --theme design/theme.tokens.json.
    • valeurs brutes qui correspondent à un jeton : une copie codée en dur d'une valeur de thème. Lorsque le thème change, celles-ci ne suivront pas [HIG-COLOR] [PRIMER-LINT].
    • valeurs sans jeton : une dérive du thème. Chacune est soit une erreur (accrochez-la au jeton le plus proche indiqué) soit un besoin réel (proposez un jeton).
    • jetons qu'aucun fichier ne mentionne : possiblement inutilisés. Confirmez avant de proposer la suppression ; l'analyse fait correspondre les noms par motif.
    • couleurs quasi-dupliquées et espacement hors de la grille : un constat par regroupement, pas par ligne. Recherchez également les jetons primitifs utilisés directement dans le code (primitive., ou l'équivalent de la plateforme), ce qui saute le rôle (NN-1).
  3. Sur le canevas ou une page en direct : lisez les styles calculés pour les éléments en cours d'examen. L'audit de composition (shared/composition/audit.mjs, exécuté via shared/input/drive.mjs) rapporte les styles de contrôle, les tailles de police et les écarts par section, ce qui révèle immédiatement un deuxième style de bouton ou une taille de police aberrante.
  4. Parcourez les passes dans références/checklist.md : santé du thème, utilisation des jetons, réutilisation des composants, cohérence entre les écrans, les deux schémas, et caractère.

Les scripts trouvent des motifs, pas des preuves. Ouvrez chaque piste et confirmez-la avant qu'elle ne devienne un constat.

3. Évaluer et rapporter

Évaluez avec la même échelle de 0 à 4 que review (consultez le guide de sévérité de sa checklist), en utilisant les ancres de la checklist de cette compétence. Un problème présent à plusieurs endroits est un constat avec un décompte et ses principaux emplacements.

## Verdict
<Version du thème et cible, preuves, comptes par sévérité, la plus grande source de
  dérive.>

## Constats
### T1 · 3 Majeur · <titre court>
- **Où :** <fichier:ligne, écran › élément, ou chemin de jeton> ; ×<compte>
- **Preuve :** Confirmé | Probable
- **Problème :** <ce qui dérive, et ce que cela coûte : une incohérence que les gens voient, ou une valeur qui
  ne suivra pas le prochain changement de thème>
- **Règle :** <NN-n / EV-n / CR-n> [<clé source>]
- **Correctif :** <concret : "remplacer #8e3f27 par var(--color-primary) dans 3 endroits">

## Modifications de thème proposées
<Pour que la compétence `theme` les applique. Chacune : ajouter / déprécier / verrouiller, le jeton ou la décision, sa
  valeur en tant qu'alias, pourquoi, et quels constats en ont besoin. Omettez tout ce que les jetons
  existants couvrent déjà.>

## Ce qui fonctionne
## Non vérifié

Gardez les correctifs à l'intérieur du thème : accrochez-vous d'abord à un jeton existant, proposez un jeton en second, et ne suggérez jamais une valeur qui enfreint une non-négociable. Proposez d'appliquer les correctifs de code, et de lancer la compétence theme pour les modifications proposées.

Individual skills in this repo

This repo contains 5 individual skills — each has its own dedicated page.

desktop

Use only when the user asks to design a desktop UI screen or flow (resizable windows, min/max sizes, pointer and keyboard). Do not use for mobile, tablet, or non-UI work.

mobile

Use only when the user asks to design a mobile UI screen or flow (phone-sized layouts, touch targets, thumb reach). Do not use for tablet, desktop, or non-UI work.

review

Use only when the user asks for a UX review or critique of an existing UI design, screen, or flow. Do not use for code review or non-UI work.

tablet

Use only when the user asks to design a tablet UI screen or flow (split view, adaptive layouts, touch plus pointer). Do not use for phone, desktop, or non-UI work.

theme

Use only when the user asks to create, extract, define or extend a UI theme, design tokens or visual design system (colours, type, spacing, radius, elevation) for an app or site. Do not use for reviewing a theme, designing screens, or non-UI work.

Skills associés

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community