skills.rest
systempromptio
systempromptioOFFICIAL
Explore all skills by this author →
WebsiteGitHub

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
One-click install
npx skills add https://github.com/systempromptio/systemprompt-marketplace --skill ux-ui-guide
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
Canhada-LabsCanhada-Labs
2

Design System & Component Architecture

Governs design tokens and component architecture standards for frontend development and review workflows.

Official
Advanced
jangirsamarthjangirsamarth

design-guide

Guide UI component creation with design tokens and interaction patterns.

Community
Intermediate
TKlerxTKlerx

design-taste-frontend

Implement frontend UI/UX with React, Next.js, Tailwind CSS, and Framer Motion.

Community
Advanced
naviktnavikt
1

extract

Identify reusable components and design tokens for consolidation into a design system.

Official
Advanced