skills.rest
Gami19
Gami19COMMUNITY
Explore all skills by this author →
GitHub

ui-design

Apply Refactoring UI principles to create cohesive interfaces and design reviews.

Updated Apr 8, 2026
Search Tags:#typography#accessibility#ui-design#design-system#spacing#color-system#visual-hierarchy
One-click install
npx skills add https://github.com/Gami19/rd-strands-agents --skill ui-design-gami19
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-design
Source: https://github.com/Gami19/rd-strands-agents/tree/main/strands-py/backend/agent/skills/pr/ui-design
Command: npx skills add https://github.com/Gami19/rd-strands-agents --skill ui-design-gami19

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

UI design often suffers from inconsistent hierarchy, spacing, and color choices that reduce usability. This skill applies Refactoring UI principles to help teams design cohesive interfaces and review existing work for improvements.

Core Features & Use Cases

  • Establish visual hierarchy, spacing systems, color palettes, and component patterns aligned with Refactoring UI.
  • Review and refine existing UIs or design new components with a systematic, scalable approach.
  • Use cases include UI audits, design tokens creation, and design spec generation for frontend teams.

Quick Start

Provide a dashboard design brief using Refactoring UI principles to demonstrate hierarchy, spacing, typography, color, and components.

Frequently Asked Questions about ui-design

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

FAQPage Schema
How do I establish visual hierarchy and spacing systems for a dashboard UI?▼

Establish visual hierarchy and spacing systems by applying Refactoring UI principles to define consistent typography, color palettes, and component patterns. This delivers cohesive interfaces and scalable design specs for frontend teams.

How do I audit an existing user interface for design inconsistencies?▼

Audit an existing user interface by systematically reviewing its visual hierarchy, spacing, typography, and color choices against Refactoring UI principles to identify usability issues and generate actionable improvements.

What is the best way to create design tokens for frontend development teams?▼

Create design tokens by systematically defining your spacing systems, color palettes, and typography scales. This establishes a scalable component approach that aligns with Refactoring UI principles for cohesive interfaces.

Can I use Refactoring UI principles to review and refine existing web components?▼

Yes, you can review and refine existing web components using a systematic approach based on Refactoring UI. It evaluates visual hierarchy, spacing, and color to ensure cohesive and accessible interface patterns.

Do I need a design brief to generate a UI design spec?▼

You need a design brief to generate a UI design spec. Providing a dashboard design brief allows the system to apply Refactoring UI principles to demonstrate hierarchy, spacing, typography, color, and components.

Related Skills

Explore More Design & Creative Skills→
vobasevobase
59

teach-impeccable

Scan project files and write design context to CLAUDE.md.

Official
Intermediate
phoenicisfphoenicisf

figma-implement-design

Translate Figma designs into production-ready UI code.

Community
Advanced
phazurlabsphazurlabs
35

Accessibility & Inclusive Design

Convert accessibility requirements into WCAG 2.2 and ARIA implementation guidance.

Community
Advanced
vignesh2027vignesh2027
6

ui-ux-designer

Audit interfaces against WCAG 2.1 AA and provide UX critique.

Community
Intermediate