skills.rest
elophanto
elophantoCOMMUNITY
Explore all skills by this author →
Website𝕏@elophantoGitHub

ui-design

Create scalable UI design systems with tokens, components, and accessibility.

116|9|Updated Feb 18, 2026
Search Tags:#design#theming#ui#accessibility#tokens#design-system#component-library
One-click install
npx skills add https://github.com/elophanto/EloPhanto --skill ui-design-elophanto
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-design
Source: https://github.com/elophanto/EloPhanto/tree/main/skills/ui-design
Command: npx skills add https://github.com/elophanto/EloPhanto --skill ui-design-elophanto

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Expert UI designer guidance for building visual design systems, component libraries, and accessible interfaces, aimed at reducing design debt and ensuring consistency across products.

Core Features & Use Cases

  • Design Foundations: tokens for colors, typography, spacing, shadows, and transitions to create cohesive design language.
  • Component Architecture: base components (buttons, inputs, navigation, feedback, data display) with states for default, hover, active, focus, and disabled.
  • Theming & Accessibility: dark mode support, WCAG-compliant contrast, keyboard navigation, and accessible focus indicators.
  • Responsive Design: mobile-first approach with breakpoints and grid patterns for cross-device compatibility.
  • EloPhanto Tool Integration: guidance for using browser_navigate, knowledge_write, and web_search to audit and document design systems.

Quick Start

Define a scalable design system with color tokens, typography scales, spacing rules, and a reusable component library for your product.

Frequently Asked Questions about ui-design

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

FAQPage Schema
How do I build a scalable UI design system with color tokens and typography scales?▼

A scalable UI design system requires defining foundational tokens for colors, typography, spacing, shadows, and transitions to establish a cohesive visual language across product interfaces.

What is the best way to ensure components meet accessibility and WCAG contrast standards?▼

Ensuring component accessibility involves implementing WCAG-compliant color contrast, keyboard navigation, and accessible focus indicators across all component states within your design system.

How do I structure a component library to support dark mode and responsive behavior?▼

Structure your component library by defining theming rules with dark mode support and applying a mobile-first responsive approach using defined breakpoints and grid patterns for cross-device compatibility.

Can I use this approach to audit and document an existing design system?▼

Yes, you can audit and document existing design systems by leveraging browser navigation, knowledge writing, and web search tools to review interface consistency and record component architecture.

What component states do I need to cover when building a UI component library?▼

Building a UI component library requires defining base components like buttons and inputs with specific states for default, hover, active, focus, and disabled interactions.

Related Skills

Explore More Design & Creative Skills→
jwmyersjwmyers

visual-style-guide

Define color palettes, SVG styling, and token designs for Zero-Day Attack interfaces.

Community
Intermediate
zcheezchee
1

wiki

Index, search, and cross-reference Markdown pages in a local knowledge base.

Community
Basic
dev-mirzabicerdev-mirzabicer

frontend-ui-ux

Translate design briefs into production-ready frontend UI components.

Community
Advanced
lexicalninjalexicalninja
2

accessibility-design-checker

Identify accessibility issues in UI designs, wireframes, and prototypes.

Community
Intermediate