skills.rest
ricardocidale
ricardocidaleCOMMUNITY
Explore all skills by this author →
GitHub

design-system

Standardize UI components, tokens, and patterns across the partner portal.

Updated Aug 23, 2026
Search Tags:#typography#migrations#tokens#design-system#color-palette#component-library#ui-kit
One-click install
npx skills add https://github.com/ricardocidale/LB_Hospitality --skill design-system-ricardocidale
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system
Source: https://github.com/ricardocidale/LB_Hospitality/tree/main/skills/design-system
Command: npx skills add https://github.com/ricardocidale/LB_Hospitality --skill design-system-ricardocidale

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

L+B Hospitality Group UI design system provides a single source of truth for visual language. It ensures consistency across pages, components, color palette, typography, layout, and migrations, reducing design debt and speeding up development.

Core Features & Use Cases

  • Centralized color tokens, typography scale, and spacing guidelines for all pages and components.
  • Shared component catalog and layout patterns to accelerate page creation and ensure brand alignment.
  • Migration guides and composable building blocks that simplify updates across the partner portal.

Quick Start

Start by importing the design tokens and applying the shared components to a new page to ensure visual consistency.

Frequently Asked Questions about design-system

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

FAQPage Schema
How do I standardize UI components and design tokens for consistent branding?▼

Standardize UI components by importing centralized color palette tokens, typography scale, and spacing guidelines into your pages. This unified design system acts as a single source of truth, ensuring visual consistency and reducing design debt across the partner portal.

What's the best way to migrate existing pages to a shared component library?▼

Migrate existing pages using the provided migration guides and composable building blocks. These resources simplify updates by mapping legacy interfaces to the shared component catalog, accelerating page creation while enforcing brand alignment.

Do I need a specific framework to use this design system's color palette and typography tokens?▼

No specific framework is required. The design system provides production-ready tokens and a reproducible structure with documentation, allowing designers and developers to apply the color palette, typography, and layout patterns across the portal.

Can I use these layout patterns and component catalog to speed up new page creation?▼

Yes, you can use the shared component catalog and layout patterns to accelerate new page creation. Import the design tokens and apply the shared components to ensure visual consistency and brand alignment from the start.

Why does my UI design system need centralized color and typography tokens?▼

Centralized color and typography tokens are needed to eliminate visual inconsistencies and reduce design debt. By establishing a single source of truth for your visual language, you speed up development and ensure all components match brand standards.

What are the limitations of manually managing a component library without design tokens?▼

Manually managing components without design tokens leads to design debt and visual inconsistencies. Without a unified design system, updating color palette, typography, and layout patterns across pages becomes slow and prone to errors.

Related Skills

Explore More Design & Creative Skills→
guideopsguideops

power

Implement a dark aesthetic design system with typography and color scales.

Community
Intermediate
ghpworkuse-webghpworkuse-web

write-frontend-tests

Generate integration tests for updated frontend pages and components.

Community
Intermediate
jtangir87jtangir87

design-guide

Define Paperclip UI design standards for layout, color, typography, and components.

Community
Advanced
qazuorqazuor

frontend-design

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

Community
Basic