skills.rest
Arthakula
ArthakulaOFFICIAL
Explore all skills by this author →
GitHub

ui-ux-pro-max

Generates design system recommendations and searches UI/UX guidelines via a BM25-based CLI.

Updated Jun 16, 2026
Search Tags:#typography#accessibility#design system#color palette#tailwind#ui ux#bm25 search
One-click install
npx skills add https://github.com/Arthakula/arthakula-landingpage --skill ui-ux-pro-max-arthakula
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux-pro-max
Source: https://github.com/Arthakula/arthakula-landingpage/tree/main/.agents/skills/ui-ux-pro-max
Command: npx skills add https://github.com/Arthakula/arthakula-landingpage --skill ui-ux-pro-max-arthakula

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve? Choosing consistent styles, color palettes, typography, and UX patterns for web and mobile interfaces is time-consuming and error-prone. This Skill provides a searchable design knowledge base and an automated design system generator so UI decisions are grounded in documented guidelines rather than guesswork. ## Core Features & Use Cases - Design System Generation: Run the search CLI with --design-system to get a complete recommendation covering page pattern, style, color tokens, typography, effects, and anti-patterns, with optional persistence to a design-system/MASTER.md plus per-page override files. - Domain Search: Query 11 domains (style, color, typography, chart, landing, product, ux, icons, react, web, google-fonts) and 16 stack-specific guideline files (React, Next.js, Vue, Nuxt, SwiftUI, Flutter, shadcn, and more) using BM25-ranked search. - UX Review Checklists: Apply 99 prioritized UX rules covering accessibility, touch targets, animation, forms, navigation, and charts when reviewing or fixing existing interfaces. - Use Case: When asked to build a fintech dashboard, generate a persisted design system with reasoning-based style and color choices, then query stack-specific guidelines for the target framework before writing component code. ## Quick Start Ask the AI to generate a design system for your product type, for example: "Use the ui-ux-pro-max skill to generate a design system for a family finance landing page built with Nuxt 3."

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 generate a design system for a new project?▼

Run the search script with the --design-system flag and a query describing your product, for example a SaaS dashboard or beauty spa. The tool searches product, style, color, landing, and typography domains, applies reasoning rules, and returns a complete recommendation with pattern, colors, fonts, and anti-patterns.

How do I search UI/UX guidelines by domain or tech stack?▼

Use the search script with --domain to query domains like style, color, typography, ux, chart, or icons, and use --stack for framework-specific rules. Supported stacks include React, Next.js, Vue, Nuxt, Svelte, SwiftUI, React Native, Flutter, shadcn, and HTML/Tailwind.

Does the design system generator save results for later sessions?▼

Yes, adding --persist writes a design-system folder containing a MASTER.md global rules file, and adding --page creates page-specific override files under design-system/pages. Page files override the master rules when both exist.

What are the requirements to run the search CLI?▼

The scripts require Python 3 and use only the standard library (csv, json, re, pathlib), so no pip installs are needed. The CSV data files must remain in the data directory relative to the scripts folder.

When should this skill not be used?▼

Skip it for pure backend logic, API or database design, infrastructure work, and non-visual automation tasks. It applies only when a task changes how an interface looks, feels, moves, or is interacted with.

Related Skills

Explore More Design & Creative Skills→
TranVanTienDatTranVanTienDat

frontend-design

Generate production-quality frontend interfaces with distinctive typography, color, layout, and motion design.

Community
Advanced
xcrrrxcrrr
4

frontend-design

Generate frontend design specifications with CSS custom properties and component states.

Community
Advanced
bramanda48bramanda48

antislop-human

Validate UI accessibility for contrast, keyboard navigation, focus states, and mobile zoom.

Community
Intermediate
idy-00idy-00

migrate-design-system

Maps design tokens between a token system and external design systems via role-based crosswalks.

Community
Intermediate