bnhoang2k/claude-env

27 skills for Claude Code: build UI, motion, 3D models and technical figures, and run long
multi-agent jobs without losing the plan or the budget.
## Use it
bash
claude plugin marketplace add bnhoang2k/claude-env
claude plugin install bnhoang2k@claude-env
Or install one plugin instead of the bundle: claude plugin install ui-suite@claude-env (also motion, models, figures, workflow).
Turn on updates: in Claude Code, open /plugin, go to Marketplaces, pick claude-env and choose Enable auto-update. It covers every plugin you installed from it.
Then work as usual. Each skill loads when the task needs it, and the hooks run on their own. Call one by name, such as /ui-suite:lint-ui.
## Design with your taste
Claude builds UI from your principles and references, not its default look.
ui-suite:ui-taste: your taste (principles, a never list, a gallery), read before any UI work.
ui-suite:taste: add to it: "I like this", a screenshot, a link.
Hook ui-taste-inject: pastes your taste in whenever a design skill loads or a UI file is edited.
## Check UI before it ships
Find what a screenshot hides: overlaps, bad data, drift between screens, fixes that break something else.
ui-suite:lint-ui: measure a page for overlapping text, tiny buttons and low contrast.
ui-suite:break-ui: feed a screen worst-case data (long names, emoji, zero items) and list what broke.
ui-suite:unify-ui: find screens that build the same thing two ways, and merge them.
ui-suite:ui-iteration-guardrail: list what must not break before a fix, and check it after each try.
Hook lint-ui-gate: after a UI edit, blocks the end of Claude's turn once if no passing lint-ui run covers the change. To skip it, write skip lint in your next message.
Hook break-gate: after a UI or 3D edit, blocks the end of Claude's turn until the matching break skills have run once that session. To skip it, write skip break in your next message.
Tool ui-lock: installs lint rules in a React repo that refuse raw colors, sizes and buttons outside your design tokens and components.
## Explain with pictures
When prose is not enough, from a quick sketch to a finished figure.
ui-suite:show-me: answer with a picture instead of a wall of text.
ui-suite:explain-as-machine: draw how a system works as a machine you can watch run.
figures:anatomy: a finished isometric figure for docs, a blog or a landing page.
figures:anatomy-reveal: a real object as a page you can turn and take apart, plus a short reveal video.
figures:hairline-create: a thin-line isometric figure that follows the pointer.
## Rebuild motion you like
motion:steal-mechanism: record how a site moves, measure it, and rebuild the motion frame by frame. It needs Claude Code's Workflow tool, ffmpeg, and Playwright or Puppeteer. Studying one reference costs 3.5 units and 4 agents at worst. Its intake mode also needs a clone of https://github.com/bnhoang2k/motion-kit with its dependencies installed (pnpm install, so pnpm from https://pnpm.io/installation), and a Node version inside the kit's engines.node range.
## Check 3D models
models:break-models: turn a model around and list parts that float, sink, poke through or vanish.
models:break-scene: check that a whole room makes sense: sizes, gaps, what stands where.