ck:ui-ux-pro-max

Recommend UI/UX design systems and implementation guidance from a searchable corpus.

Updated Aug 27, 2026
One-click install
npx skills add https://github.com/MinhQuyen274/smartify --skill ck-ui-ux-pro-max-minhquyen274
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ck:ui-ux-pro-max
Source: https://github.com/MinhQuyen274/smartify/tree/main/Frontend_PROJECT_Figma/.opencode/skills/ui-ux-pro-max
Command: npx skills add https://github.com/MinhQuyen274/smartify --skill ck-ui-ux-pro-max-minhquyen274

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

UI/UX reviews and implementation decisions often get stuck on inconsistent styles, accessibility gaps, and unclear interaction patterns, slowing product delivery and lowering quality.

Core Features & Use Cases

  • Design intelligence for UI patterns: Provides recommended page/pattern structure for websites, dashboards, landing pages, and admin/e-commerce experiences.
  • Accessibility-first guidance: Covers contrast targets, focus states, keyboard navigation, ARIA labeling, and form labeling.
  • Style, color, and typography systemization: Recommends styles, palettes, font pairings, and chart/visual guidance across multiple stack contexts.
  • Stack-aware implementation direction: Produces recommendations aligned to html-tailwind, React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, and shadcn/ui via stack/domain searches.

Quick Start

Ask the skill for a complete design system by running: python3 .opencode/skills/ui-ux-pro-max/scripts/search.py "SaaS dashboard for fintech with dark mode, accessible charts" --design-system -p "Smartify Fintech Dashboard".

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 an accessible UI/UX design system for a React or Next.js dashboard?

To generate an accessible UI/UX design system, run the search script with your project description and target stack like React or Next.js. It searches a corpus of styles, palettes, and UX rules to produce ranked recommendations prioritizing accessibility and interaction quality.

What is the best way to systemize typography and color palettes for web components?

Systemizing typography and color palettes involves querying the skill with your domain context. It uses BM25-backed CSV searches to recommend specific font pairings, color palettes, and visual guidance tailored to your stack and UI element categories.

Does this UI/UX recommendation tool work with Flutter and SwiftUI for mobile interfaces?

Yes, this UI/UX recommendation tool works with Flutter and SwiftUI. It provides stack-aware implementation direction and pattern structures specifically aligned for mobile and web component work across these frameworks.

Can I get accessibility-first guidance for contrast targets and ARIA labeling in admin panels?

Yes, you can get accessibility-first guidance for admin panels. The recommendations explicitly cover contrast targets, focus states, keyboard navigation, ARIA labeling, and form labeling to ensure your interface meets accessibility standards.

How do I find UI patterns and interaction scenarios for an e-commerce landing page?

Finding UI patterns for an e-commerce landing page requires running a stack and domain search. It outputs reasoned page structure recommendations and interaction scenarios ranked by accessibility and user experience quality.

Why should I use a searchable design corpus instead of manually building a shadcn/ui component library?

Using a searchable design corpus prevents inconsistent styles and accessibility gaps that slow product delivery. It provides ranked, reasoned outputs for stacks like shadcn/ui faster than manual implementation, ensuring interaction quality across common UI categories.