ui-layout-contract

What problem does it solve?

This Skill prevents cluttered, inconsistent user interfaces and ensures adherence to a specific 8-bit retro design aesthetic by enforcing strict layout rules and visual guidelines.

Core Features & Use Cases

• Layout Governance: Enforces a flat hierarchy, limits nested splits, and manages z-index conflicts.
• 8-bit Design Compliance: Mandates solid colors, squared corners, and prohibits blur effects.
• Responsive Design: Ensures layouts adapt correctly across mobile, tablet, and desktop breakpoints.
• Use Case: When an agent is tasked with creating a new dashboard widget, this Skill ensures it fits seamlessly into the existing UI, uses the correct color palette, and doesn't introduce visual clutter or modern design elements that clash with the 8-bit theme.

Quick Start

Use the ui-layout-contract skill to ensure the new settings panel adheres to the 8-bit design principles and has a flat hierarchy.