Communitygithub.com

zriptic/roclicks-skills

Crie UI de jogos Roblox do início ao fim. Leia o guia de estilo do desenvolvedor (estilo stud por padrão), busque texturas em ui-resources.com, use ícones APENAS de um pacote de ícones vetoriais licenciado que o desenvolvedor possui, construa cada tela em HTML/CSS com todos os estados, deixe o desenvolvedor verificar e aprovar, depois exporte para JSON, faça upload de imagens, gere e construa um ScreenGui real no Studio, conecte o módulo de UI em tempo de execução e verifique.

O que é roclicks-skills?

Este skill é uma ferramenta especializada para criar interfaces de usuário (UI) completas para jogos Roblox, seguindo um fluxo de trabalho rigoroso e profissional. Ele foi projetado para desenvolvedores que desejam construir desde HUDs simples até menus complexos, lojas, popups, tutoriais e outros elementos de UI, garantindo consistência visual e eficiência. O skill suporta plataformas como Claude Code, Cursor, Codex e outras ferramentas de agente de IA, e depende de integrações com Python, Node.js e um servidor MCP do Roblox Studio. O processo começa com a definição de um estilo a partir de uma imagem de referência (ou usando o 'stud style' padrão), a extração de texturas do site ui-resources.com e o uso exclusivo de ícones de um pacote vetorial licenciado pelo desenvolvedor. Cada tela é prototipada em HTML/CSS com todos os estados (normal, hover, vazio, etc.), e o desenvolvedor deve aprovar visualmente cada tela antes de qualquer trabalho no Roblox. Após a aprovação, a UI é exportada para JSON, as imagens são enviadas via API do Studio, e um módulo de tempo de execução em Luau é gerado e integrado ao jogo. O skill também inclui verificações rigorosas de qualidade, como análise de propriedades e testes de clique. A principal vantagem deste skill é a automação de um fluxo de trabalho complexo e repetitivo que normalmente exige muito trabalho manual. Ele elimina a necessidade de editar arquivos Luau manualmente, reduz erros de importação e garante que a UI final corresponda exatamente ao design aprovado. Além disso, o skill incorpora lições aprendidas de projetos anteriores (LESSONS.md), garantindo que as melhores práticas sejam seguidas e que bugs comuns sejam evitados. Para o desenvolvedor, isso significa menos tempo gasto em tarefas repetitivas e mais tempo focado na jogabilidade e na experiência do usuário.

Funciona com✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/zriptic/roclicks-skills/tree/HEAD/roblox-ui-maker
Ver original→Navegar por todas as habilidades

Perguntar na sua IA favorita

Abre um novo chat com esta habilidade de agente já pré-carregada.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentação

Criador de UI Roblox

LICENÇAS PRIMEIRO. Ícones vêm de UM pacote de ícones licenciado que você (o desenvolvedor) possui; este skill não fornece ícones nem texturas. Leia a licença do seu pacote: a maioria dos pacotes pagos permite uso em seus próprios jogos, mas proíbe revenda, redistribuição, pacotes de ativos e treinamento de IA (se for o caso, nunca envie os PNGs do pacote para nenhum modelo de imagem). Em repositórios do jogo, commite icons.json + o script de cópia, não o pacote, a menos que a licença permita. Texturas são baixadas por você de https://ui-resources.com (UI_RESOURCES.md); credite seus criadores.

As ferramentas de importação do Figma são para designs que já existem no Figma; este skill é para criar nova UI (ou recriar uma captura de tela) através de HTML primeiro.

O ciclo: referência -> tokens -> HTML (todos os estados) -> o desenvolvedor verifica -> aprender -> importar -> verificar. Leia LESSONS.md antes de tocar em qualquer coisa (todas as regras aprendidas até agora, com o bug por trás delas). Elas prevalecem sobre qualquer coisa abaixo que discorde.

Arquivos neste skill

ArquivoO que faz
LESSONS.mdcada regra + porquê. Leia primeiro; escreva o feedback do desenvolvedor nele (REVIEW_LOOP.md)
STYLE.mdlendo a referência em tokens; predefinições; token CSS -> tabela Roblox
UI_RESOURCES.mdui-resources.com: o que é, como encontrar/baixar, a textura stud e onde colocá-la
PATTERNS.mdHUD, loja, roleta de itens + probabilidades, toasts, confirmação, carregamento, tutorial, bolha, meta de progresso, listas
PIPELINE.mdHTML -> JSON -> Roblox em detalhes: rbx.json, marcadores de exportação, tabela de mapeamento, ledger, modelos, cópias
REVIEW_LOOP.mdcomo mostrar telas, receber feedback, obter aprovação
VERIFY.mdrenderização simulada, varredura de propriedades, teste no modo de edição, playtest de cliques, checklists
ROBLOX_FACTS.mdfatos medidos do motor + ferramentas MCP (inset, TextSize, uploads, capturas)
styles/stud.css (predefinição padrão), glass.css (predefinição de simulador escuro)
templates/examples/um projeto de UI funcional: 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/ = ferramentas de medição 1:1

