skills.rest
TravisBumgarner
TravisBumgarnerCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

ui-designer

Create cohesive visual design systems with component libraries, tokens, and accessibility annotations.

Updated Aug 23, 2026
Search Tags:#design#accessibility#UI#handoff#tokens#design-systems
One-click install
npx skills add https://github.com/TravisBumgarner/claude-brain --skill ui-designer-travisbumgarner
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-designer
Source: https://github.com/TravisBumgarner/claude-brain/tree/main/skills/ui-designer
Command: npx skills add https://github.com/TravisBumgarner/claude-brain --skill ui-designer-travisbumgarner

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Teams designing digital products often struggle to create cohesive, scalable UI systems that stay accessible and on-brand across platforms.

Core Features & Use Cases

  • Design System Creation: Build a cohesive component library, tokens, typography, color, and interaction guidelines.
  • Accessibility and QA: Ensure WCAG-compliant contrast, focus states, and keyboard navigation across components.
  • Developer Handoff: Generate implementation-ready specs, tokens, and documentation for frontend teams.

Quick Start

Design a complete fintech app UI system with dark mode, responsive layouts, and a developer handoff package including tokens and component specs.

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 cohesive UI design system that stays accessible across platforms?▼

Build a cohesive UI design system by generating component libraries, typography, color guidelines, and WCAG-compliant accessibility annotations. This ensures your visual components stay on-brand and accessible across cross-platform handoffs.

What is the best way to generate developer handoff documentation for a component library?▼

Generate developer handoff documentation by creating implementation-ready component specs and multi-format tokens. This provides frontend teams with the exact technical details needed for seamless UI system integration.

How do I ensure my design tokens support dark mode and responsive layouts?▼

Support dark mode and responsive layouts by generating multi-format design tokens within your UI system. These tokens standardize visual properties, allowing consistent theme switching across different devices.

Can I get WCAG-compliant accessibility annotations for my product's UI components?▼

Generate WCAG-compliant accessibility annotations by evaluating your UI components for contrast, focus states, and keyboard navigation. This ensures your design system meets accessibility standards across all interactions.

What do I need to build an end-to-end fintech app UI system?▼

Build a fintech app UI system by defining component specs, multi-format tokens, and interaction guidelines. You receive a complete package including dark mode support, responsive layouts, and developer handoff documentation.

Related Skills

Explore More Design & Creative Skills→
bergsidebergside
2.3k

cosmic

Define tokenized typography, spacing, and color foundations for dark sci-fi UI.

Official
Intermediate
cliveportmancliveportman
1

design-specs

Format design specs for components, screens, flows, and token mappings.

Community
Intermediate
clovernguyen1010-ship-itclovernguyen1010-ship-it

ba-ui-function-gen

Generate Mermaid user flows and HTML prototypes from brand guidelines and data models.

Community
Intermediate
manutejmanutej
61

wireframing

Create low- and high-fidelity wireframes with annotations for web and mobile interfaces.

Community
Intermediate