skills.rest
niltsiar
niltsiarCOMMUNITY
Explore all skills by this author →
Website𝕏@niltsiarGitHub

ui-ux-designer

Guide designers in creating design systems, animations, and responsive layouts with WCAG accessibility.

1|Updated Nov 26, 2025
Search Tags:#design#ui#accessibility#responsive#ux#design-systems#material-3
One-click install
npx skills add https://github.com/niltsiar/kotlin_multiplatform_pokedex --skill ui-ux-designer-niltsiar
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux-designer
Source: https://github.com/niltsiar/kotlin_multiplatform_pokedex/tree/main/.agents/ui-ux-designer
Command: npx skills add https://github.com/niltsiar/kotlin_multiplatform_pokedex --skill ui-ux-designer-niltsiar

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designers need a structured skill to systematically create cohesive visual designs, animation specs, and interaction patterns that align with design systems and accessibility standards.

Core Features & Use Cases

  • Design System Creation: Define tokens, spacing, typography, elevation, and shape tokens to enable consistent UI across platforms.
  • Animation & Motion Specification: Document timings, easing, transitions, micro-interactions, and accessibility-friendly motion.
  • Responsive Layout & Interaction Planning: Plan breakpoints, adaptive navigation patterns, touch targets, and safe areas.
  • Accessibility & WCAG Compliance: Ensure color contrast, readable typography, and reduced motion considerations.

Quick Start

Draft a complete design system plan for a new feature, including tokens, motion specs, and accessibility considerations.

Frequently Asked Questions about ui-ux-designer

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

FAQPage Schema
How do I create a design system with consistent spacing, typography, and elevation tokens?▼

Specify animation timings, easing curves, and micro-interactions while integrating accessibility-friendly motion considerations. Documenting transitions and reduced motion guidelines ensures interaction patterns remain usable for all users.

How do I plan responsive layouts with adaptive navigation and touch targets?▼

Plan responsive layouts by defining breakpoints, adaptive navigation patterns, touch targets, and safe areas across mobile, tablet, and desktop. This approach ensures interfaces adapt cleanly to varying screen dimensions.

How do I ensure WCAG compliance for color contrast and readable typography?▼

Ensure WCAG compliance by establishing accessibility guardrails for color contrast ratios, readable typography, and reduced motion considerations. These guardrails guarantee designs remain accessible across all interaction states.

Can I use Material 3 expressive patterns for cross-platform UI design?▼

Yes, you can apply Material 3 expressive patterns to build cohesive visual designs across mobile, tablet, and desktop environments. This approach aligns cross-platform interfaces with modern interaction and motion standards.

What is the best way to draft a complete design system plan for a new feature?▼

The best way to draft a design system plan is to define tokens, motion specifications, and accessibility considerations together. This comprehensive approach covers visual design, interaction patterns, and WCAG guardrails simultaneously.

Related Skills

Explore More Design & Creative Skills→
qazuorqazuor

frontend-design

Guide UI teams through pre-coding design foundations for typography, color, and layout.

Community
Basic
duongdevduongdev
9

figma-integration

Convert Figma designs into implementation-ready component specifications and styling guidelines.

Community
Advanced
duylinhdang1998duylinhdang1998

ux-wireframing

Create ASCII wireframes for web and mobile interfaces with box-drawing characters.

Community
Intermediate
etewiahetewiah
635

theme-evaluation

Evaluate theme palettes for WCAG contrast and accessibility compliance.

Community
Advanced