SK=<pasta deste skill> abaixo (a pasta onde este SKILL.md está). Ferramentas necessárias: python3 com PIL + numpy, node 22+, Google Chrome (renderização headless; env CHROME substitui o caminho do macOS), luau-analyze, um painel de navegador ou ferramenta de automação de navegador para visualizar páginas (no Claude Code desktop: mcp__Claude_Browser__*, carregue com ToolSearch), um servidor MCP do Studio que possa executar Luau e importar arquivos .rbxmx (este skill foi escrito para o robloxstudio MCP da comunidade) e o MCP Roblox_Studio integrado apenas para upload_image (ROBLOX_FACTS.md).

1. Briefing, referências, estilo (obrigatório: uma referência de estilo)

  • Obtenha o briefing: quais telas, o que elas fazem, quais dados mostram, PC + celular. Liste cada estado que cada uma precisa.
  • Uma imagem de referência de estilo é obrigatória. Use a que o desenvolvedor forneceu. Se não houver nenhuma: pergunte uma vez ("envie uma captura de tela do estilo que você quer; ou usarei o estilo stud"). Se eles disserem para apenas seguir: predefinição stud. A maioria dos jogos é stud.
  • Faça a configuração do projeto no passo 4 primeiro (ela cria ui/), depois salve a referência como ui/ref.png. Referências de layout (a loja de outro jogo) são separadas da referência de ESTILO.
  • Leia de dentro de ui/ (STYLE.md seção 2): python3 $SK/scripts/read_reference.py ref.png -> paleta, px de contorno, sugestão de textura, estilo de texto, densidade + ref_palette.png, ref_zoom.png (Leia para VER studs/brilho) e um rascunho de style.css. Confirme cada valor a olho nu, mantenha apenas as substituições da predefinição escolhida.
  • "Como o jogo X" = inspirado em, não uma cópia, a menos que o desenvolvedor diga "recrie isso 1:1" (então LESSONS seção 7 e scripts/remake/).

2. Texturas de ui-resources.com

O estilo stud DEVE trazer uma textura stud. Este skill não inclui uma: baixe a "Stud texture" do ui-resources (tag Stud) você mesmo de https://ui-resources.com, converta-a para um PNG real se necessário, e salve-a como ui/stud.png em seu projeto (4x4 studs por tile, tiles a 112 px com mesclagem overlay). Para qualquer outra coisa (papel, explosões solares, meios-tons, fundos) pesquise no site primeiro e salve os downloads em ui/tex/ (UI_RESOURCES.md: filtros, ?tag=Stud, leitura de URLs carregados de forma lazy, file + sips para WebP-nomeado-png). Credite os criadores no cabeçalho do build.py.

3. Ícones: apenas seu pacote de ícones

Ícones vêm de UM pacote de ícones vetoriais licenciado que o desenvolvedor possui (um pacote vetorial por projeto; nunca misture pacotes), nunca emojis. Encontre ícones navegando ou pesquisando na própria pasta ou catálogo do pacote (por exemplo, find <pacote> -iname '*coin*'). Após a configuração do passo 4, edite ui/icons.json ({"slug": "Nome do arquivo de ícone ou caminho dentro do pacote"}; a lista de exemplo é um ponto de partida) e execute python3 $SK/scripts/copy_icons.py icons.json --pack <seu pacote de ícones> em ui/ (adicione --prefer " Outline" ou o equivalente do seu pacote para pegar variantes de contorno primeiro). Nunca emojis, fechar = texto "X". Pesquise sinônimos antes de considerar algo ausente.

4. Construa cada tela em HTML/CSS

Configure uma vez no repositório do jogo (faça isso antes dos passos 1-3 escreverem qualquer coisa em ui/; cp -n nunca sobrescreve):

mkdir -p ui && cp -rn $SK/templates/examples/. ui/ && cd ui
cp <sua textura stud baixada> stud.png && cp -r $SK/styles .     # textura stud de ui-resources.com
cp <referência> ref.png && python3 $SK/scripts/read_reference.py ref.png      # -> style.css (rascunho)
python3 $SK/scripts/copy_icons.py icons.json --pack <seu pacote de ícones> && python3 build.py   # -> *.html + index.html
python3 -m http.server 8870 --bind 127.0.0.1    # run_in_background; ou a entrada launch.json abaixo + preview_start

.claude/launch.json no repositório do jogo (então 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 } ] }

