skills.rest
romiluz13
romiluz13COMMUNITY
Explore all skills by this author →
GitHub

ui-design

Design UI layouts with visual hierarchy, spacing, color, and state design.

161|25|Updated Oct 22, 2025
Search Tags:#accessibility#responsive design#design tokens#user experience#UI design#state design#visual hierarchy
One-click install
npx skills add https://github.com/romiluz13/cc10x --skill ui-design-romiluz13
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-design
Source: https://github.com/romiluz13/cc10x/tree/main/plugins/cc10x/skills/ui-design
Command: npx skills add https://github.com/romiluz13/cc10x --skill ui-design-romiluz13

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill ensures UI designs are purposeful and directly support user and admin functionality, rather than being generic visual aesthetics. It provides a structured approach to visual hierarchy, spacing, color, and state design, preventing inconsistent and hard-to-use interfaces.

Core Features & Use Cases

  • Functionality-First UI: Designs UI based on user and admin flows, ensuring visual elements enable core tasks.
  • Visual Hierarchy & Rhythm: Applies principles of size, weight, color, and spacing to guide user attention and create consistent layouts.
  • Design Token Systems: Guides the creation of scalable and maintainable design systems using flat, semantic, or tiered tokens.
  • State Design: Covers the 7 essential states (Default, Hover, Active, Focus, Disabled, Loading, Error) for interactive components, with a strong emphasis on accessibility.
  • Use Case: When designing a new dashboard, use this skill to ensure the layout, typography, and interactive elements are all optimized to support the user's primary data analysis and management tasks.

Quick Start

Design the UI for a new user profile page, ensuring it supports the user's ability to view and edit their personal information.