skills.rest
tkhieu
tkhieuCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

ui-ux-pro-max

Retrieve UI/UX design knowledge and output stack-aware implementation guidelines.

Updated Dec 1, 2025
Search Tags:#typography#design#accessibility#dashboard#color#ui-ux#palette
One-click install
npx skills add https://github.com/tkhieu/202512-vue-image-cropper --skill ui-ux-pro-max-tkhieu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux-pro-max
Source: https://github.com/tkhieu/202512-vue-image-cropper/tree/main/.claude/skills/ui-ux-pro-max
Command: npx skills add https://github.com/tkhieu/202512-vue-image-cropper --skill ui-ux-pro-max-tkhieu

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This Skill provides a searchable library of UI styles, color palettes, fonts, charts, product recommendations, UX guidelines, and stack-specific best practices to accelerate UI/UX planning and implementation.

Core Features & Use Cases

  • Searchable catalog of UI styles, color palettes, font pairings, chart recommendations, and stack-specific guidelines.
  • Stack guidelines for frontend frameworks (default html-tailwind, with options for React, Next.js, Vue, etc.).
  • End-to-end design planning: color, typography, spacing, accessibility, and layout patterns.
  • Actionable product recommendations and reference patterns for common web app scenarios (website, dashboard, landing page, admin panel, e-commerce, portfolio, mobile app).

Quick Start

Design a fintech dashboard UI by requesting a style, a color palette, typography, and a sample component layout. Use the html-tailwind stack for implementation.

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 design a dashboard UI with consistent color palettes and typography?▼

This Skill provides searchable catalogs of color palettes, font pairings, and layout patterns specifically for dashboards. Retrieve a palette and typography pairing, then apply stack-specific implementation guidelines—default html-tailwind or your chosen framework—to build accessible, cohesive interfaces.

Can I get UI design recommendations for different product types like SaaS apps or e-commerce sites?▼

Yes. The Skill includes reference patterns and design recommendations for websites, dashboards, landing pages, admin panels, e-commerce, portfolios, and mobile apps. Search by product type to retrieve style, color, typography, and component guidance tailored to your use case.

What's the best way to ensure my UI meets accessibility standards during design planning?▼

Accessibility is integrated into the design planning workflow. Request accessibility guidelines alongside color, typography, spacing, and layout patterns. The Skill outputs actionable checklists and stack-aware recommendations to ensure compliance from the design phase forward.

How do I implement UI designs across different frontend frameworks like React or Vue?▼

The Skill provides stack-specific implementation guidelines for html-tailwind, React, Next.js, Vue, and other frameworks. Select your stack when retrieving design recommendations to get framework-ready code patterns and component layouts.

Does this work for planning both design and development in one workflow?▼

Yes. The Skill supports end-to-end design planning from color and typography selection through component layout, then outputs developer-ready guidelines and implementation checklists for your chosen frontend stack.

What should I do if I need specific chart recommendations or style variations for my interface?▼

Search the catalog for chart recommendations and UI style variations by component type or domain. The Skill returns actionable product recommendations and reference patterns that address specific style, color, typography, and layout needs.

Related Skills

Explore More Design & Creative Skills→
moshi-azzmoshi-azz
2

ui-ux-pro-max

Generate UI/UX design systems with guidelines, palettes, and typography for specified tech stacks.

Community
Advanced
ricoccricocc
268

rico-design-md

Convert a website into a design system with tokens, typography, and CSS artifacts.

Community
Advanced
amit397amit397

tailwind-design-system

Build design systems with Tailwind CSS v4 using CSS-first configuration.

Community
Advanced
RightNow-AIRightNow-AI
18.1k

vector-db

Guide vector database operations, embedding selection, indexing, chunking, and RAG architectures.

Official
Advanced