skills.rest
tamagusko
tamaguskoCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

ui-ux-pro-max

Generates design systems and stack-specific UI guidance from product keywords.

Updated Oct 7, 2022
Search Tags:#typography#accessibility#frontend#design system#color palette#ui design#tailwind
One-click install
npx skills add https://github.com/tamagusko/linux-cfg --skill ui-ux-pro-max-tamagusko
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux-pro-max
Source: https://github.com/tamagusko/linux-cfg/tree/main/dotfiles/claude/skills/ui-ux-pro-max
Command: npx skills add https://github.com/tamagusko/linux-cfg --skill ui-ux-pro-max-tamagusko

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve? Turning a vague UI request into a coherent design direction is slow and inconsistent. This Skill converts product type, industry, and style keywords into a concrete design system with palette, typography, layout patterns, and stack-aware implementation rules. ## Core Features & Use Cases - Design System Generation: Produces a recommended style direction, palette family, typography pairing, effects, and anti-patterns from a keyword query, with optional persistence to design-system/MASTER.md for multi-page projects. - Domain and Stack Lookup: Retrieves focused guidance across domains (style, color, typography, landing, chart, ux, product) and stacks (html-tailwind, react, nextjs, vue, svelte, swiftui, react-native, flutter, shadcn, jetpack-compose). - Use Case: When asked to build a fintech analytics dashboard, run the design-system query to get a trust-oriented dark palette and typography pairing, then pull chart and ux domain guidance before writing Tailwind or React code. ## Quick Start Ask the assistant to design a landing page or dashboard for your product and it will generate a design system with palette, typography, and stack-specific implementation notes.

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 UI project?▼

Run the bundled search.py script with your product type, industry, and style keywords plus the --design-system flag. It returns a style direction, palette, typography, effects, layout bias, and anti-patterns matched from the ui-reasoning.csv dataset.

What frontend stacks does this UI guidance support?▼

The stack lookup covers html-tailwind, react, nextjs, vue, svelte, swiftui, react-native, flutter, shadcn, and jetpack-compose. Each stack returns three to four implementation rules focused on theming, state, and accessibility.

How do I keep a consistent design across multiple pages?▼

Use the --persist flag when generating the design system to write design-system/MASTER.md as the default authority. Add --page to create per-page override files under design-system/pages/ that record only deviations from the master.

Can I get guidance on charts and accessibility for a dashboard?▼

Yes, use the --domain flag with chart or ux to retrieve focused entries. The chart domain covers line, bar, funnel, and table-plus-sparkline patterns, while ux covers contrast ratios, touch targets, motion restraint, and error feedback placement.

What are the limitations of this design guidance approach?▼

Recommendations come from a fixed keyword-matching heuristic dataset, so unusual product types may match loosely. It is not a substitute for user research or product strategy, and it only uses the bundled search.py and ui-reasoning.csv data.

Related Skills

Explore More Design & Creative Skills→
andersoncollabandersoncollab

aesthetic-direction

Generate 3–5 ranked visual aesthetic directions with typography and color guidance.

Community
Intermediate
dejanvasic85dejanvasic85
1

frontend-design

Generates Tailwind and CSS-based designs and layouts for a given text description, with multiple aesthetic options to choose from.

Community
Basic
avel123111avel123111

design-accessibility-review

Audit designs and pages for WCAG 2.1 AA accessibility compliance.

Community
Basic
reason-machinesreason-machines
4

better-design-shadcn-themes

Install themed shadcn/ui components from 31 design systems via the shadcn CLI.

Official
Intermediate