skills.rest
collat-labs
collat-labsOFFICIAL
Explore all skills by this author →
GitHub

ui-ux-pro-max

Generate stack-appropriate UI/UX design direction with styles, palettes, typography, and layout patterns.

1|Updated Apr 25, 2026
Search Tags:#typography#accessibility#color palette#ui design#ux guidelines#frontend components#dashboard charts
One-click install
npx skills add https://github.com/collat-labs/collat --skill ui-ux-pro-max-collat-labs
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux-pro-max
Source: https://github.com/collat-labs/collat/tree/main/.opencode/skills/ui-ux-pro-max
Command: npx skills add https://github.com/collat-labs/collat --skill ui-ux-pro-max-collat-labs

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It helps you avoid inconsistent UI decisions by providing ready-to-apply UI styles, palettes, typography pairings, chart ideas, and UX best practices tailored to your product and frontend stack.

Core Features & Use Cases

  • Stack-aware UI guidance: Recommends layouts, components, and implementation patterns for frameworks such as React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, and shadcn/ui.
  • Design system building blocks: Provides reusable style directions including glassmorphism, minimalism, brutalism, bento grids, dark mode theming, spacing, hover/shadow behavior, and accessibility considerations.
  • Chart and UX direction: Suggests chart types and dashboard/analytics UI patterns alongside anti-patterns to improve clarity and usability.
  • Use case: Build a SaaS dashboard that looks cohesive across pages by using a matching palette, typography pairing, consistent cards/tables/forms, and chart styles that fit the product’s goals.

Quick Start

Ask the AI: “Design a professional SaaS landing page in shadcn/ui with a dark mode-first theme, include a pricing section, and use an accessible bento-grid layout with a modern font pairing and chart-ready style guidelines.”

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 cohesive SaaS dashboard with matching charts and typography?▼

Design a cohesive SaaS dashboard by selecting compatible UI styles, color palettes, typography pairings, and chart patterns tailored to your product. This ensures consistent cards, tables, forms, and analytics visuals across all pages.

Can I get UI design direction for frontend stacks like React, Next.js, and Tailwind?▼

Yes, you can get UI design direction for frontend stacks like React, Next.js, Vue, Svelte, and Tailwind. The guidance recommends stack-appropriate layouts, components, and implementation patterns for your specific framework.

What's the best way to choose an accessible color palette and font pairing for a landing page?▼

The best way to choose an accessible color palette and font pairing is to extract product requirements and synthesize matching styles. This provides ready-to-apply typography and color directions that meet accessibility considerations.

How does chart and UX direction improve dashboard clarity and usability?▼

Chart and UX direction improves dashboard clarity by suggesting appropriate chart types and analytics UI patterns alongside specific anti-patterns. This prevents inconsistent visual decisions and enhances overall data usability.

Does this UI style intelligence support dark mode themes and bento grid layouts?▼

Yes, this UI style intelligence supports dark mode themes and bento grid layouts. It provides reusable design system building blocks including glassmorphism, minimalism, spacing, and hover/shadow behavior for your interfaces.

Related Skills

Explore More Design & Creative Skills→
sparktech-aisparktech-ai
1

ui-spec

Generate UI page specifications and AI design prompts from PRDs and user flows.

Official
Advanced
NammDevNammDev
2

ui-styling

Integrate shadcn/ui with Tailwind CSS for React UI styling.

Community
Intermediate
CarbeneAICarbeneAI
9

ui-ux-pro-max

Provides WCAG 2.1 AA/AAA compliant web and mobile UI/UX design guidance with Tailwind-ready implementation patterns.

Community
Advanced
JoaquimCassanoJoaquimCassano
1

ui-ux-pro-max

Search a BM25 knowledge base for UI/UX design guidance.

Community
Advanced