skills.rest
saranskumar
saranskumarCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

uiux-designer

Generate design system tokens and guidelines for React, Vue, Next.js, Flutter, and SwiftUI.

Updated Apr 19, 2026
Search Tags:#typography#design#ui#responsive#ux#design-system#color-palette
One-click install
npx skills add https://github.com/saranskumar/anti-slop --skill uiux-designer-saranskumar
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: uiux-designer
Source: https://github.com/saranskumar/anti-slop/tree/main/archive/skills-legacy/uiux-designer
Command: npx skills add https://github.com/saranskumar/anti-slop --skill uiux-designer-saranskumar

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The UI/UX Designer skill provides a comprehensive framework to plan, validate, and evolve user interfaces by offering design system guidance, accessibility principles, and stack-aware patterns. It helps teams maintain visual consistency across web and mobile applications.

Core Features & Use Cases

  • Design System Generation: Create tokens for color, typography, spacing, and components that scale across platforms.
  • Accessibility and Usability: Apply WCAG-compliant contrast, focus states, and responsive patterns to ensure usable interfaces.
  • Stack-aware Guidelines: Provide guidelines tailored to React, Vue, Next.js, Flutter, and SwiftUI for faster delivery.

Quick Start

Describe your product type, audience, and preferred stack to generate a tailored design system.

Frequently Asked Questions about uiux-designer

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

FAQPage Schema
How do I create a scalable design system for a SaaS dashboard?▼

Build a scalable design system by generating foundational tokens for color, typography, and spacing. This process applies stack-aware component guidelines to ensure visual consistency across SaaS dashboards and mobile applications.

What are design tokens and how do they apply to responsive UI?▼

Design tokens are centralized variables for color, typography, and spacing that ensure responsive UI consistency. They enable automated generation and validation across platforms by maintaining a single source of truth for visual properties.

Does this design system skill provide guidelines for React and Flutter?▼

Yes, the design system skill provides stack-aware guidelines tailored specifically for React, Vue, Next.js, Flutter, and SwiftUI. These tailored patterns accelerate delivery by aligning token definitions with framework-specific best practices.

How do I apply WCAG-compliant accessibility rules to a color palette?▼

Apply WCAG-compliant accessibility rules to a color palette by validating contrast ratios and defining clear focus states. This skill integrates accessibility principles directly into token generation for usable interfaces.

Can I generate typography scales for enterprise portals without manual calculations?▼

You can generate typography scales for enterprise portals by defining specific typography tokens and spacing rules. This enables automated generation and validation, eliminating manual calculations for your UI components.

What is the best way to maintain visual consistency across web and mobile applications?▼

The best way to maintain visual consistency is implementing a comprehensive design system with standardized tokens and component guidelines. This framework plans, validates, and evolves interfaces across web and mobile applications.

Related Skills

Explore More Design & Creative Skills→
ZiadNagarZiadNagar

animation-systems

Define motion tokens, choreography patterns, and reduced-motion support for design systems.

Community
Advanced
chicongstchicongst
2

ui-design

Automates UI design execution by applying tokens, palettes, typography and spacing across frameworks.

Community
Intermediate
Canhada-LabsCanhada-Labs
2

frontend-accessibility

Enforce WCAG 2.1 AA compliance and i18n parity in TypeScript React frontends.

Official
Advanced
royvillasanaroyvillasana
34

ai-prototype-prompter

Convert Figma design data into structured prompts for AI UI prototyping tools.

Community
Intermediate