skills.rest
coreymaypray
coreymayprayCOMMUNITY
Explore all skills by this author →
GitHub

ui-designer

Create token-based UI systems and component libraries for mobile and web projects.

1|Updated Mar 13, 2026
Search Tags:#design#ui#accessibility#figma#handoff#tokens#design-system
One-click install
npx skills add https://github.com/coreymaypray/sloth-skill-tree --skill ui-designer-coreymaypray
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-designer
Source: https://github.com/coreymaypray/sloth-skill-tree/tree/main/plugins/maycrest-create/skills/ui-designer
Command: npx skills add https://github.com/coreymaypray/sloth-skill-tree --skill ui-designer-coreymaypray

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Maycrest teams struggle with inconsistent interfaces and fragmented design tokens. This Skill provides a token-based design system approach to align visuals across mobile and web, ensuring accessibility and scalable handoff.

Core Features & Use Cases

  • Design system architecture and token-based design tokens
  • Pixel-perfect components, token-driven styling, and Figma handoff
  • End-to-end designer-to-developer collaboration for fast iteration

Quick Start

Design a token-based UI system for the Maycrest checkout flow.

Frequently Asked Questions about ui-designer

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

FAQPage Schema
How do I build a token-based design system for Next.js and Expo projects?▼

To build a token-based design system for Next.js and Expo, define scalable design tokens that drive styling uniformly across web and mobile. This approach applies token-driven architecture to ensure visual consistency across Tailwind and NativeWind environments.

What is the best way to handle Figma handoff for developers?▼

The best way to handle Figma handoff is generating production-ready component definitions and token export documentation. This ensures developers receive exact styling specifications and accessibility considerations directly mapped to the codebase.

Can I use Tailwind and NativeWind tokens for a unified web and mobile UI?▼

Yes, you can use Tailwind and NativeWind tokens for a unified web and mobile UI by structuring a centralized design-system architecture. Exporting shared tokens ensures pixel-perfect rendering and consistent styling across both platforms.

How do you structure design tokens for scalable component libraries?▼

Structure design tokens for scalable component libraries by categorizing them into a hierarchical architecture that separates global variables from component-specific styles. This token export method allows pixel-perfect components to adapt without breaking visual consistency.

Does a token-based UI system improve accessibility in Figma handoff?▼

A token-based UI system improves accessibility in Figma handoff by embedding accessibility considerations directly into the component definitions and token values. This ensures design specifications carry accessible color contrast and sizing constraints into production.

Related Skills

Explore More Design & Creative Skills→
vuralserhat86vuralserhat86
43

figma_integration

Convert Figma variables to CSS and Auto Layout to Flexbox or Grid.

Community
Intermediate
brightdatabrightdata
245

design-mirror

Extract design tokens from a website and apply them to Tailwind, CSS variables, or CSS-in-JS.

Official
Advanced
coreymaypraycoreymaypray
1

frontend-developer

Automate Expo and Next.js frontend UI development with NativeWind styling.

Community
Advanced
jasonmichaelbell78-creatorjasonmichaelbell78-creator

ui-design-system

Generate design tokens and document components for scalable UI systems.

Community
Advanced