skills.rest
orenmagid
orenmagidCOMMUNITY
Explore all skills by this author →
GitHub

cabinet-information-design

Generate standalone HTML mockups with annotated design decisions for UI layouts.

Updated Aug 27, 2026
Search Tags:#design#layout#wireframe#visual#mockup#visual-hierarchy#information-density
One-click install
npx skills add https://github.com/orenmagid/claude-cabinet --skill cabinet-information-design
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: cabinet-information-design
Source: https://github.com/orenmagid/claude-cabinet/tree/main/templates/skills/cabinet-information-design
Command: npx skills add https://github.com/orenmagid/claude-cabinet --skill cabinet-information-design

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Information environment designer who evaluates spatial composition, visual hierarchy, and layout decisions. Produces standalone HTML mockups before UI implementation, establishing concrete visual targets grounded in cognitive principles from Tufte, Bertin, Shneiderman, and Pirolli.

Core Features & Use Cases

  • Generates standalone HTML mocks that illustrate layout, density, and hierarchy for UI plans.
  • Evaluates existing designs against cognitive-principle guidelines and documents trade-offs with annotated reasoning.
  • Supports planning and audit phases by providing a tangible target that stakeholders can critique and approve.

Quick Start

Provide a standalone HTML mockup that demonstrates the planned information hierarchy for the current plan's UI surface.

Frequently Asked Questions about cabinet-information-design

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

FAQPage Schema
How do I create an HTML mockup to plan UI layout and information hierarchy?▼

Create an HTML mockup by generating a standalone visual target that demonstrates planned information hierarchy for your UI surface. This approach produces concrete layout designs with annotations explaining spatial composition and visual density trade-offs before implementation begins.

Can I use visual hierarchy principles to audit an existing interface design?▼

Yes, you can audit an existing interface by evaluating its layout against cognitive-principle guidelines from Tufte, Bertin, Shneiderman, and Pirolli. The audit documents visual hierarchy and information density trade-offs with annotated reasoning for stakeholder review.

What is the best way to document UI design decisions and trade-offs for stakeholders?▼

Document UI design decisions by producing standalone HTML mockups that serve as design contracts with embedded annotations. These mocks explain layout choices, spatial composition reasoning, and information density trade-offs grounded in established cognitive principles.

Does information density affect layout decisions when generating wireframes?▼

Information density directly affects layout decisions by requiring careful spatial composition and visual hierarchy planning. Generating wireframes as HTML mockups ensures density constraints are visually mapped and cognitive load is managed before UI implementation begins.

Related Skills

Explore More Design & Creative Skills→
AesopScottAesopScott
1

design-experience-plus-plus

Generate website and product surface designs using MAPS M8 Experience Design.

Community
Advanced
mulyovedmulyoved

design-html

Convert approved UI mockups into responsive HTML/CSS using DESIGN.md tokens.

Community
Advanced
desafindesafin

moai-foundation-philosopher

Integrate First Principles Analysis, Stanford Design Thinking, and MIT Systems Engineering for complex problem-solving.

Community
Advanced
ArieGoldkinArieGoldkin

design-to-production

Convert HTML prototypes into React components with shadcn/ui and validation.

Community
Intermediate