Ui Ux Pro Max

Name: Ui Ux Pro Max
Author: devton

ASecurity

Generate professional UI/UX design systems, palettes, typography, and responsive component guidance.

72 stars
0 votes
0 copies
3 views
Added September 5, 2026

designgoapifrontendbackend

Works with

Security analysis

A100/100

Scanned September 30, 2026

npx -y skills add devton/agentic-workflow-blueprint --skill ui-ux-pro-max --agent claude-code

Installs into .claude/skills of the current project.

Are you the author of Ui Ux Pro Max?

Add the live security badge to your README. It updates with every re-scan.

[![Security: A — Skills Directory](https://www.skillsdirectory.com/api/skills/devton-ui-ux-pro-max/badge)](https://www.skillsdirectory.com/skills/devton-ui-ux-pro-max)

More formats (shields.io, HTML) on the badges page. Keep it an A: scan every change in CI with Pro.

Download with Pro

SKILL.md

---
name: ui-ux-pro-max
description: Generate professional UI/UX design systems, palettes, typography, and responsive component guidance.
---

## agentic-workflows-blueprint.workflow.ui-ux-pro-max

### Goal

Produce a visual design system, color palette, typography hierarchy, and responsive interaction pattern for UI components.

### Scope

- **Applies to**: Web/Mobile interfaces, views, components, and pages.
- **Does not cover**: Pure backend services or API-only tasks.

### Triggers

- "/ui-ux-pro-max"
- "Generate UI design system"
- "Design frontend component"

### Inputs

- `productType`: Domain or product category.
- `techStack`: CSS framework (e.g. Tailwind CSS, CSS Modules).

### Invariants

1. **Design Excellence**: Avoid generic default colors or plain browser defaults.
2. **Responsive Breakpoints**: Use mobile-first responsive design (`min-*` inverted breakpoints).
3. **Accessibility**: Ensure high contrast, focus states, and keyboard navigation.

### Procedure

1. Analyze feature context and target users.
2. Define HSL color palette (Primary, Secondary, Accent, Background, Surface, Muted).
3. Establish font pairings and typographic scale.
4. Specify micro-animations, hover states, and dynamic visual cues.
5. Output design block to `walkthrough.md`.

### Outputs

- UX Design Specification Block in `walkthrough.md`.

### Review gate

- Palette, typography, and responsive rules defined.
- Mobile-first breakpoints verified.

### References

- `../../SKILL.md`
- `../radioactive/SKILL.md`