roblox-ui-design

Name: roblox-ui-design
Author: TabooHarmony

39installs1forks

How to install roblox-ui-design?

tabooharmony/roblox-brain/roblox-ui-design

$npx -y skills add TabooHarmony/roblox-brain --skill roblox-ui-design

Installs into the current project.

Summary

Roblox UI design with simulator default and existing-style inheritance. Use with roblox-gui.

Files · 1

View on GitHub

SKILL.md

1	# Roblox UI Visual Design
2
3	## When to Load
4
5	Load for Roblox UI design/review. No style source: use the simulator default. Existing UI/reference: preserve its style while applying these rules. Load `roblox-gui` for mechanics.
6
7	## Quick Reference
8
9	### Style
10
11	Existing UI/reference > explicit art direction > default.
12
13	For existing style, inspect surfaces, fonts, borders, depth, icons, spacing, and action colors. Reuse those tokens. Borrow style, not broken geometry. Do not import conflicting simulator conventions.
14
15	### Core Principles
16
17	- Topology: choose composition from the job: single-focus, collection, compare, HUD, list, or another justified shape. Do not force every task into one modal.
18	- Hierarchy: one focal object, state, or action gets the strongest contrast and scale. Quiet secondary content.
19	- Flow: each repeated flow has one owner: `UIListLayout`, `UIGridLayout`, or shared-column math. Do not mix layout objects with guessed offsets.
20	- Density: size the complete panel around useful content. Do not stretch shells or add metadata to fill space.
21	- Bounds: sum widths, gaps, padding, borders, and minimums. Keep content, strokes, and backings inside parents.
22	- Alignment: use shared layouts, fixed icon slots, and matching anchors. Do not independently offset paired icons and labels.
23	- State: active, available, locked, completed, and disabled states need structural/textual differences. Color is not the only signal.
24	- Verification: inspect the target viewport for clipping, overflow, dead space, type, and hierarchy. A valid tree is not proof of good composition.
25
26	### Default
27
28	Default: bold, layered, toy-like UI over 3D gameplay.
29
30	- Base: charcoal/warm brown. Green = claim/buy; red = danger/close; yellow = premium; blue = navigation/currency; purple = rare.
31	- Display: `FredokaOne` (cute) or `Oswald` (action); body: `BuilderSans`.
32	- Display type covers titles, section labels, item names, and key stats. Secondary values stay clean and smaller. Outline title and primary CTA only.
33	- Use one neutral outline per surface. Backings share the radius or stay inset. Put color in fills, active insets, or small cues, not every perimeter.
34	- Content cards need a centered focal icon/art placeholder. Do not leave item grids blank.
35
36	### Anti-Patterns
37
38	Oversized shells, wide panels around narrow stacks, fixed offsets in auto-sized flows, drifting actions, colored outlines on every card, blank item boxes, independent icon/label offsets, or simulator styling pasted over an existing identity.
39
40	> Full specs and QA checklist: [references/full.md](references/full.md)

People who liked this also viewed

6 picks

Type

hyperframes-cliUse the HyperFrames CLI development loop: init, add, catalog, capture, lint, check, snapshot, compare, grade-compare, preview, play, present, beats, keyframes, single or batch render, publish, cloud, SkillsJul 2026262k37k
request-refactor-planSkills for Real Engineers. Straight from my .agents directory.SkillsJul 2026165k181k
analyze-projectRigor Analyze / Rigor Audit read-only skill for deep learning research repositories. Use when the user wants to read and understand a repository, inspect model structure and training or inference entrSkillsMay 2026161k507
explore-codeRigor Improve implementation leaf skill for auditable candidate implementation in deep learning research repositories. Use when the researcher explicitly authorizes exploratory work on an isolated braSkillsMay 2026161k507
ubiquitous-languageSkills for Real Engineers. Straight from my .agents directory.SkillsJul 2026160k181k
scaffold-exercisesSkills for Real Engineers. Straight from my .agents directory.SkillsJul 2026149k181k

roblox-ui-design

39installs1forks

View on GitHub

How to install roblox-ui-design?

tabooharmony/roblox-brain/roblox-ui-design

$npx -y skills add TabooHarmony/roblox-brain --skill roblox-ui-design

Installs into the current project.

Summary

Roblox UI design with simulator default and existing-style inheritance. Use with roblox-gui.

Files · 1

View on GitHub

SKILL.md

1	# Roblox UI Visual Design
2
3	## When to Load
4
5	Load for Roblox UI design/review. No style source: use the simulator default. Existing UI/reference: preserve its style while applying these rules. Load `roblox-gui` for mechanics.
6
7	## Quick Reference
8
9	### Style
10
11	Existing UI/reference > explicit art direction > default.
12
13	For existing style, inspect surfaces, fonts, borders, depth, icons, spacing, and action colors. Reuse those tokens. Borrow style, not broken geometry. Do not import conflicting simulator conventions.
14
15	### Core Principles
16
17	- Topology: choose composition from the job: single-focus, collection, compare, HUD, list, or another justified shape. Do not force every task into one modal.
18	- Hierarchy: one focal object, state, or action gets the strongest contrast and scale. Quiet secondary content.
19	- Flow: each repeated flow has one owner: `UIListLayout`, `UIGridLayout`, or shared-column math. Do not mix layout objects with guessed offsets.
20	- Density: size the complete panel around useful content. Do not stretch shells or add metadata to fill space.
21	- Bounds: sum widths, gaps, padding, borders, and minimums. Keep content, strokes, and backings inside parents.
22	- Alignment: use shared layouts, fixed icon slots, and matching anchors. Do not independently offset paired icons and labels.
23	- State: active, available, locked, completed, and disabled states need structural/textual differences. Color is not the only signal.
24	- Verification: inspect the target viewport for clipping, overflow, dead space, type, and hierarchy. A valid tree is not proof of good composition.
25
26	### Default
27
28	Default: bold, layered, toy-like UI over 3D gameplay.
29
30	- Base: charcoal/warm brown. Green = claim/buy; red = danger/close; yellow = premium; blue = navigation/currency; purple = rare.
31	- Display: `FredokaOne` (cute) or `Oswald` (action); body: `BuilderSans`.
32	- Display type covers titles, section labels, item names, and key stats. Secondary values stay clean and smaller. Outline title and primary CTA only.
33	- Use one neutral outline per surface. Backings share the radius or stay inset. Put color in fills, active insets, or small cues, not every perimeter.
34	- Content cards need a centered focal icon/art placeholder. Do not leave item grids blank.
35
36	### Anti-Patterns
37
38	Oversized shells, wide panels around narrow stacks, fixed offsets in auto-sized flows, drifting actions, colored outlines on every card, blank item boxes, independent icon/label offsets, or simulator styling pasted over an existing identity.
39
40	> Full specs and QA checklist: [references/full.md](references/full.md)

People who liked this also viewed

6 picks

Type