skills.rest
djkloop
djkloopCOMMUNITY
Explore all skills by this author →
GitHub

ui-ux-pro-max

Generate UI/UX design systems with style, color, typography, and accessibility guidance.

Updated Apr 17, 2026
Search Tags:#typography#accessibility#tailwind#ui-ux#design-system#bm25
One-click install
npx skills add https://github.com/djkloop/n --skill ui-ux-pro-max-djkloop
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux-pro-max
Source: https://github.com/djkloop/n/tree/main/.claude/skills/ui-ux-pro-max
Command: npx skills add https://github.com/djkloop/n --skill ui-ux-pro-max-djkloop

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

Provides a repeatable, searchable workflow to design, implement, and review professional UI/UX systems so teams avoid ad-hoc styling, inconsistent components, and accessibility regressions across projects.

Core Features & Use Cases

  • Design system generation combining style, color, typography, layout, and accessibility recommendations.
  • Domain searches (style, color, typography, ux, landing, chart, product) with BM25 ranking and stack-specific guidance for implementation.
  • Persistence of a MASTER design system plus page-level overrides for hierarchical reuse and team handoff.
  • Use cases: create a landing page palette and typography, generate a dashboard design system for a SaaS product, or audit UI code for accessibility and performance issues.

Quick Start

Generate a persisted design system for a SaaS dashboard named Serenity Spa using the ui-ux-pro-max design-system workflow.

Frequently Asked Questions about ui-ux-pro-max

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate a UI/UX design system for a React or Tailwind project?▼

Generate a UI/UX design system by providing stack details to receive style, color, typography, layout, and accessibility recommendations tailored to React or Tailwind. The system produces persisted master and page-level design files for hierarchical reuse and team handoff.

What is the best way to ensure accessibility in a web design system?▼

Ensuring accessibility in a web design system involves built-in accessibility checks during generation. The workflow audits UI code, style choices, and typography pairings to prevent accessibility regressions and produce compliant components for your interfaces.

Can I use this workflow to create a design system for a SaaS dashboard?▼

Yes, you can create a design system for a SaaS dashboard. The workflow generates comprehensive guidelines including color palettes, typography pairings, and layout rules specific to dashboards, admin panels, and e-commerce sites across various frameworks.

How do I find stack-specific implementation guidance for typography and color choices?▼

Find stack-specific implementation guidance using built-in domain searches for typography, color, and style. A BM25 ranking mechanism searches CSV-backed data to deliver tailored implementation instructions for frameworks like Next.js, Vue, Svelte, and SwiftUI.

Does this design system workflow support mobile app frameworks like React Native and Flutter?▼

Yes, the design system workflow supports mobile app frameworks. It generates interface guidelines and component styling recommendations for React Native, Flutter, and SwiftUI, ensuring consistent UI/UX across both web and mobile platforms.

Why do I need page-level overrides in a design system?▼

Page-level overrides allow hierarchical reuse by customizing the master design system for specific pages. This prevents ad-hoc styling across projects, maintaining visual consistency while accommodating unique page requirements like landing pages or product views.

Related Skills

Explore More Design & Creative Skills→
QredenceQredence
108

system-init

Initialize agent memory by creating templates, config files, and recall scratchpad.

Official
Intermediate
marcosgcr3marcosgcr3

ui-ux-pro-max

Generate UI and UX design-system recommendations from curated CSV knowledge bases.

Community
Advanced
danielctcdanielctc

ui-ux-pro-max

Search UI/UX style guides using a BM25 index over CSV datasets.

Community
Intermediate
d-o-hubd-o-hub
11

rust-code-quality

Review Rust code quality across eight dimensions including async patterns and error handling.

Community
Advanced