ui-ux-pro-max

Generate UI and UX design systems with BM25 searches over local CSV datasets.

2|Updated Apr 11, 2026
One-click install
npx skills add https://github.com/PlazaCC/antes-da-tela --skill ui-ux-pro-max-plazacc
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ui-ux-pro-max
Source: https://github.com/PlazaCC/antes-da-tela/tree/main/.agents/skills/ui-ux-pro-max
Command: npx skills add https://github.com/PlazaCC/antes-da-tela --skill ui-ux-pro-max-plazacc

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

Provides a structured, searchable design intelligence layer that eliminates guesswork when choosing styles, color palettes, typography, interaction patterns, and accessibility rules for web and mobile products. It unifies product-level reasoning, stack-specific guidance, and implementation-ready tokens so teams can move from concept to consistent UI quickly and confidently.

Core Features & Use Cases

  • Searchable BM25-based style and guideline database for styles, colors, typography, charts, and UX checks.
  • Automated design system generator that aggregates product, style, color, landing, and typography recommendations and can persist a MASTER design system with page-level overrides.
  • Utility scripts for deriving color palettes and UI reasoning from product lists and for performing stack-specific guideline lookups; ideal for building landing pages, dashboards, component libraries, accessibility audits, and design reviews.
  • Use Case: Generate a persisted design-system MASTER and a dashboard page override for a SaaS analytics product to enforce accessible colors, consistent spacing tokens, and component specs across the engineering team.

Quick Start

Run the design system generator for your project by running the search script with the design-system option and providing a project name.

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

To generate an accessible UI design system, use the automated design system generator to aggregate product, color, and typography recommendations, then persist a MASTER design system with page-level overrides. It applies accessibility, touch, and performance rules across React, Next.js, and other stacks.

What is the best way to enforce consistent UI color palettes and typography across my engineering team?

The best way to enforce consistent UI color palettes and typography is to generate a persisted MASTER design system with page-level overrides. This provides implementation-ready tokens and component specs, eliminating guesswork when choosing styles for engineering teams.

Can I use this to perform an accessibility audit for mobile interfaces built with SwiftUI or React Native?

Yes, you can perform accessibility audits for mobile interfaces built with SwiftUI and React Native. The system enforces accessibility, touch, and performance decision rules across mobile and web stacks to ensure compliant UI components.

How do accessible color palettes and UX checks get derived from a product list?

Accessible color palettes and UX checks are derived by running utility scripts and Python scripts that perform BM25-powered searches over local CSV datasets. This process generates color rows and UI reasoning entries tailored to your specific product list.

Does the design system generator work with Tailwind and shadcn/ui component libraries?

Yes, the design system generator works with Tailwind and shadcn/ui component libraries. It provides stack-specific guidance and implementation-ready tokens for building dashboards, landing pages, and component libraries across these frameworks.

Why use a searchable database for UX guidelines instead of manually choosing styles?

Using a searchable BM25-based database for UX guidelines eliminates guesswork by providing structured design intelligence for styles, colors, typography, and charts. It unifies product-level reasoning and stack-specific guidance so teams move from concept to consistent UI quickly.