ux-ui-guide

Route design tasks to UX/UI sub-skills and enforce frontend-coding-standards alignment.

2|Updated Feb 24, 2026

Search Tags:#components #tokens #design-patterns #design-standards #ux-ui #frontend-coding-standards

Ready to run

npx skills add https://github.com/systempromptio/systemprompt-marketplace --skill ux-ui-guide

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: ux-ui-guide
Source: https://github.com/systempromptio/systemprompt-marketplace/tree/main/plugins/development/skills/ux-ui-guide
Command: npx skills add https://github.com/systempromptio/systemprompt-marketplace --skill ux-ui-guide

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Cohesive UX/UI design quality and governance across projects by routing design tasks to the appropriate sub-skills and ensuring alignment with frontend-coding-standards.

Core Features & Use Cases

Routes to the four sub-skills (visual-design-system, modern-css-patterns, ux-interaction-patterns, component-patterns) to maintain consistency and accelerate design decisions.
Provides a centralized design governance layer that can be invoked to define tokens, patterns, and interaction guidelines.
Use Case: When starting a new product, load visual-design-system to establish tokens, then ux-interaction-patterns to define motion and interactions.

Quick Start

Load the relevant sub-skill via the task router to begin with visual-design-system for color and typography decisions.

Frequently Asked Questions about ux-ui-guide

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

FAQPage Schema

How do I enforce cohesive UX/UI design standards across multiple projects?▼

To enforce cohesive UX/UI design standards, this Skill routes design tasks to specialized sub-skills for tokens, patterns, and interactions while mandating alignment with frontend-coding-standards to maintain consistency across projects.

What is the best way to define design tokens and interaction guidelines for a new product?▼

Defining design tokens and interaction guidelines is best handled by loading the visual-design-system sub-skill first for colors and typography, then routing to ux-interaction-patterns to establish motion and interaction behaviors.

How does the task router apply component patterns and modern CSS patterns to frontend development?▼

The task router applies component patterns and modern CSS patterns by activating the appropriate sub-skill for specific design tasks, ensuring that visual decisions align with established frontend-coding-standards for cohesive implementation.

Do I need frontend-coding-standards to manage my visual design system?▼

Yes, frontend-coding-standards is a mandatory dependency for managing your visual design system, acting as a centralized governance layer to ensure all token definitions and component patterns align with project requirements.

Can I use this to govern UX interaction patterns and modern CSS patterns at the same time?▼

Yes, you can govern UX interaction patterns and modern CSS patterns simultaneously by invoking the centralized design governance layer, which routes tasks to the respective sub-skills to accelerate and unify design decisions.