# Improve UI and UX Design Workflows

Interface work often needs consistent style, accessibility, and stack-specific guidance. This skill gives Claude, Codex, and Claude Code a searchable UI/UX reference for planning, building, and reviewing designs.

## Install

```bash
npx skillstore add nextlevelbuilder/ui-ux-pro-max
```

## Metadata

- Status: approved
- Slug: nextlevelbuilder-ui-ux-pro-max
- Skillstore revision: r1
- Version status: missing
- Tree hash: 0bb2f399fee26c0bd647e02b339c050214dee91f6ad0a61c88f7b16d8a8b12b4
- Author: nextlevelbuilder
- GitHub username: nextlevelbuilder
- License: MIT
- Repository: https://github.com/nextlevelbuilder/ui-ux-pro-max-skill/tree/main/.claude/skills/ui-ux-pro-max/
- Ref: 3e4b6c31a74a3bd1a291c98cf585d720cb9fbc88
- Supported tools: Claude, Codex, Claude Code
- Audit status: complete
- Agent install advisory: allowed
- Manual install advisory: allowed
- Artifact signature: available
- Audit attestation: unavailable
- Human verification: not\_verified
- Risk factors: network, scripts, filesystem, env\_access, external\_commands
- Quality score: 76
- Public page: https://skillstore.pages.dev/skills/nextlevelbuilder-ui-ux-pro-max
- Manifest: https://skillstore.pages.dev/api/skills/nextlevelbuilder-ui-ux-pro-max/manifest

## Capabilities

- Searches curated CSV guidance for UI styles, color palettes, typography, charts, landing pages, products, and UX issues.
- Provides stack-specific guidance for HTML with Tailwind, React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Nuxt, and Nuxt UI.
- Suggests visual direction based on product type, industry, style keywords, and page goals.
- Highlights common UI quality issues such as contrast, hover states, spacing, responsive layout, and accessibility gaps.
- Supplies implementation-oriented recommendations that can guide code generation or review.

## Use Cases

- Plan a Landing Page Direction: Choose style, colors, typography, sections, and CTA strategy before building a landing page.
- Review Frontend Polish: Check a UI for spacing, contrast, hover feedback, responsive behavior, icons, and accessibility issues.
- Guide Multi-Stack UI Implementation: Get framework-specific recommendations for React, Next.js, Vue, Svelte, mobile stacks, and Tailwind layouts.

## Prompt Templates

### Pick a Design Direction

```
Use ui-ux-pro-max to recommend a visual direction for a [product type] landing page in the [industry] industry. Include style, colors, typography, and section structure.
```

### Improve an Existing Screen

```
Use ui-ux-pro-max to review this [screen or component]. Focus on spacing, contrast, hover states, responsive behavior, accessibility, and visual hierarchy.
```

### Generate Stack-Specific Guidance

```
Use ui-ux-pro-max stack guidance for [React or Next.js or Vue]. Recommend patterns for layout, state, performance, accessibility, and component polish before implementation.
```

### Create a Full UI Build Plan

```
Use ui-ux-pro-max across product, style, typography, color, landing, chart, UX, and stack domains. Synthesize a complete build plan for [project], then identify risks and review checkpoints.
```

## Limitations

- It depends on local CSV data and does not fetch live design trends or official documentation.
- It can suggest UI direction, but it cannot visually verify rendered output by itself.
- It may need several searches to cover style, color, typography, layout, and stack guidance.
- Some recommendations are general best practices and still need product-specific judgment.

## Best Practices

- Search multiple domains before implementation so style, color, typography, UX, and stack guidance align.
- Ask for the target product, audience, stack, brand tone, and key conversion goal before designing.
- Verify the rendered UI manually for contrast, responsiveness, focus states, and layout stability.

## Anti Patterns

- Do not treat the CSV results as a complete design system without adapting them to the product context.
- Do not skip accessibility checks after visual design recommendations.
- Do not run package-manager installation commands automatically without explicit user confirmation.

## Security Audit

- Audited at: 2026-07-09T04:26:59.533\+00:00
- Summary: Most static findings are false positives caused by Markdown formatting and CSV reference data for UI/UX guidance. The real security concern is that SKILL.md includes package-manager installation commands, including sudo apt and Windows winget examples, which can modify the user system and require confirmation. Static review was capped at 400/515 representative findings; omitted static matches are unconfirmed, so automatic publishing stays disabled until manual review.

## Stats

- Views: 377
- Downloads: 137
- Favorites: 2
- Popularity score: 0