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.