Edite build.py (ele é a fonte da verdade; nunca edite manualmente os .html gerados). Regras mais importantes:

  • Palco 1920x1080, px absoluto; componentes compartilhados (plate, panel, card, T, I) para que irmãos compartilhem um tratamento; apenas cores variam. A estilização vem dos tokens: kit.css (estrutura) -> styles/<preset>.css (UI_STYLE=glass python3 build.py para alternar) -> style.css (este jogo). ?style=glass visualiza ao vivo.
  • Marcadores de exportação: grp(name, html, anchor) = um Frame Roblox de nível superior ancorado a uma borda da tela; name= em cada rótulo/ícone/botão ao vivo; sub(..., btn=True, opens='Shop'); hid=True para estados exportados, mas ocultos. PIPELINE.md seção 2 tem a tabela completa.
  • Todos os estados em states.html; layout para celular (hud_phone.html); cada elemento de tempo de execução (toasts, confirm, reward, tutorial, billboards) em templates.html; mostre peças em contexto sobre uma captura de jogo real assim que uma existir.
  • Sem aspas duplas dentro de style="..." inline; nenhum elemento chamado Active/Visible/Position...; use hid (opacidade 0), nunca display:none, para coisas que o jogo alterna.
  • Autoverificação: abra cada página com ?check no painel do navegador (checkOverflow() deve retornar sem overflow e sem imagens quebradas); renderize 2 capturas headless (REVIEW_LOOP.md) e analise-as.

5. Pare: o desenvolvedor verifica

Mostre style.html + a primeira tela na primeira rodada, depois o restante (REVIEW_LOOP.md). Aguarde um "sim" explícito. Cada correção: encontre a regra geral, escreva-a em LESSONS.md (regra, depois porquê), aplique-a em todos os lugares, diga ao desenvolvedor em uma linha o que você salvou. Nenhum trabalho no Roblox antes da aprovação.

6. Importe para o Roblox (após aprovação)

Detalhes completos: PIPELINE.md. De ui/ com o servidor rodando:

# primeira importação apenas: o runtime Luau + builder (depois substitua "<Gui>" em ../roblox/ui/client/UI.luau por rbx.json "gui")
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   # estes ficam em ReplicatedFirst / ReplicatedStorage
node $SK/scripts/export.mjs              # layout JSON + 2x PNG transparente por peça raster -> rbx/out/
python3 $SK/scripts/gen.py               # Data_<Tela>.luau, Data_Templates, Data_Manifest -> luau_out; arte -> rbx/out/upload
python3 $SK/scripts/mock.py && node $SK/scripts/mockshot.mjs   # renderização offline de semântica Roblox: diferença média 1-3 por tela
python3 $SK/scripts/ledger.py 20         # próximas URLs para upload; faça upload com mcp__Roblox_Studio__upload_image(+studio_id),
                                         # depois: echo '<result json>' | python3 $SK/scripts/ledger.py 20 ; repita até que restem 0
python3 $SK/scripts/assets.py            # AssetIds.luau
python3 $SK/scripts/bundle.py            # rbx/out/<Gui>Build.rbxmx

Regras de upload: <= 20 por lote, abra o local do GRUPO quando o jogo for de propriedade do grupo, nunca faça upload do que o ledger já tem, verifique IDs estrangeiros. Depois no Studio via robloxstudio: destrua o antigo ServerStorage.<Gui>Build -> import_rbxm do .rbxmx em ServerStorage -> require(game.ServerStorage.<Gui>Build.Builder).build() -> habilite a gui, Builder.fit() duas vezes, desabilite. Nunca use set_script_source (danifica \n); sempre .rbxmx + import_rbxm. Conecte o código do jogo (o Controller inicializa UI + UIKit; números de demonstração apenas com o atributo da gui PreviewMode): client/UI.luau (abrir/fechar/voltar, botões chamativos com atributos Button/Opens, tecla Escape, scrim, fila de popups, contagens) + UIKit.luau (contrato de template: clonar, set com gêmeos Shadow, ícones, barras, plural/article, worldLabel) + NumberFormat.luau. O código do jogo clona templates; ele nunca constrói uma aparência com Instance.new. Registre cada mudança em tempo de execução nas telas importadas (PIPELINE.md seção 8).

7. Verifique no Studio

VERIFY.md, nesta ordem: sem imagens vazias; proporções de ajuste; PropertySweep.atSizes em 1920x1080 / 1366x768 / 844x390; o harness do modo de edição (clone a gui, requisite o clone UI, acione, UI.destroy(), Archivable=false); playtest apenas quando necessário (verifique se nenhum playtest de outra pessoa está rodando): uma captura magenta não é uma UI quebrada; cliques reais em AbsolutePosition + size/2 +58 px; perfil de dispositivo celular; teste de clique rápido; listas atualizam no lugar. luau-analyze --mode=nonstrict em cada arquivo do cliente; check_copies.py para que as cópias do Studio correspondam ao disco.

8. Itere

Novo feedback -> LESSONS.md -> HTML -> aprovação -> exporte apenas a página alterada -> gen -> ledger faz upload apenas de nova arte -> bundle -> Builder.buildScreen("<Tela>") (um painel no lugar) ou build() -> ajuste -> verifique.

Nunca

Emojis ou um segundo pacote de ícones; ícones gerados por IA; arquivos do pacote de ícones enviados para qualquer modelo quando a licença proíbe uso de IA; texto incorporado em imagens; importar antes da aprovação; editar Data_*.luau manualmente; set_script_source; valores de demonstração escritos enquanto o cliente real do jogo está rodando; recompensas reivindicadas automaticamente; uma linha ou marcador desenhado sobre um prêmio; ids ou nomes específicos do jogo dentro desta pasta do skill.

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.

Habilidades Relacionadas

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