Skills
.Work. You
Rest

mockup-builder

Community

Design UIs with HTML & CSS variables.

Design & Creative#html#css#prototype#ui design#mockup#unity ui toolkit
Authorraddue
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill streamlines the creation of visual mockups and UI prototypes by generating HTML and CSS that adheres to project-specific theming variables, ensuring consistency and ease of translation to Unity UI Toolkit.

Core Features & Use Cases

  • Themed Mockups: Generates HTML/CSS mockups using predefined Theme.uss variables for colors, spacing, and fonts.
  • Unity UI Toolkit Ready: Structures HTML and CSS (BEM naming, Flexbox) for direct conversion to Unity's VisualElement system.
  • Translation Notes: Includes a dedicated section detailing CSS features requiring C# equivalents in Unity.
  • Use Case: Quickly design a new settings panel for a game, ensuring all colors and spacing match the established theme and generating notes for the developer on how to implement hover effects in C#.

Quick Start

Use the mockup-builder skill to create an HTML mockup for a new inventory screen, saving it to docs/mockups/inventory-mockup.html.

Dependency Matrix

Required Modules

None required

Components

references

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: mockup-builder
Download link: https://github.com/raddue/crucible/archive/main.zip#mockup-builder

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.