skills.rest
Hey-Viswa
Hey-ViswaCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

uber-design-skill

Implement Uber design-system patterns with tokens and layout rules for React/Next.js projects.

Updated Apr 11, 2026
Search Tags:#frontend#react#nextjs#design-system#design-patterns#uber
One-click install
npx skills add https://github.com/Hey-Viswa/-claude-design-system-skills --skill uber-design-skill
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: uber-design-skill
Source: https://github.com/Hey-Viswa/-claude-design-system-skills/tree/main/design_system_skills/uber-design-skill
Command: npx skills add https://github.com/Hey-Viswa/-claude-design-system-skills --skill uber-design-skill

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Design teams often struggle to apply Uber design-system patterns consistently across multiple frontend projects, leading to visual drift and inconsistent user experiences.

Core Features & Use Cases

  • Unified guidelines for components, typography, spacing, and interaction patterns that align with Uber's design language.
  • Implementation-ready guidance for React/Next.js apps, including token usage and layout principles.
  • Use Case: When building a new UI module, apply the Uber patterns to ensure a cohesive, accessible interface across teams.

Quick Start

Follow the Uber design-system rules to implement a cohesive UI component using the shared tokens and layout patterns.

Frequently Asked Questions about uber-design-skill

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

FAQPage Schema
How do I apply Uber design patterns to a React frontend project?▼

To apply Uber design patterns in React, you implement shared design tokens, layout principles, and interaction rules to ensure a cohesive and accessible user interface across your project.

What are Uber design tokens and how do they prevent visual drift in Next.js apps?▼

Uber design tokens are standardized variables for typography, spacing, and color. Using them in Next.js apps ensures consistent styling and prevents visual drift across multiple UI modules.

Can I use this to build reusable React components following the Uber design system?▼

Yes, you can build reusable React components using the Uber design system by following the provided rules for token usage, layout principles, and formalized interaction guidelines.

Does the Uber design skill work without external frontend dependencies?▼

The Uber design skill operates without external dependencies, providing self-contained rules and guidelines to direct your React or Next.js UI implementation using shared design tokens.

What is the best way to maintain consistent UI spacing and typography across multiple frontend teams?▼

The best way to maintain consistent UI spacing and typography is by applying a token-based design language and formalized guidelines that align your teams with the Uber design pattern.

Related Skills

Explore More Design & Creative Skills→
ProjectEuropaProjectEuropa
4

frontend-design

Design and implement accessible Next.js, React, and TailwindCSS frontend interfaces with design-system workflows.

Community
Advanced
jangirsamarthjangirsamarth

design-guide

Guide UI component creation with design tokens and interaction patterns.

Community
Intermediate
devsepninedevsepnine
1

web-design-guidelines

Review UI code for Web Interface Guidelines compliance and report violations by line.

Community
Intermediate
Tea-4-LifeTea-4-Life

frontend-design

Create production-grade frontend interfaces with cohesive design systems and accessible tokens.

Official
Advanced