builder-ux

Implement Three.js building UX with blueprints, undo/redo, and ghost previews.

8|3|Updated Dec 12, 2025
One-click install
npx skills add https://github.com/Bbeierle12/Skill-MCP-Claude --skill builder-ux
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: builder-ux
Source: https://github.com/Bbeierle12/Skill-MCP-Claude/tree/main/skills/builder-ux
Command: npx skills add https://github.com/Bbeierle12/Skill-MCP-Claude --skill builder-ux

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires threejs, three, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill defines the user experience layer for building systems, including prefabs, blueprints, undo/redo, ghost previews, and selection.

Core Features & Use Cases

  • Command pattern: Undo/redo for every action.
  • Blueprints: Save/load complex build configurations.
  • Use Case: Create a blueprint of a base, then place it with undo support.

Quick Start

Initialize BlueprintManager, CommandHistory, GhostPreview, and SelectionManager to wire up the UX pipeline.

Frequently Asked Questions about builder-ux

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I implement undo and redo for building actions in Three.js?

Use the CommandHistory system to execute and undo every building action. The command pattern stores execute/undo pairs, letting you revert any placement, deletion, or modification without rebuilding state manually.

Can I save and load building configurations as blueprints?

Yes, BlueprintManager handles blueprint serialization and versioning. Save complex build layouts, then load and place them later with full undo support and multi-select capability.

What's the best way to preview building placement before confirming?

GhostPreview renders placement previews with snapping and color feedback to indicate validity. It shows users exactly where structures will land and whether placement is allowed before commitment.

How do I implement multi-selection for building in Three.js games?

SelectionManager supports single, additive, box, radius, and connected selection modes. Combine modes for flexible building workflows, then apply batch operations like copy/paste or deletion to all selected objects.

Can I copy, paste, and share building blueprints across game instances?

Yes, the Skill handles batch copy/paste operations and blueprint serialization for sharing. Export saved configurations and import them elsewhere with versioning preserved.

Do I need Three.js knowledge to use these building UX systems?

Yes, this Skill builds on Three.js fundamentals. You should understand Three.js scene management, object hierarchies, and raycasting to integrate CommandHistory, GhostPreview, and SelectionManager into your game.