🎨

ui-ux-pro-max

Name: ui-ux-pro-max
Author: sickn33

Risque faible

Build Professional UI/UX Designs with AI Guidance

Également disponible depuis: nextlevelbuilder,DCjanus,ZhanlinCui

Designers and developers struggle to maintain consistent, accessible design systems across projects. This skill provides comprehensive design guidelines, color palettes, typography recommendations, and component patterns across 9 major technology stacks.

Prend en charge: Claude Codex Code(CC)

🥉 72 Bronze

Télécharger le ZIP du skill

Importer dans Claude

Allez dans Paramètres → Capacités → Skills → Importer un skill

Activez et commencez à utiliser

Tester

Utilisation de "ui-ux-pro-max". Recommend a color palette for a healthcare app

Résultat attendu:

Healthcare App Color Palette: Primary (#0891B2 - Calm Cyan) establishes trust and calmness. Secondary (#22D3EE - Light Cyan) provides visual hierarchy. CTA (#059669 - Success Green) for primary actions. Background (#ECFEFF - Soft White) reduces eye strain. Text (#164E63 - Deep Teal) ensures readability. Border (#A5F3FC - Light Border) for subtle separation. This palette prioritizes calmness and trust, critical for healthcare applications where users may experience anxiety.

Utilisation de "ui-ux-pro-max". What are the touch target requirements for mobile buttons?

Résultat attendu:

Touch Target Guidelines: Minimum 44x44 pixels (iOS HIG and WCAG requirement). Recommended 48x48 pixels for frequently-used actions. Padding should be included in the measurement, not just the visible button. Spacing between touch targets: minimum 8px to prevent accidental taps. For critical actions (delete, purchase), consider 56x56px minimum.

Audit de sécurité

Risque faible

v1 • 2/25/2026

Static analysis flagged 1176 patterns but nearly all are false positives. 'Weak cryptographic algorithm' detections are hex color codes (#2563EB) in design data files. 'Hardcoded URLs' are documentation links in guidelines. 'System reconnaissance' and 'C2 keywords' are design terminology matches. Python scripts read CSV files to generate design recommendations - no network calls or code execution. One legitimate concern: scripts/design_system.py uses subprocess calls (Ruby/shell execution patterns) for design tooling integration, which is appropriate for this use case but documented as a minor risk.

Fichiers analysés

2,560

Lignes analysées

résultats

Total des audits

Problèmes à risque moyen (1)

scripts/design_system.py:9 scripts/design_system.py:423-425

External Command Execution in Design Scripts

scripts/design_system.py contains shell command execution patterns for design tooling integration. This is legitimate for a design system generator but represents a minor risk if the script were modified to accept untrusted input.

Problèmes à risque faible (3)

data/stacks/nuxt-ui.csv:2 data/stacks/nextjs.csv:2

Documentation URLs in Design Guidelines

CSV data files contain documentation URLs (e.g., https://ui.nuxt.com/docs/) as part of design guidelines. These are reference links, not network calls made by the skill.

data/colors.csv:2-30 data/products.csv:2-30

False Positive: Hex Color Codes Flagged as Crypto

Static analyzer flagged hex color codes (e.g., #2563EB, #3B82F6) as 'weak cryptographic algorithm'. These are design color values, not cryptographic operations.

data/ux-guidelines.csv:1-100

False Positive: Design Terminology Flagged as Suspicious

Terms like 'reconnaissance' (in UX research context), 'keylogger' (in security UI guidelines), and 'C2' (likely 'call-to-action' abbreviation) triggered keyword detectors but are legitimate design domain vocabulary.

Audité par: claude

Score de qualité

Architecture

100

Maintenabilité

Contenu

Communauté

Sécurité

Conformité aux spécifications

Ce que vous pouvez construire

Startup Building MVP Design System

A solo founder uses the skill to establish consistent UI patterns for their SaaS product, selecting appropriate color palettes, component styles, and accessibility guidelines for their React-based application.

Design Team Standardizing Components

A design team lead leverages the comprehensive guidelines to create a unified design system documentation, ensuring all team members follow consistent patterns across multiple product lines.

Developer Implementing Accessibility Requirements

A frontend developer references the accessibility guidelines to ensure their Vue application meets WCAG 2.1 requirements, including proper color contrast, focus management, and keyboard navigation patterns.

Essayez ces prompts

Basic Color Palette Selection

I'm building a [product type, e.g., SaaS dashboard]. Recommend a color palette with primary, secondary, CTA, background, text, and border colors. Include hex codes and explain the color psychology.

Component Implementation Guide

Show me best practices for implementing [component, e.g., data tables] in [framework, e.g., React]. Include accessibility requirements, common patterns, and code examples.

Accessibility Audit Request

Review my [page/component type] for accessibility issues. I have [describe your UI]. What WCAG guidelines should I check? Provide a prioritized checklist.

Complete Design System Generation

Generate a comprehensive design system for a [product type] targeting [audience]. Include: color palette, typography scale, component styles, spacing system, and UX guidelines specific to my domain.

Bonnes pratiques

Always verify color contrast ratios meet WCAG AA minimum (4.5:1 for normal text, 3:1 for large text) before finalizing designs
Maintain consistency across all pages - use the same style, color palette, and component patterns throughout your application
Design mobile-first: start with touch-friendly layouts (44px+ targets) and scale up for larger screens
Use semantic color names (primary, secondary, error) instead of hardcoded values to enable theming and dark mode support
Test designs with reduced motion preferences (prefers-reduced-motion) to ensure accessibility for users with vestibular disorders

Éviter

Using emoji as icons in production interfaces - they render inconsistently across platforms and lack professional appearance
Implementing hover-only interactions without tap/click alternatives - excludes touch device users and accessibility scenarios
Skipping loading states and skeleton screens - creates perceived performance issues and user uncertainty during async operations
Hardcoding colors inline instead of using design tokens or CSS variables - prevents theming and creates maintenance burden
Using animation for decorative purposes without respecting prefers-reduced-motion - can cause discomfort or nausea for some users

Foire aux questions

Does this skill work with Claude, Codex, and Claude Code?

Yes. This skill is compatible with all three AI assistants. Each can access the design guidelines and provide recommendations based on your specific project needs.

Can I use these guidelines for commercial projects?

Yes. The skill is licensed under MIT, which permits commercial use. The guidelines reference industry-standard best practices from established design systems.

How do I adapt these guidelines to my existing brand colors?

Use the color psychology and contrast recommendations while substituting your brand's primary colors. The guidelines provide ratios and relationships that work with any base color.

Are these accessibility guidelines WCAG compliant?

Yes. The guidelines reference WCAG 2.1 AA standards for color contrast, touch targets, focus states, and keyboard navigation. Always verify with automated testing tools for production.

Which technology stack should I choose for my project?

The skill provides guidelines for 9 stacks. React/Next.js for web apps, React Native/SwiftUI/Flutter for mobile, Vue/Svelte for lightweight web, Tailwind for utility-first CSS, and shadcn/ui for Radix-based components. Consider your team's expertise and project requirements.

How often are the design guidelines updated?

Design best practices evolve over time. The skill contains established patterns from major design systems (Material Design, Human Interface Guidelines, Carbon, etc.) that remain relevant across framework versions.