Communitygithub.com

KrostyMall/Landing-SENSORITY

Concevez et construisez des interfaces utilisateur soignées et non génériques pour cette application TanStack Start + React + Tailwind v4 + shadcn/Radix. À utiliser chaque fois que vous créez ou restylisez une surface d'interface.

Qu'est-ce que Landing-SENSORITY ?

Ce skill est conçu pour guider la création et le restylage d'interfaces utilisateur (UI) dans le cadre d'une application utilisant TanStack Start, React, Tailwind v4, shadcn et Radix. Il s'applique à toutes les surfaces d'interface du DOM : pages, pages d'atterrissage, tableaux de bord, formulaires, modales, navigation, et superpositions de jeux (écrans de démarrage, HUD, menus). Il repose sur des principes de conception forts, un système de design tokenisé, et des règles anti-« AI-slop » pour éviter les interfaces génériques. Le skill détaille l'utilisation de tokens CSS via Tailwind v4, les composants shadcn/ui, une grille de règles chiffrées pour la qualité visuelle (couleurs, polices, espacement), les bonnes pratiques de mise en page et de motion, et une checklist de finition pour garantir un rendu professionnel. Il est conçu pour fonctionner seul ou en synergie avec le skill `building-games` pour les superpositions de jeux.

Compatible avec~Claude Code~Codex CLI✓Cursor
Part ofDesign & UI
npx skills add https://github.com/KrostyMall/Landing-SENSORITY/tree/HEAD/.grok/skills/design-ui
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

Design & UI

Créez des interfaces qui semblent intentionnelles et premium, pas génériques comme un template. C'est le levier de qualité le plus important dans le constructeur d'applications. Appliquez-le à l'UI du DOM / des superpositions — pages, chrome, HUD, menus, formulaires. (Pour le canvas de jeu 3D, voir le skill building-games ; ce skill régit l'UI du DOM superposée dessus.)

