UI Style Lab

Selects a skin family and defines rules for surfaces, typography, icons, and motion.

Updated May 19, 2026
One-click install
npx skills add https://github.com/TimeKast/AgendaInteligente --skill ui-style-lab
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: UI Style Lab
Source: https://github.com/TimeKast/AgendaInteligente/tree/main/.agent/skills/ui-style-lab
Command: npx skills add https://github.com/TimeKast/AgendaInteligente --skill ui-style-lab

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill prevents product UIs from feeling generic by helping you choose a coherent visual style family and consistent behavior across surfaces, typography, icons, and motion.

Core Features & Use Cases

  • Skin family recommendations: Select an appropriate style direction (e.g., Midnight Executive, Editorial Premium, Dense Operator) with guidance on where it fits and what to avoid.
  • Surface and layout behavior: Define how depth, layering, and container transitions should work to support hierarchy and readability.
  • Typography, icon, and motion system: Establish a typography posture, an icon treatment policy (including base vs accent roles), and a motion profile for premium interaction feedback.

Quick Start

Use the UI Style Lab to define the product’s visual tone, recommended skin family, surface rules, typography posture, icon strategy, motion profile, and anti-patterns to avoid for your next UI direction review.

Frequently Asked Questions about UI Style Lab

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

FAQPage Schema
How do I choose a cohesive UI style theme for a product dashboard?

Choosing a cohesive UI style theme involves selecting a skin family like Midnight Executive or Dense Operator and defining coordinated rules for surfaces, typography, iconography, and motion. This prevents a generic product aesthetic and ensures visual consistency across the interface.

What is a UI motion profile and how does it affect product aesthetics?

A UI motion profile defines the interaction feedback behavior for premium product aesthetics. It coordinates with typography and iconography systems to establish a clear visual posture, ensuring movement supports hierarchy and readability rather than distracting the user.

How do I define typography and iconography rules for an admin console design system?

Defining typography and iconography rules for an admin console requires establishing a typography posture and an icon treatment policy. You must separate base versus accent icon roles and coordinate them with surface behaviors to maintain hierarchy and readability in dense operational interfaces.

Can I apply a premium UI skin to a dense operational interface?

Yes, you can apply a premium UI skin to a dense operational interface by selecting the Dense Operator style direction. This defines how depth, layering, and container transitions work to support readability without sacrificing the information density required by operational workflows.

What are common anti-patterns to avoid when selecting a product UI skin?

Common anti-patterns to avoid when selecting a product UI skin include mismatched posture, ignoring trust versus novelty balance, and inconsistent surface behavior. Explicitly avoiding these ensures the chosen typography, icon, and motion profiles maintain a cohesive visual direction across dashboards and editorial layouts.

When do I need a formal UI style selection workflow for my application?

You need a formal UI style selection workflow when planning new product aesthetics or choosing themes for AI apps and editorial premium layouts. It addresses posture, density, and surface behavior to prevent generic visual directions and ensure coordinated interaction feedback.