skills.rest
yannzurkinden
yannzurkindenCOMMUNITY
Explore all skills by this author →
GitHub

ui-ux-pro-max

Consolidate UI/UX design guidelines into a reusable playbook for web and mobile apps.

1|Updated Feb 5, 2026
Search Tags:#typography#accessibility#ui-ux#responsive-design#design-tokens#color-system#a11y-guidelines
One-click install
npx skills add https://github.com/yannzurkinden/masterclass-cc-lausanne --skill ui-ux-pro-max-yannzurkinden
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux-pro-max
Source: https://github.com/yannzurkinden/masterclass-cc-lausanne/tree/main/skills_copy/ui-ux-pro-max
Command: npx skills add https://github.com/yannzurkinden/masterclass-cc-lausanne --skill ui-ux-pro-max-yannzurkinden

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill consolidates UI/UX design guidelines into a reusable blueprint, helping teams produce consistent, accessible interfaces across platforms.

Core Features & Use Cases

  • Accessibility rules (color contrast, focus states, alt text)
  • Typography and color system guidance
  • Interaction patterns, spacing, and responsive layout guidelines
  • Use Case: standardize dashboards and product pages across teams, enabling faster design-to-dev handoffs.

Quick Start

Apply these guidelines to a new or existing project: audit the current UI against the rules, then generate a design token sheet and a component style guide to share with the team.

Frequently Asked Questions about ui-ux-pro-max

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

FAQPage Schema
How do I enforce accessibility rules like color contrast and focus states in my UI?▼

Enforce accessibility rules by auditing your UI against a11y guidelines for color contrast ratios, focus states, and alt text. This process produces implementation notes that ensure compliant component usage across web and mobile platforms.

What is the best way to generate a design token sheet for web and mobile apps?▼

The best way to generate a design token sheet is consolidating typography, color system, and spacing guidelines into a reusable playbook. This standardizes dashboards and product pages, enabling faster design-to-dev handoffs with consistent responsive design tokens.

Can I use these UI/UX guidelines to standardize dashboards across different teams?▼

Yes, you can use these UI/UX guidelines to standardize dashboards across teams. The blueprint covers interaction patterns, responsive typography, and motion preferences, ensuring consistent interfaces and smoother design-to-dev handoffs.

How do I audit an existing project against UI/UX design best practices?▼

To audit an existing project, apply consolidated UI/UX guidelines to check current interfaces for accessibility, color contrast, and responsive layout. This generates a component style guide and design token sheet to share with your team.

Does this UI/UX playbook support responsive typography and motion preferences?▼

Yes, this UI/UX playbook supports responsive typography and motion preferences. It enforces these requirements alongside interaction patterns and consistent design tokens, translating them into actionable implementation notes for web and mobile apps.

Related Skills

Explore More Design & Creative Skills→
hopeoverturehopeoverture
6

ui-library-usage-auditor

Audit shadcn/ui component usage for accessibility and design-system conformance.

Community
Advanced
PosteriotPosteriot

design-system

Translate design specifications into structured CSS variables and Tailwind tokens.

Community
Intermediate
logikwiselogikwise

design-guide

Standardize frontend UI design using design tokens, typography, and component patterns.

Community
Intermediate
JhabbigJhabbig

wcag-audit-patterns

Audit web interfaces for WCAG 2.2 accessibility violations.

Community
Advanced