SkillsAdd

jgamaraalv/delivery-loop · Archived

ui-ux-pro-max

UI/UX design intelligence — pick styles, color palettes, font pairings, layout & UX patterns across 10 stacks. Use when designing, building, reviewing, or restyling a web/mobile interface.

First seen Jul 4, 2026

Installation

$ npx skills add jgamaraalv/delivery-loop --skill ui-ux-pro-max
View on skills.sh ↗ GitHub repository ↗

Stronger alternatives

This repository is archived — consider an actively maintained alternative.

hunt-race-condition Same source · more installs
jgamaraalv/delivery-loop

Hunting playbook for race-condition / TOCTOU vulnerabilities — concurrent-request abuse, HTTP/2…

3 installs
canvas-design Same source · more installs
jgamaraalv/delivery-loop

Create beautiful visual art in .png and .pdf documents using design philosophy. Use when the us…

3 installs
css-architecture Same source
jgamaraalv/delivery-loop

Organize CSS using BEM, SMACSS, and CSS-in-JS patterns. Use when building scalable, maintainabl…

2 installs
vercel-react-view-transitions Same source
jgamaraalv/delivery-loop

Animate React route/page changes, shared elements, and enter/exit/reorder with the View Transit…

2 installs

Similar popular skills

Related neighbors and high-traction skills in the same topics — useful to compare before installing.

vercel-react-native-skills Shared topics
vercel-labs/agent-skills 205.5K installs

Also in this package

Other skills from jgamaraalv/delivery-loop · top by installs.

npx skills add jgamaraalv/delivery-loop
hunt-race-condition 3 canvas-design 3 css-architecture 2 vercel-react-view-transitions 2 architecture-blueprint-generator 2 backend-to-frontend-handoff-docs 2 pro-state-machine 2 fullstack-delivery-loop 2 accessibility-a11y 2 frontend-fundamentals 2

Browse all from jgamaraalv/delivery-loop

More details

Agent compatibility

Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.

Claude Code Not declared
Cursor Not declared
Codex Not declared
GitHub Copilot Not declared
Windsurf Not declared
Gemini CLI Not declared
Cline Not declared
OpenCode Not declared

Repository health

Stars 3
License LICENSE
Default branch main
Open issues 0
Status Archived

Package contents

Files included with this skill beyond the listing page.

  • skill md SKILL.md 3,763 B
  • docs SUMMARY.md 211 B

History

  1. First seen on skills.sh
  2. First recorded snapshot · 2 installs

SKILL.md

UI/UX Pro Max - Design Intelligence

Comprehensive design guide for web and mobile applications. Contains 50+ styles, 161 color palettes, 57 font pairings, 161 product types with reasoning rules, 99 UX guidelines, and 25 chart types across 10 technology stacks. A searchable database (scripts/search.py over data/ CSVs) gives priority-based design recommendations.

This SKILL.md is the thin entry point. Bulky reference material lives under references/ and is read on demand — see References below.

Workflow at a High Level

The skill is data-driven: a Python CLI (scripts/search.py) queries CSV catalogs under data/ and returns priority-ranked design recommendations.

To design or build a page/component:

  1. Analyze requirements — extract product type, target audience, style keywords, and stack.
  2. Generate a design system (REQUIRED first step) — run search.py "<keywords>" --design-system to get a complete recommendation (pattern, style, colors, typography, effects + anti-patterns). Optionally --persist it as a Master + page-overrides set for cross-session reuse.
  3. Supplement with domain searches — deep-dive any dimension you're unsure about with --domain <domain>.
  4. Add stack guidelines — --stack react-native for implementation-specific best practices.
  5. Synthesize and implement, then run the pre-delivery checks.

To review or fix existing UI: start from the [Quick Reference](references/quick-reference.md) 10-category checklist; jump to the category that matches the problem.

Full step-by-step procedure, examples, output formats, and tips: [references/workflow.md](references/workflow.md).

How to Search the Data

# Full design-system recommendation (always start here when designing)
python3 skills/ui-ux-pro-max/scripts/search.py "<product> <industry> <keywords>" --design-system [-p "Project"]

# Deep-dive one dimension
python3 skills/ui-ux-pro-max/scripts/search.py "<keyword>" --domain <domain> [-n <max_results>]

# Stack-specific implementation guidance
python3 skills/ui-ux-pro-max/scripts/search.py "<keyword>" --stack react-native

Domains: product, style, color, typography, landing, chart, ux, google-fonts, react, web, prompt. Requires Python 3 (python3 --version). See [references/workflow.md](references/workflow.md) for the full domain/stack tables, prerequisites, and persistence (--persist) details.

References

Each file is loaded on demand — read one only when the task needs that depth (progressive disclosure).

  • references/workflow.md — the full design-system generation workflow: prerequisites (Python), Steps 1–4 (analyze → --design-system → --domain searches → --stack), the --persist Master+overrides pattern, domain/stack tables, a worked example, output formats, and query tips · read when building or restyling a page/component.
  • references/quick-reference.md — the 10 rule categories by priority (Accessibility, Touch & Interaction, Performance, Style Selection, Layout & Responsive, Typography & Color, Animation, Forms & Feedback, Navigation Patterns, Charts & Data) with every rule key and its standard · read when reviewing or fixing UI, or as a final quality pass.
  • references/app-ui-standards.md — professional-polish rules for App UI (icons & visual elements, interaction, light/dark contrast, layout & spacing) plus the full pre-delivery checklist · read when delivering iOS / Android / React Native / Flutter UI.