# Design Better Frontend Interfaces

UI and frontend work often requires fast choices about style, color, typography, layout, and framework patterns. This skill searches curated local design data and turns it into practical UI/UX implementation guidance.

## Install

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

## Metadata

- Status: approved
- Slug: dcjanus-ui-ux-pro-max
- Skillstore revision: r1
- Version status: missing
- Tree hash: 4bca01cb738d66a5c9de0301595338b66d53417d8e0a770003ddd75092e244d7
- Author: DCjanus
- GitHub username: DCjanus
- License: MIT
- Repository: https://github.com/DCjanus/prompts/tree/master/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: 75
- Public page: https://skillstore.pages.dev/skills/dcjanus-ui-ux-pro-max
- Manifest: https://skillstore.pages.dev/api/skills/dcjanus-ui-ux-pro-max/manifest

## Capabilities

- Searches local CSV data for UI styles, products, colors, typography, charts, and UX topics.
- Recommends visual direction for landing pages, dashboards, ecommerce, SaaS, portfolios, and mobile apps.
- Provides stack-specific frontend guidance for React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, and Tailwind.
- Returns good and bad implementation examples from curated framework guidance.
- Uses a local BM25 helper script to rank relevant design reference rows.
- Combines style, color, type, layout, accessibility, and implementation guidance into design decisions.

## Use Cases

- Plan a SaaS dashboard: Choose layout, chart types, typography, colors, and framework practices before building a data-heavy interface.
- Improve frontend implementation: Find stack-specific patterns and avoid common React, Next.js, Vue, Svelte, or mobile UI mistakes.
- Review a landing page: Compare the page against conversion structure, accessibility, spacing, contrast, and interaction guidance.

## Prompt Templates

### Choose a Visual Direction

```
Design a visual direction for a healthcare SaaS dashboard. Include style, palette, typography, layout, and accessibility priorities.
```

### Create a Landing Page Plan

```
Create a landing page plan for a premium skincare service. Use product, style, color, typography, landing, and UX guidance.
```

### Improve an Existing UI

```
Review this ecommerce product page for visual hierarchy, trust signals, responsive layout, form usability, and interaction states.
```

### Build a Stack-Specific System

```
Design and implement a Next.js analytics dashboard. Use chart, typography, color, UX, and Next.js stack guidance before coding.
```

## Limitations

- The reference data is local and curated, so it does not include live design trends or current framework releases.
- It does not inspect screenshots, rendered pages, or running applications by itself.
- It offers guidance and examples, but it does not replace user research or usability testing.
- Generated recommendations still need adaptation to each brand, content model, and product goal.

## Best Practices

- Search multiple domains before deciding on a design direction.
- Match recommendations to the product type, audience, brand tone, and technical stack.
- Validate final output against accessibility, responsive layout, and interaction state guidance.

## Anti Patterns

- Using one style keyword as the full design brief.
- Copying framework examples without adapting them to product requirements.
- Ignoring accessibility, loading states, keyboard focus, and mobile layout constraints.

## Security Audit

- Audited at: 2026-07-09T08:11:52.872\+00:00
- Summary: Reviewed as a local UI/UX reference and CSV search library. All static findings are false positives caused by Markdown formatting, documentation URLs, curated CSV examples, and non-executable frontend guidance; no prompt injection, data exfiltration intent, external command injection, or secret access was found.

## Stats

- Views: 249
- Downloads: 52
- Favorites: 2
- Popularity score: 0