Communitygithub.com

zriptic/roclicks-skills

Créez de l'interface utilisateur Roblox de bout en bout. Lisez la référence de style du développeur (style stud par défaut), récupérez les textures sur ui-resources.com, prenez les icônes UNIQUEMENT d'un pack d'icônes vectorielles sous licence que le développeur possède, construisez chaque écran en HTML/CSS avec tous les états, laissez le développeur vérifier et approuver, puis exportez en JSON, téléchargez les images, générez et construisez un ScreenGui réel dans Studio, câblez le module d'interface runtime et vérifiez.

Qu'est-ce que roclicks-skills ?

Cette compétence permet de créer une interface utilisateur Roblox complète, de la conception HTML/CSS jusqu'à l'importation dans Studio. Elle guide l'agent à travers un pipeline structuré : analyse d'une référence de style (par défaut le style 'stud'), téléchargement de textures depuis ui-resources.com, utilisation exclusive d'un pack d'icônes vectorielles sous licence, construction de chaque écran en HTML/CSS avec tous les états, validation par le développeur, puis export en JSON, téléchargement des images, génération d'un ScreenGui dans Roblox Studio, câblage du module d'interface runtime et vérification finale. La compétence prend en charge tous les types d'interface Roblox : HUD, menus, boutiques, popups, tutoriels, toasts, panneaux, et plus encore. Elle fonctionne avec Claude Code, Cursor, Codex et d'autres agents capables d'exécuter Python et Node.js, et nécessite un serveur MCP Roblox Studio pour l'importation. Son point fort est la séparation stricte entre conception (HTML/CSS) et implémentation Roblox, avec une boucle d'itération rapide basée sur les retours du développeur, évitant les erreurs courantes comme l'utilisation d'emojis, de packs d'icônes multiples, ou d'images générées par IA.

Compatible avec✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/zriptic/roclicks-skills/tree/HEAD/roblox-ui-maker
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

Créateur d'interface Roblox

LICENCES D'ABORD. Les icônes proviennent d'UN SEUL pack d'icônes sous licence que vous (le développeur) possédez ; cette compétence ne fournit ni icônes ni textures. Lisez la licence de votre pack : la plupart des packs payants autorisent leur utilisation dans vos propres jeux mais interdisent la revente, la redistribution, les packs d'actifs et l'entraînement d'IA (si c'est le cas, n'envoyez jamais les PNG du pack à un modèle d'image). Dans les dépôts de jeux, commitez icons.json + le script de copie, pas le pack, sauf si la licence le permet. Les textures sont téléchargées par vous depuis https://ui-resources.com (UI_RESOURCES.md) ; créditez leurs créateurs.

Les outils d'import Figma sont pour des designs qui existent déjà dans Figma ; cette compétence est pour concevoir une nouvelle interface (ou recréer une capture d'écran) d'abord via HTML.

La boucle : référence -> jetons -> HTML (tous les états) -> le développeur vérifie -> apprendre -> importer -> vérifier. Lisez LESSONS.md avant de toucher quoi que ce soit (chaque règle apprise, avec le bug derrière). Elle prime sur tout ce qui suit qui serait en désaccord.

Fichiers de cette compétence

FichierRôle
LESSONS.mdchaque règle + pourquoi. Lisez en premier ; écrivez les retours du développeur dedans (REVIEW_LOOP.md)
STYLE.mdlire la référence pour en extraire des jetons ; préréglages ; conversion des jetons CSS en table Roblox
UI_RESOURCES.mdui-resources.com : ce que c'est, trouver/télécharger, la texture stud et où la mettre
PATTERNS.mdHUD, boutique, roue de caisse + probabilités, toasts, confirmation, chargement, tutoriel, bulle, objectif, listes
PIPELINE.mdHTML -> JSON -> Roblox en détail : rbx.json, marqueurs d'export, table de correspondance, registre, modèles, copies
REVIEW_LOOP.mdcomment montrer les écrans, prendre les retours, obtenir l'approbation
VERIFY.mdrendu simulé, vérification des propriétés, bac à sable en mode édition, clics de test, listes de contrôle
ROBLOX_FACTS.mdfaits mesurés sur le moteur et les outils MCP (inset, TextSize, téléchargements, captures)
styles/stud.css (préréglage par défaut), glass.css (préréglage simulateur sombre)
templates/examples/un projet d'interface fonctionnel : build.py, kit.css, icons.json, rbx.json
templates/luau/Builder, UIKit, NumberFormat, Theme, client/UI + Controller, Toasts, UpdateInPlace, PixelRows, ProgressiveReveal, NextGoal, CrateRoll, LoadingScreen, PropertySweep, WorldHitTest
scripts/read_reference, copy_icons, cdp/export/dump, gen, ledger, assets, bundle, mock/mockshot/mockdiff, check_copies, luau_to_rbxmx ; remake/ = outils de mesure 1:1

