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

Ready to run

npx skills add https://github.com/Hey-Viswa/-claude-design-system-skills --skill uber-design-skill

💬 Prompt for ChatGPT / Claude Chat▼

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.