skills.rest
AidenSbVevo
AidenSbVevoCOMMUNITY
Explore all skills by this author →
GitHub

ui-designer

Standardizes design systems and component specs for data-dense web applications.

1|Updated Jul 5, 2026
Search Tags:#ui#accessibility#components#dashboard#ux#design-system
One-click install
npx skills add https://github.com/AidenSbVevo/claude-code-starter --skill ui-designer-aidensbvevo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-designer
Source: https://github.com/AidenSbVevo/claude-code-starter/tree/main/skills/ui-designer
Command: npx skills add https://github.com/AidenSbVevo/claude-code-starter --skill ui-designer-aidensbvevo

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill addresses the challenge of maintaining visual consistency and structural integrity in data-dense interfaces, preventing common design anti-patterns like modal overload and inconsistent spacing.

Core Features & Use Cases

  • Design System Architecture: Provides standardized tokens for colors, typography, spacing, and shadows to ensure a cohesive look and feel.
  • Component Specification: Offers templates for creating detailed component specs, interaction designs, and data-dense tables.
  • Use Case: Use this skill to audit an existing dashboard for accessibility and visual hierarchy, or to generate a new component specification that includes responsive rules, states, and animation budgets.

Quick Start

Use the ui-designer skill to generate a component specification for a new data-dense table including loading and error states.

Frequently Asked Questions about ui-designer

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

FAQPage Schema
How do I create a consistent UI design system for data-dense dashboards?▼

To create a consistent UI design system for data-dense dashboards, standardize your UI/UX component specifications using structured design tokens for colors, typography, spacing, and shadows to ensure visual cohesion.

What is the best way to specify interactive states for complex data tables?▼

The best way to specify interactive states for complex data tables is to generate a detailed component specification that explicitly documents loading, error, and responsive states, alongside animation budgets for frontend handoff.

How do I audit an existing dashboard for accessibility and visual hierarchy?▼

You can audit an existing dashboard for accessibility by applying accessibility-first design principles to evaluate structural integrity, detect visual anti-patterns like modal overload, and correct inconsistent spacing.

Does this approach support standardizing design tokens for frontend engineering handoff?▼

Yes, standardizing design tokens for frontend engineering handoff is fully supported, providing structured documentation and precise layout patterns to bridge the gap between UI design and implementation.

Why does my interface suffer from modal overload and inconsistent spacing?▼

Your interface suffers from modal overload and inconsistent spacing due to a lack of standardized UI/UX component specifications and cohesive design tokens, which are necessary to maintain structural integrity in data-dense interfaces.

Related Skills

Explore More Design & Creative Skills→
Fr-e-dFr-e-d
157

architecture-extract

Analyze project directory structures to generate architectural summaries.

Community
Basic
daemon-blockint-techdaemon-blockint-tech
7

ui-software-engineer

Translate design specifications into responsive user interfaces with design tokens and Storybook stories.

Community
Intermediate
Logos-LiberLogos-Liber
17

wireframing-prototyping

Create wireframes, user flows, sitemaps, and interactive prototypes for digital products.

Official
Intermediate
mymx2mymx2
4

repowiki

Generate Mermaid-integrated Markdown documentation from repository architecture analysis.

Community
Advanced