skills.rest
cndoit18
cndoit18COMMUNITY
Explore all skills by this author →
WebsiteGitHub

ui-ux-pro-max

Search internal data files with a Python-based BM25 engine for UI/UX design assets.

11|1|Updated Mar 18, 2025
Search Tags:#typography#design system#ui/ux#style guide#color palette#tailwind css#frontend development
One-click install
npx skills add https://github.com/cndoit18/dotfiles --skill ui-ux-pro-max-cndoit18
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux-pro-max
Source: https://github.com/cndoit18/dotfiles/tree/main/home/dot_claude/skills/ui-ux-pro-max
Command: npx skills add https://github.com/cndoit18/dotfiles --skill ui-ux-pro-max-cndoit18

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill provides comprehensive UI/UX design intelligence, offering a vast library of styles, palettes, font pairings, and stack-specific best practices to streamline the design and implementation process.

Core Features & Use Cases

  • Design System Generation: Quickly generate design elements like color palettes, font pairings, and style guides based on product type, industry, and desired aesthetic.
  • Stack-Specific Guidance: Receive tailored recommendations for implementing UI/UX across various technology stacks (React, Vue, Tailwind CSS, etc.).
  • Use Case: Design a professional, accessible, and visually appealing landing page for a new FinTech SaaS product by leveraging the Skill's ability to suggest elegant styles, appropriate color schemes, and modern font combinations, along with Tailwind CSS implementation details.

Quick Start

Use the ui-ux-pro-max skill to design a professional landing page for a beauty spa service.

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 generate a UI style guide and color palette for a specific industry?▼

To generate a UI style guide and color palette, the Skill synthesizes internal design assets based on your product type and desired aesthetic, providing tailored font pairings and visual guidelines.

What is the best way to find Tailwind CSS implementation details for UI components?▼

Finding Tailwind CSS implementation details involves querying the Skill's internal design library, which returns stack-specific best practices and relevant code guidelines for your digital product.

Can I get font pairing and typography recommendations for a SaaS landing page?▼

Yes, you can get font pairing and typography recommendations by requesting design intelligence for a SaaS landing page, leveraging the Skill's internal search engine to match modern, accessible font combinations.

How does the design system search engine work for finding chart types?▼

The design system search engine works by using a Python-based BM25 algorithm to query internal data files, retrieving relevant chart types and UI/UX best practices based on your specific search terms.

Does this tool provide stack-specific guidance for React and Vue frontend development?▼

Yes, it provides stack-specific guidance for frontend development by searching its internal references to deliver tailored UI/UX implementation recommendations across technology stacks like React and Vue.

How do I design an accessible dashboard interface using a design system?▼

To design an accessible dashboard interface, the Skill searches its internal design intelligence to suggest appropriate chart types, accessible color palettes, and structural styles tailored for dashboard applications.

Related Skills

Explore More Design & Creative Skills→
ZiadNagarZiadNagar

animation-systems

Define motion tokens, choreography patterns, and reduced-motion support for design systems.

Community
Advanced
Richie1129Richie1129

ui-ux-pro-max

Search curated UI/UX design styles, palettes, and stack-specific guidelines.

Community
Intermediate
dirnbauerdirnbauer
33

frontend-design

Design frontend interfaces with typography, color palettes, motion, and CSS/HTML examples.

Community
Basic
aleph23aleph23

aesthetic

Apply design principles to create aesthetically beautiful interfaces.

Community
Advanced