Lisez references/ pour approfondir (chargé à la demande — ne l'inlinez pas en entier) :

  • references/refined-ui.md — le système de design complet du produit/chrome/superposition.
  • references/typography.md — échelle typographique, appariement, rythme.
  • references/surfaces.md — élévation, bordures, ombres, superposition.
  • references/animations.md — mouvement, easing, transitions.
  • references/performance.md — garder l'UI fluide (60ips, sans saccades).

1. Design-system-first (à faire avant de styliser quoi que ce soit)

Définissez le système une fois, puis composez à partir de celui-ci. Ne jamais parsemer de valeurs ad-hoc.

  • Tokens en CSS (Tailwind v4 est CSS-first). Mettez la palette, les rayons et les polices dans src/styles.css sous @theme en tant que variables CSS ; consommez-les en tant qu'utilitaires Tailwind. Une seule source de vérité. 
    @import "tailwindcss";
@theme {
  --color-bg: #0b0b0f;      --color-surface: #16161d;
  --color-fg: #e7e7ea;      --color-muted: #a0a0ab;
  --color-primary: #14b8a6; --color-border: #26262f;
  --radius: 0.75rem;        --font-sans: "Inter", system-ui, sans-serif;
}
  • Utilisez les composants shadcn/ui (primitives Radix + variantes cva + tailwind-merge) pour les boutons, dialogues, menus déroulants, champs de saisie, etc. Ils sont accessibles et cohérents. Générez-les dans src/components/ui ; stylisez via les tokens, pas via des couleurs hexadécimales en ligne.
  • Correction de base pour Tailwind v4 — les boutons ont besoin d'un curseur pointeur. Le Preflight de la v4 met <button> avec cursor: default, ce qui semble cassé. Ajoutez ceci une fois dans src/styles.css pour que les boutons/rôles cliquables montrent un pointeur : 
    @layer base {
  button:not(:disabled),
  [role="button"]:not(:disabled) { cursor: pointer; }
}
  • Interdiction du styling ad-hoc : pas de couleur hexadécimale brute dans le JSX, pas de littéraux text-white/bg-black, pas de valeurs arbitraires comme p-[16px] ou text-[13px]. Si vous avez besoin d'une valeur, elle devient un token ou un palier d'échelle.

2. La grille quantifiée (règles simples qui empêchent le « moche »)

  • ≤ 3–5 couleurs au total (une primaire + des neutres + au plus une accent). Pas de teintes supplémentaires aléatoires. Ne pas utiliser le violet par défaut sauf si demandé.
  • ≤ 2 familles de polices (souvent une seule). Associez une police d'affichage/titre avec une police de corps, ou utilisez-en une seule.
  • Hauteur de ligne 1.4–1.6 pour le corps ; plus serrée pour les grands titres.
  • Quand vous remplacez une couleur de fond, remplacez aussi la couleur du texte/avant-plan (le contraste doit être maintenu — vérifiez à la fois le mode clair et le mode sombre).
  • Mobile-first : concevez d'abord la mise en page ~390px, puis adaptez-la. Pas de débordement horizontal ; les zones tactiles ≥ 44px.
  • Échelle d'espacement cohérente (basée sur 4/8). Les espaces blancs généreux sont meilleurs que le bourrage.
  • Une seule couleur d'accent, utilisée avec parcimonie pour les actions principales — pas partout.

3. Anti-« AI-slop » (les indices qui rendent le résultat générique — à éviter)

  • Pas de remplissage par dégradé blob, pas de grands dégradés hero comme substitut au contenu.
  • Pas d'emoji comme icônes — utilisez un vrai jeu d'icônes (lucide-react).
  • Pas d'illustrations SVG dessinées à la main / cartes / graphiques — utilisez de vraies bibliothèques (recharts pour les graphiques) ou de vraies images générées.
  • Pas d'images de substitution / boîtes grises lorem dans le produit final — générez de vraies images ou utilisez du vrai contenu ; définissez crossOrigin="anonymous" sur les images du canvas.
  • Évitez le look des polices trop utilisées (système par défaut uniquement, ou choix de type Comic Sans).
  • Chaque élément mérite sa place. Supprimez le bruit décoratif. Établissez un système, puis variez avec intention — pas au hasard.
  • Correspondre à l'UI existante lors de l'édition d'une application en place ; n'introduisez pas un deuxième langage visuel.

4. Mise en page et hiérarchie

  • Hiérarchie visuelle claire : une action principale par vue ; la taille, le poids et la couleur expriment l'importance. Voir references/typography.md et references/surfaces.md.
  • Utilisez une vraie structure de mise en page (grid/flex, largeurs maximales de conteneur), pas de bidouilles de positionnement absolu. Alignez sur une grille cohérente.
  • Les états vides, les états de chargement et les états d'erreur font partie du design — ne livrez pas d'états intermédiaires vides/instables.

5. Mouvement (subtil, intentionnel)

  • Transitions courtes et fluides (150–250 ms) au survol/appui/entrée ; respectez prefers-reduced-motion. Détails dans references/animations.md.
  • N'animez jamais la mise en page d'une manière qui cause des saccades ; préférez transform/opacity.

6. Superpositions de jeux (quand ce skill est associé à building-games)

Le canvas de jeu est géré par building-games. Ce skill stylise la superposition DOM : écran de démarrage/« cliquer pour jouer », HUD, score, menus, pause, contrôles mobiles. Gardez la superposition lisible par-dessus le canvas (fond, contraste), et maintenez-la hors du chemin d'entrée du pointer-lock/jeu.

Checklist de finition (avant de déclarer l'UI terminée)

  • Tokens définis dans @theme ; pas de couleur hexadécimale / valeurs arbitraires ad-hoc dans le JSX.
  • ≤ 5 couleurs, ≤ 2 polices, échelle d'espacement cohérente.
  • Contraste maintenu ; avant-plan remplacé partout où le fond l'est.
  • Mobile (~390px) sans débordement ; zones tactiles ≥ 44px.
  • Icônes/images/graphiques réels — aucun des indices anti-« slop ».
  • États de chargement/vide/erreur gérés ; mouvement subtil et sécurisé pour la réduction de mouvement.
  • Rendu et vérifié visuellement dans un navigateur (voir la vérification dans AGENTS.md), pas seulement un curl.

Individual skills in this repo

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

KrostyMall/Landing-SENSORITY

Add user accounts and sign-in to this TanStack Start app. Use when the app needs authentication, sign-in, user accounts, protected routes, or per-user data. Triggers on "auth", "login", "log in", "sign in", "sign up", "account", "users", "authentication", "protected", "who is logged in", "current user", "per-user".

KrostyMall/Landing-SENSORITY

Build browser games and interactive/canvas/3D experiences in this TanStack Start + React app. Use for any game, simulation, or WebGL/Canvas experience — 2D or 3D, single-player. Covers the game loop & timing, 3D orientation/camera conventions, collision, performance, assets, audio, save, game feel, and per-genre playbooks. For WASD / vehicle / flight **input signs and inverted A/D**, open the **`controls`** skill — do not rely on this file or racing-kart alone. Triggers on "game", "minecraft", "fps", "platformer", "racing", "tetris", "snake", "shooter", "3d", "three.js", "canvas", "voxel", "physics".

KrostyMall/Landing-SENSORITY

Player-facing input signs for browser games: WASD, vehicles, flight, FPS mouse-look, and the #1 failure mode (inverted A/D). Mandatory control self-tests and a tiny test interface so you can verify A turns left before shipping. Load for ANY game with movement, steering, flying, driving, tanks, boats, mechs, drones, planes, karts, third-person follow cams — not only racing. Triggers on "controls", "WASD", "inverted", "steer", "flight", "airplane", "kart", "vehicle", "yaw", "roll", "pitch", "mouse look", "A/D".

KrostyMall/Landing-SENSORITY

Deep guide for game ANIMATION assets: motion cycles, action keyframes, effect sequences, and animation sprite sheets — built around a video-first pipeline. In this app-builder sandbox, execute via the video2dsprite / generate2dsprite skills (magenta + scripts), not ad-hoc ffmpeg. Use whenever generating anything that moves: walk/run cycles, attacks, idles, FX, flags, fire, animation sheets. Complements game-asset-core.

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