skills.rest
hidonguyen
hidonguyenCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

ck:ui-ux-pro-max

Generate UI/UX design systems with color palettes, typography, and component specs.

Updated Apr 2, 2026
Search Tags:#typography#accessibility#react#ui-ux#design-system#color-palette#design-guidelines
One-click install
npx skills add https://github.com/hidonguyen/trade-ops --skill ck-ui-ux-pro-max-hidonguyen
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ck:ui-ux-pro-max
Source: https://github.com/hidonguyen/trade-ops/tree/main/.opencode/skills/ui-ux-pro-max
Command: npx skills add https://github.com/hidonguyen/trade-ops --skill ck-ui-ux-pro-max-hidonguyen

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

Provides a structured, searchable design intelligence engine to replace ad-hoc UI decisions and manual design-system creation, speeding up style selection, accessibility checks, and component specification for web and mobile products.

Core Features & Use Cases

  • Searchable style, color, typography, and UX guideline databases with BM25 ranking for targeted recommendations.
  • Automated design-system generation (MASTER + page override pattern), exportable component specs, and pre-delivery checklists for consistent implementation.
  • Scripts to sync color and reasoning CSVs, generate typography and layout guidance, and persist project-level design-system files.
  • Use case: produce a complete design system for a SaaS dashboard including palette, token variables, component CSS examples, accessibility rules, and a MASTER.md persisted to a project folder.

Quick Start

Generate a design system for a SaaS dashboard named "Acme Analytics" and persist the result as design-system/Acme-Analytics/MASTER.md.

Frequently Asked Questions about ck:ui-ux-pro-max

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

FAQPage Schema
How do I generate a UI/UX design system for a React dashboard?▼

Yes, you can generate cross-platform component specifications for web and mobile interfaces. The skill outputs actionable component specs, token variables, and layout patterns suitable for both web and mobile app projects.

How do I check color palette accessibility for my design system?▼

The skill uses local CSV-driven processing without external dependencies, relying on internal scripts to sync color and reasoning data. It applies BM25 ranking to searchable style, color, typography, and UX guideline databases for targeted recommendations.

Can I use this to create design guidelines for a SaaS e-commerce site?▼

The skill persists project-level design-system files locally using a MASTER and page override pattern. This allows you to maintain base style guidelines while applying specific page-level overrides for your web or mobile interface.

Does this design system generator require external dependencies?▼

The skill handles cross-platform stacks by generating comprehensive UI/UX design systems with universal component specs. It outputs token variables and layout patterns that you can adapt across different web and mobile frameworks.

Related Skills

Explore More Design & Creative Skills→
cin12211cin12211
218

ui-ux-pro-max

Query a searchable repository of styles, palettes, fonts, and stack guidelines.

Community
Intermediate
leonardoteodorooleonardoteodoroo

design-system-patterns

Define design system tokens, theming, and component architecture patterns.

Community
Intermediate
atrislabsatrislabs
67

atris-design

Apply the Atris design policy to frontend typography, color, layout, motion, and backgrounds.

Official
Advanced
marktantongcomarktantongco
2

ui-ux-pro-max

Generate design systems and frontend guidance for web and mobile projects.

Community
Advanced