ck:ui-ux-pro-max

Generate UI/UX design systems and accessibility recommendations for web and mobile interfaces.

1|Updated Mar 6, 2026
One-click install
npx skills add https://github.com/quanganh208/cookmate --skill ck-ui-ux-pro-max-quanganh208
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ck:ui-ux-pro-max
Source: https://github.com/quanganh208/cookmate/tree/main/.opencode/skills/ui-ux-pro-max
Command: npx skills add https://github.com/quanganh208/cookmate --skill ck-ui-ux-pro-max-quanganh208

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This Skill removes ambiguity and manual effort from UI and UX decision-making by producing structured, prioritized design-system recommendations, style guidance, accessibility checks, and implementation-ready snippets for web and mobile products.

Core Features & Use Cases

  • Design System Generation: Search-driven aggregation (style, color, typography, landing patterns) to create a MASTER design system and optional page-level overrides.
  • UX Review & Fixes: Accessibility checklists, touch/interaction rules, performance guidance, and anti-pattern detection for component and page reviews.
  • Practical Tooling: BM25-powered search across product/style/color datasets, CLI workflows to persist design systems, and code-ready examples for buttons, cards, inputs, and modals.
  • Use Case: Produce a responsive design system for a SaaS dashboard, pick an accessible color palette, recommend font pairings, and generate pre-delivery checklists and CSS snippets.

Quick Start

Generate a persistent design system for a SaaS dashboard using the CLI search workflow and save it as a MASTER design-system file.

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 comprehensive UI/UX design system for a SaaS dashboard?

To generate a UI/UX design system for a SaaS dashboard, this Skill uses search-driven aggregation to define styles, colors, typography, and landing patterns, outputting a MASTER design-system file with page-level overrides and production-ready implementation snippets.

What is included in a UX accessibility review for web and mobile interfaces?

A UX accessibility review for web and mobile includes checklists for compliance, touch and interaction rules, performance guidance, and anti-pattern detection to ensure components like inputs and modals meet accessibility standards.

How do I extract and apply accessible color palettes and typography for React Native apps?

You can extract accessible color palettes and typography for React Native apps by querying style datasets, which yields actionable design tokens and code-ready implementation snippets for consistent mobile component styling.

Can I use this tool to create page-level style overrides for an e-commerce site?

Yes, you can create page-level style overrides for an e-commerce site by persisting a master design system via CLI workflows and then applying specific style, color, and typography overrides to individual pages as needed.

What's the best way to persist design tokens and CSS snippets for an admin panel?

The best way to persist design tokens and CSS snippets for an admin panel is using the built-in CLI-based workflows, which save your master configurations and component code locally for continuous production-ready implementation.