npx claudepluginhub raddue/crucibleThis skill uses the workspace's default tool permissions.
Create HTML mockups for your project's UI that are constrained to Theme.uss variables and designed for direct translation to Unity UI Toolkit.
Translates visual mockups, HTML, screenshots into Unity UI Toolkit USS and programmatic C# code using translation maps for fidelity.
Builds self-contained interactive HTML mockups matching the project's CSS theme for UX exploration, design reviews, comparing options, and prototyping features before coding.
Creates UI/UX mockups and HTML/CSS/JS prototypes without a designer, using JSON for data simulation and structuring for Next.js components. Validates features via trend research from Dribbble, Awwwards.
Share bugs, ideas, or general feedback.
Create HTML mockups for your project's UI that are constrained to Theme.uss variables and designed for direct translation to Unity UI Toolkit.
Skill type: Rigid — follow exactly.
references/theme-variables.md for the Theme.uss variable catalog. Freshness check: verify the Last synced date is current. If the project's Theme.uss has been modified since that date, regenerate theme-variables.md from Theme.uss's :root block only (see the Freshness Check instructions in theme-variables.md).skills/shared/uss-approximation-patterns.md to understand what CSS effects are achievable in USS and how to approximate those that aren't.skills/mock-to-unity/references/css-to-uss-mapping.md, specifically the "CSS Properties Not Available in USS" section, for the hard-block list of features that MUST NOT be used in mockups.docs/mockups/ for visual language reference — but note that mockups created before this skill may use hardcoded hex values and lack CSS variables. Use them only to understand the project's visual language (colors, proportions, layout patterns), NOT as CSS architecture exemplars.These are non-negotiable. Every mockup must satisfy all of them.
Theming:
var(--color-bg-base))--spacing-*, --font-size-*, --radius-*, --border-*)--color-* variable in :root with a comment explaining why:root block is a LOCAL COPY of Theme.uss values for browser rendering. Values MUST match references/theme-variables.md exactly. Do not redefine existing variables with different values. If you need a value that doesn't exist, add a new variable with a descriptive name and document it in the Translation Notes.Layout:
translateY for hover lift effects (these need C# in Unity)USS Feasibility:
skills/mock-to-unity/references/css-to-uss-mapping.md under "CSS Properties Not Available in USS." These have no USS equivalent and no viable approximation. This includes but is not limited to: text-shadow, @media queries, display: grid/inline, calc(), clamp(), viewport units (vw/vh/vmin/vmax).skills/shared/uss-approximation-patterns.md:
::before/::after, text-transform, transition, cursor (non-standard values), border-style: dashed, letter-spacing in em units, backdrop-filter, animation/@keyframesNaming:
.talent-node, .talent-node__icon, .talent-node--maxed)Output:
docs/mockups/<feature>-mockup.htmlEvery mockup follows this structure:
1. :root block
- All CSS variables from Theme.uss used by this mockup
- Any new variables with explanatory comments
2. Component CSS
- Uses only var() references, never raw values
- Flexbox layout only
- BEM class names
3. HTML structure
- Class names match USS selector intent
- Hierarchy maps to VisualElement tree
- Data-attributes for state variants (data-state="maxed", etc.)
4. Translation Notes (visible footer section)
- CSS features that need C# equivalents (hover → PointerEnterEvent)
- Properties known to fail in USS (height in ScrollView)
- Any new Theme.uss variables this mockup introduces
At the bottom of every mockup, include a visible <section class="translation-notes"> covering:
:hover and :active → USS supports these as pseudo-classes. Use USS selectors directly (e.g., .button:hover { background-color: ... }). Do NOT use C# PointerEnterEvent/PointerLeaveEvent for hover styling — that pattern is outdated.text-overflow: ellipsis → may need C# truncation logictransition → need DOTween or manual interpolation--color-* or --spacing-* variables not yet in Theme.ussmock-to-unity's jobThis skill produces mockups. When used standalone, invoke crucible:quality-gate after the mockup is created and committed. When used as a sub-skill of build, the parent orchestrator handles gating.
The quality gate reviewer MUST check:
skills/shared/uss-approximation-patterns.md:root variable values match references/theme-variables.md (after freshness check)var() references, no hardcoded hex/rgb valuesItems 1-3 are blocking — they guarantee downstream translation failure if not fixed before proceeding to mock-to-unity.