Generate HTML and CSS mockups using Theme.uss variables for Unity UI Toolkit.
npx skills add https://github.com/raddue/crucible --skill mockup-builder
Please help me install this Agent Skill. Skill: mockup-builder Source: https://github.com/raddue/crucible/tree/main/skills/mockup-builder Command: npx skills add https://github.com/raddue/crucible --skill mockup-builder
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.
Use the mockup-builder skill to create an HTML mockup for a new inventory screen, saving it to docs/mockups/inventory-mockup.html.
High-intent search queries and answers about installing and using this skill.
You can create Unity UI Toolkit-ready UI mockups by generating HTML and CSS constrained by Theme.uss variables. This approach uses Flexbox layout and BEM naming conventions, ensuring a direct structural translation to Unity's VisualElement system.
Prototyping game UI panels with HTML and CSS is best handled by using predefined Theme.uss variables for colors and spacing. This ensures visual consistency with your game's established theme while structuring the mockup for easy C# implementation.
Yes, the HTML mockup approach fully supports Flexbox layouts for Unity UI Toolkit. The generated CSS uses Flexbox and BEM naming conventions to ensure the visual structure maps directly to Unity's VisualElement hierarchy.
To handle CSS hover effects when translating a UI mockup to Unity C#, you can reference the dedicated translation notes included in the mockup. These notes detail specific CSS features and their required C# equivalents for implementation.
Yes, you can use your existing Theme.uss variables in an HTML mockup. The mockup generation process specifically constrains the CSS to these predefined project variables for colors, spacing, and fonts to maintain theme consistency.
A limitation of using HTML and CSS for Unity UI prototypes is that certain CSS features lack direct VisualElement equivalents. You must manually implement these specific visual behaviors in C# using the provided translation notes as a guide.
moasqEnforce design tokens via a centralized AppTheme enum for colors, fonts, and spacing.
raddueTranslates mockups, HTML references, or screenshots into Unity UI Toolkit USS and C# code with Theme.uss styling and bug workarounds.
Dev-GOMGenerate UXML structures, USS styling, and C# VisualElement code for Unity UI Toolkit.
musujBuild HTML, CSS, and JavaScript UI mockups with simulated JSON data.
