skills.rest
octanutri-clin
octanutri-clinCOMMUNITY
Explore all skills by this author →
GitHub

ui-ux-pro-max

Generates UI/UX design recommendations from a searchable local database of styles, palettes, and guidelines.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Choosing consistent styles, color palettes, typography, and UX patterns for a new page or app is slow and error-prone, and design decisions often lack accessibility or platform-specific grounding. ## Core Features & Use Cases - Design System Generation: Run a single query to get a full recommendation covering layout pattern, style, color tokens, font pairings, effects, and anti-patterns, with optional persistence as a MASTER.md plus per-page overrides. - Domain Search: Query 12 domains (style, color, typography, charts, UX guidelines, icons, GSAP motion, landing patterns, and more) via a BM25 search engine over local CSV data. - Stack-Specific Guidelines: Retrieve implementation rules for 22 stacks including React, Next.js, Vue, SwiftUI, Flutter, Tailwind, and shadcn/ui. - Use Case: When building a SaaS dashboard in Next.js, generate a design system with density and motion dials, then pull stack-specific performance and accessibility rules before delivery. ## Quick Start Ask the AI to generate a design system for your product type and stack, for example: design a modern minimal dashboard UI for my Next.js SaaS app.

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

Run the search script with the --design-system flag and a query describing your product type, industry, and tone. It searches product, style, color, landing, and typography domains in parallel and returns pattern, palette, fonts, effects, and anti-patterns.

What design data does the UI/UX search tool include?▼

The local database contains 84 styles, 192 color palettes, 74 font pairings, 192 product types, 98 UX guidelines, 104 icon entries, 16 GSAP motion presets, and 25 chart types, all stored as CSV files searched with BM25 ranking.

Does it support frameworks like Next.js, Flutter, or SwiftUI?▼

Yes, it provides stack-specific guidelines for 22 stacks including React, Next.js, Vue, Svelte, Angular, SwiftUI, React Native, Flutter, Jetpack Compose, Tailwind, and shadcn/ui. Pass the detected stack with the --stack flag.

Can I save the generated design system for later sessions?▼

Yes, add --persist with --output-dir pointed at your project root. It creates a design-system folder with a MASTER.md as the global source of truth plus optional per-page override files that take precedence when present.

What happens when a search returns zero results?▼

The tool suggests nearby vocabulary terms so you can retry with broader keywords. If still empty, fall back to the built-in priority rule table and state explicitly that the recommendation came from defaults, not a database match.

Does the search script require external Python packages?▼

No, it requires only Python 3 with the standard library. The BM25 search engine, CSV loading, and design system generator are implemented without third-party dependencies.

Related Skills

Explore More Design & Creative Skills→
ForgePlanForgePlan
3

project-agent-scaffold

Detect a project's technology stack and generate Claude Code agent proposals.

Official
Intermediate
MARUCIEMARUCIE
1

frontend-design

Generates production-grade frontend UI code with deliberate typography, color, and layout choices.

Community
Intermediate
meisijiyameisijiya

ui-ux-pro-max

Select UI styles, color palettes, font pairings, UX rules, and chart types for product interfaces.

Community
Advanced
lintendolintendo
152

implement-design

Translate Figma designs into UI code with design tokens.

Community
Advanced