SK=<dossier de cette compétence> ci-dessous (le dossier où se trouve ce SKILL.md). Outils nécessaires : python3 avec PIL + numpy, node 22+, Google Chrome (rendus headless ; la variable d'environnement CHROME surcharge le chemin macOS), luau-analyze, un volet navigateur ou un outil d'automatisation de navigateur pour visualiser les pages (dans Claude Code desktop : mcp__Claude_Browser__*, chargez avec ToolSearch), un serveur MCP Studio qui peut exécuter Luau et importer des fichiers .rbxmx (cette compétence a été écrite pour le MCP communautaire robloxstudio) et le MCP intégré Roblox_Studio pour upload_image uniquement (ROBLOX_FACTS.md).

1. Brief, références, style (obligatoire : une référence de style)

  • Obtenez le brief : quels écrans, ce qu'ils font, quelles données ils affichent, PC + téléphone. Listez chaque état dont chacun a besoin.
  • Une image de référence de style est obligatoire. Utilisez celle donnée par le développeur. Si aucune : demandez une fois (« envoyez une capture d'écran du style que vous voulez ; ou j'utiliserai le style stud »). S'ils disent d'y aller : préréglage stud. La plupart des jeux sont stud.
  • Faites d'abord la configuration du projet à l'étape 4 (elle crée ui/), puis enregistrez la référence sous ui/ref.png. Les références de mise en page (la boutique d'un autre jeu) sont distinctes de la référence STYLE.
  • Lisez-la depuis ui/ (STYLE.md section 2) : python3 $SK/scripts/read_reference.py ref.png -> palette, contour px, indication de texture, style de texte, densité + ref_palette.png, ref_zoom.png (lisez-la pour VOIR les studs/le brillant) et une ébauche style.css. Confirmez chaque valeur à l'œil, ne gardez que les surcharges du préréglage choisi.
  • « Comme le jeu X » = inspiré par, pas une copie, sauf si le développeur dit « refais-le 1:1 » (alors LESSONS section 7 et scripts/remake/).

2. Textures depuis ui-resources.com

Le style stud DOIT porter une texture stud. Cette compétence n'en fournit pas : téléchargez vous-même la « texture Stud » (tag Stud) de ui-resources.com depuis https://ui-resources.com, convertissez-la en vrai PNG si nécessaire, et enregistrez-la sous ui/stud.png dans votre projet (4x4 studs par tuile, tuilée à 112 px avec un mélange overlay). Pour tout autre chose (papier, soleils, demi-teintes, arrière-plans), cherchez d'abord sur le site et enregistrez les téléchargements dans ui/tex/ (UI_RESOURCES.md : filtres, ?tag=Stud, lecture des URLs chargées paresseusement, file + sips pour les WebP-nommés-png). Créditez les créateurs dans l'en-tête de build.py.

3. Icônes : votre pack d'icônes uniquement

Les icônes proviennent d'UN SEUL pack d'icônes vectorielles sous licence que le développeur possède (un pack vectoriel par projet ; ne mélangez jamais les packs), jamais d'emojis. Trouvez les icônes en parcourant ou en cherchant dans le dossier ou le catalogue du pack (par exemple find <pack> -iname '*coin*'). Après la configuration de l'étape 4, éditez ui/icons.json ({"slug": "Nom du fichier d'icône ou chemin dans le pack"} ; la liste de l'exemple est un point de départ) et exécutez python3 $SK/scripts/copy_icons.py icons.json --pack <votre pack d'icônes> dans ui/ (ajoutez --prefer " Outline" ou l'équivalent de votre pack pour prendre les variantes de contour en premier). Jamais d'emojis, fermer = texte "X". Cherchez des synonymes avant de déclarer quoi que ce soit manquant.

4. Construisez chaque écran en HTML/CSS

Configurez une fois dans le dépôt du jeu (faites ceci avant que les étapes 1-3 n'écrivent quoi que ce soit dans ui/ ; cp -n n'écrase jamais) :

mkdir -p ui && cp -rn $SK/templates/examples/. ui/ && cd ui
cp <votre texture stud téléchargée> stud.png && cp -r $SK/styles .     # texture stud depuis ui-resources.com
cp <référence> ref.png && python3 $SK/scripts/read_reference.py ref.png      # -> style.css (ébauche)
python3 $SK/scripts/copy_icons.py icons.json --pack <votre pack d'icônes> && python3 build.py   # -> *.html + index.html
python3 -m http.server 8870 --bind 127.0.0.1    # run_in_background ; ou l'entrée launch.json ci-dessous + preview_start

.claude/launch.json dans le dépôt du jeu (puis mcp__Claude_Browser__preview_start {name: "ui"}) :

{ "version": "0.0.1", "configurations": [
  { "name": "ui", "runtimeExecutable": "python3",
    "runtimeArgs": ["-m", "http.server", "8870", "--bind", "127.0.0.1", "--directory", "ui"], "port": 8870 } ] }

Éditez build.py (c'est la source de vérité ; ne modifiez jamais à la main les fichiers .html générés). Règles les plus importantes :

  • Stage 1920x1080, px absolus ; composants partagés (plate, panel, card, T, I) pour que les frères partagent un même traitement ; seules les couleurs varient. Le style vient des jetons : kit.css (structure) -> styles/<preset>.css (UI_STYLE=glass python3 build.py pour changer) -> style.css (ce jeu). ?style=glass prévisualise en direct.
  • Marqueurs d'export : grp(name, html, anchor) = un cadre Roblox de premier niveau ancré à un bord d'écran ; name= sur chaque label/icône/bouton en direct ; sub(..., btn=True, opens='Boutique') ; hid=True pour les états exportés mais cachés. PIPELINE.md section 2 a la table complète.
  • Tous les états sur states.html ; mise en page téléphone (hud_phone.html) ; chaque élément runtime (toasts, confirmation, récompense, tutoriel, panneaux) sur templates.html ; montrez les pièces en contexte sur une capture de jeu réelle une fois qu'elle existe.
  • Pas de guillemets doubles dans les style="..." en ligne ; pas d'élément nommé Active/Visible/Position... ; utilisez hid (opacité 0), jamais display:none, pour les choses que le jeu active/désactive.
  • Auto-vérification : ouvrez chaque page avec ?check dans le volet navigateur (checkOverflow() ne doit retourner aucun débordement et aucune image cassée) ; rendez 2x des captures headless (REVIEW_LOOP.md) et regardez-les.

5. Arrêt : le développeur vérifie

Montrez style.html + le premier écran dans le premier tour, puis le reste (REVIEW_LOOP.md). Attendez un oui explicite. Chaque correction : trouvez la règle générale, écrivez-la dans LESSONS.md (règle, puis pourquoi), appliquez-la partout, dites au développeur en une ligne ce que vous avez sauvé. Pas de travail Roblox avant approbation.

6. Importation dans Roblox (après approbation)

Détail complet : PIPELINE.md. Depuis ui/ avec le serveur en cours d'exécution :

# première importation seulement : le runtime Luau + builder (puis remplacez "<Gui>" dans ../roblox/ui/client/UI.luau par le "gui" de rbx.json)
mkdir -p ../roblox/ui/client && cp -n $SK/templates/luau/*.luau ../roblox/ui/ && cp -n $SK/templates/luau/client/*.luau ../roblox/ui/client/
rm -f ../roblox/ui/LoadingScreen.client.luau ../roblox/ui/CrateRoll.luau   # ceux-ci vivent dans ReplicatedFirst / ReplicatedStorage
node $SK/scripts/export.mjs              # layout JSON + 2x PNG transparents par pièce raster -> rbx/out/
python3 $SK/scripts/gen.py               # Data_<Screen>.luau, Data_Templates, Data_Manifest -> luau_out ; art -> rbx/out/upload
python3 $SK/scripts/mock.py && node $SK/scripts/mockshot.mjs   # rendu Roblox-sémantique hors ligne : différence moyenne 1-3 par écran
python3 $SK/scripts/ledger.py 20         # prochaines URLs à télécharger ; téléchargez avec mcp__Roblox_Studio__upload_image(+studio_id),
                                         # puis : echo '<result json>' | python3 $SK/scripts/ledger.py 20 ; répétez jusqu'à ce qu'il en reste 0
python3 $SK/scripts/assets.py            # AssetIds.luau
python3 $SK/scripts/bundle.py            # rbx/out/<Gui>Build.rbxmx

Règles de téléchargement : <= 20 par lot, ouvrez le lieu du GROUPE quand le jeu est possédé par un groupe, ne re-téléchargez jamais ce que le registre a, sondez les ids étrangers. Ensuite dans Studio via robloxstudio : détruisez l'ancien ServerStorage.<Gui>Build -> import_rbxm du .rbxmx dans ServerStorage -> require(game.ServerStorage.<Gui>Build.Builder).build() -> activez le gui, Builder.fit() deux fois, désactivez. Ne jamais utiliser set_script_source (maltraite les \n) ; toujours .rbxmx + import_rbxm. Câblez le code du jeu (le Controller démarre UI + UIKit ; démonstration des nombres uniquement avec l'attribut gui PreviewMode) : client/UI.luau (ouvrir/fermer/retour, boutons attrayants avec les attributs Button/Opens, Échap, scrim, file d'attente des popups, compteurs) + UIKit.luau (contrat de modèle : cloner, set avec les jumeaux Shadow, icônes, barres, pluriel/article, worldLabel) + NumberFormat.luau. Le code du jeu clone les modèles ; il ne construit jamais un look avec Instance.new. Consignez chaque modification runtime apportée aux écrans importés (PIPELINE.md section 8).

7. Vérification dans Studio

VERIFY.md, dans l'ordre : pas d'images vides ; ratios d'ajustement ; PropertySweep.atSizes à 1920x1080 / 1366x768 / 844x390 ; le bac à sable en mode édition (clonez le gui, requirez le clone de l'UI, pilotez, UI.destroy(), Archivable=false) ; test de jeu seulement si nécessaire (vérifiez qu'aucun autre test de jeu n'est en cours) : une capture magenta n'est pas une UI cassée ; vrais clics à AbsolutePosition + size/2 +58 px ; profil de périphérique téléphone ; test de clics rapides ; les listes se mettent à jour sur place. luau-analyze --mode=nonstrict sur chaque fichier client ; check_copies.py pour que les copies dans Studio correspondent au disque.

8. Itération

Nouveaux retours -> LESSONS.md -> HTML -> approbation -> exportez seulement la page modifiée -> gen -> le registre ne télécharge que les nouveaux arts -> bundle -> Builder.buildScreen("<Screen>") (un panneau en place) ou build() -> fit -> vérifiez.

Jamais

Des emojis ou un deuxième pack d'icônes ; des icônes générées par IA ; l'envoi de fichiers de pack d'icônes à un modèle quand la licence interdit l'utilisation d'IA ; du texte intégré dans des images ; l'importation avant approbation ; l'édition manuelle de Data_*.luau ; set_script_source ; des valeurs de démonstration écrites pendant que le vrai client du jeu tourne ; des récompenses auto-réclamées ; une ligne ou un marqueur tracé sur un prix ; des ids ou noms spécifiques au jeu à l'intérieur de ce dossier de compétence.

Individual skills in this repo

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

zriptic/roclicks-skills

The end-to-end pipeline for making a Roblox game with your AI agent, from idea to launch and live updates. It runs phases in order (concept and study, design and economy sim, world, models, systems code, UI, VFX, audio, QA, thumbnails and publishing, analytics and live ops) and calls the right skill and tools for each, with standing rules and measured Studio gotchas. Use whenever the developer wants to make, remake, port or clone a Roblox game, start a new game, continue or finish one, plan a game, "do the whole thing", or asks what's next on a game. For one narrow task (just a UI, just an effect) use that skill directly.

zriptic/roclicks-skills

Make gameplay trailers for Roblox games, end to end. It plans a shot list from the game's GAME.md, drives the character in a Studio playtest so it looks hand-played (TrailerDriver.luau handles waypoints, prompts, remotes and a drifting third-person camera), adds cinematic camera moves (CameraRig.luau dolly, orbit, crane, push-in and whip, synced to game events), records only the Studio viewport with macOS screencapture, and edits with ffmpeg (speed ramps, whips, crossfades, title cards with emoji, a music bed with ducking and loudnorm). It exports the 30 s 1920x1080 Roblox video thumbnail cut and a 9:16 Shorts/TikTok cut, and runs QA with a contact sheet. Use whenever the user asks for a trailer, promo video, gameplay video, video thumbnail, teaser, TikTok or YouTube Short of a Roblox game, to "record it", "make it look like I'm playing", "edit a video of the game", or to film or capture gameplay or a cinematic flythrough in Studio.

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