skills.rest
ricocc
ricoccCOMMUNITY
Explore all skills by this author →
Website𝕏@ricouiiGitHub

rico-ui-ux-themes

Apply built-in UI/UX themes or generate new ones from reference documents.

268|39|Updated Mar 8, 2026
Search Tags:#design#ui#themes#ux#references#theme-generation
One-click install
npx skills add https://github.com/ricocc/rico-skills --skill rico-ui-ux-themes
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: rico-ui-ux-themes
Source: https://github.com/ricocc/rico-skills/tree/main/skills/rico-ui-ux-themes
Command: npx skills add https://github.com/ricocc/rico-skills --skill rico-ui-ux-themes

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

UI/UX teams often struggle with maintaining a cohesive design system across multiple projects; Rico UI/UX Themes provides a curated set of built-in themes and a generation workflow to ensure consistency and speed.

Core Features & Use Cases

  • 20 built-in themes ready to apply across products for rapid UI alignment.
  • Theme generation from industry references to create brand- or product-specific palettes and guidelines.
  • Theme application workflow that integrates with major stacks (React, Vue, Angular, HTML/Sass/Tailwind) and supports token-based design systems.

Quick Start

Apply a built-in theme to the current project by selecting a theme name.

Frequently Asked Questions about rico-ui-ux-themes

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

FAQPage Schema
How do I apply a cohesive UI theme to a React or Vue project?▼

You can apply a cohesive UI theme to React, Vue, Angular, or HTML/Sass/Tailwind projects by selecting one of the 20 built-in themes. This enforces consistent design tokens, accessible color systems, and typography rules across your stack.

Can I generate a custom UI theme from existing design references?▼

Yes, you can generate custom UI themes from industry reference documents. The theme-generation workflow creates brand-specific palettes and guidelines while enforcing accessible color systems and scalable layout patterns.

What is the best way to maintain a consistent design system across multiple products?▼

The best way to maintain design consistency is using a token-based design system with pre-applied rules. This provides 20 curated built-in themes and ensures cohesive typography, colors, and layout patterns across all projects.

Does this UI theme generation workflow support Tailwind CSS and Sass?▼

Yes, the UI theme application workflow supports integration with HTML, Sass, and Tailwind CSS. It also extends support to React, Vue, and Angular, applying consistent design tokens across these major stacks.

How do I create brand-specific design tokens for an enterprise application?▼

You create brand-specific design tokens by running the theme-generation workflow from industry reference documents. This process outputs cohesive palettes, typography rules, and scalable layout patterns tailored to your brand.

Why does my design system break when scaling UI components across different frameworks?▼

Your design system breaks without enforced consistent tokens and accessible color systems across stacks. Applying a token-based UI theme ensures scalable layout patterns and typography rules remain unified across React, Vue, Angular, and HTML.

Related Skills

Explore More Design & Creative Skills→
Haseeb-ArshadHaseeb-Arshad
2

theme-factory

Apply preset color palettes and typography to slides and documents.

Community
Intermediate
IFIR649IFIR649

visual-design-foundations

Build cohesive visual design systems with typography, color, spacing, and iconography tokens.

Community
Advanced
vuminhieuvuminhieu

ui-styling

Build accessible React interfaces with shadcn/ui, Tailwind CSS, and canvas visuals.

Community
Intermediate
Impertio-StudioImpertio-Studio

tailwind-core-design-system

Guide Tailwind CSS design tokens, configuration, and responsive patterns.

Official
Advanced