Style Domain

Overview

The style domain provides comprehensive implementation details for 50+ UI styles, including CSS techniques, AI prompts, design system variables, and framework compatibility. Database: styles.csv (50+ styles)
Search columns: Style Category, Keywords, Best For, Type, AI Prompt Keywords
Output columns: 20+ fields including CSS keywords, implementation checklist, design system variables

When to Use

Implementing a specific UI style
Getting AI prompts for design generation
Finding CSS/Tailwind implementation details
Checking framework compatibility
Understanding accessibility implications

Search Examples

Example 1: Glassmorphism

python3 skills/ui-ux-pro-max/scripts/search.py "glassmorphism frosted glass" --domain style

Expected Output

{
  "Style Category": "Glassmorphism",
  "Type": "General",
  "Keywords": "Frosted glass, transparent, blurred background, layered, vibrant background",
  "Primary Colors": "Translucent white: rgba(255,255,255,0.1-0.3)",
  "Effects & Animation": "Backdrop blur (10-20px), subtle border, light reflection, Z-depth",
  "Best For": "Modern SaaS, financial dashboards, high-end corporate, modal overlays",
  "Performance": "⚠ Good",
  "Accessibility": "⚠ Ensure 4.5:1",
  "Framework Compatibility": "Tailwind 9/10, MUI 8/10, Chakra 8/10",
  "Complexity": "Medium",
  "AI Prompt Keywords": "Design a glassmorphic interface with frosted glass effect. Use backdrop blur (10-20px), translucent overlays (rgba 10-30% opacity), vibrant background colors, subtle borders...",
  "CSS/Technical Keywords": "backdrop-filter: blur(15px), background: rgba(255, 255, 255, 0.15), border: 1px solid rgba(255,255,255,0.2)",
  "Implementation Checklist": "☐ Backdrop-filter blur 10-20px, ☐ Translucent white 15-30% opacity, ☐ Subtle border 1px light, ☐ Vibrant background verified, ☐ Text contrast 4.5:1 checked",
  "Design System Variables": "--blur-amount: 15px, --glass-opacity: 0.15, --border-color: rgba(255,255,255,0.2)"
}

Example 2: Minimalism

python3 skills/ui-ux-pro-max/scripts/search.py "minimalism clean simple white space" --domain style

Expected Output

{
  "Style Category": "Minimalism & Swiss Style",
  "Type": "General",
  "Keywords": "Clean, simple, spacious, functional, white space, high contrast, geometric",
  "Primary Colors": "Monochromatic, Black #000000, White #FFFFFF",
  "Effects & Animation": "Subtle hover (200-250ms), smooth transitions, sharp shadows if any",
  "Best For": "Enterprise apps, dashboards, documentation sites, SaaS platforms",
  "Performance": "⚡ Excellent",
  "Accessibility": "✓ WCAG AAA",
  "Framework Compatibility": "Tailwind 10/10, Bootstrap 9/10, MUI 9/10",
  "Complexity": "Low",
  "AI Prompt Keywords": "Design a minimalist landing page. Use: white space, geometric layouts, sans-serif fonts, high contrast, grid-based structure, essential elements only. Avoid shadows and gradients.",
  "CSS/Technical Keywords": "display: grid, gap: 2rem, font-family: sans-serif, color: #000 or #FFF, max-width: 1200px, clean borders, no box-shadow unless necessary",
  "Implementation Checklist": "☐ Grid-based layout 12-16 columns, ☐ Typography hierarchy clear, ☐ No unnecessary decorations, ☐ WCAG AAA contrast verified, ☐ Mobile responsive grid",
  "Design System Variables": "--spacing: 2rem, --border-radius: 0px, --font-weight: 400-700, --shadow: none, --accent-color: single primary only"
}

Example 3: Dark Mode OLED

python3 skills/ui-ux-pro-max/scripts/search.py "dark mode oled night theme" --domain style

Expected Output

{
  "Style Category": "Dark Mode (OLED)",
  "Type": "General",
  "Keywords": "Dark theme, low light, high contrast, deep black, midnight blue, OLED",
  "Primary Colors": "Deep Black #000000, Dark Grey #121212, Midnight Blue #0A0E27",
  "Secondary Colors": "Neon Green #39FF14, Electric Blue #0080FF, Gold #FFD700",
  "Effects & Animation": "Minimal glow (text-shadow: 0 0 10px), dark-to-light transitions",
  "Best For": "Night-mode apps, coding platforms, entertainment, OLED devices",
  "Performance": "⚡ Excellent",
  "Accessibility": "✓ WCAG AAA",
  "Framework Compatibility": "Tailwind 10/10, MUI 10/10, Chakra 10/10",
  "Complexity": "Low",
  "AI Prompt Keywords": "Create an OLED-optimized dark interface with deep black (#000000), dark grey (#121212), midnight blue accents. Use minimal glow effects, vibrant neon accents, high contrast text.",
  "CSS/Technical Keywords": "background: #000000 or #121212, color: #FFFFFF or #E0E0E0, text-shadow: 0 0 10px neon-color (sparingly), color-scheme: dark",
  "Implementation Checklist": "☐ Deep black #000000 or #121212, ☐ Vibrant neon accents used, ☐ Text contrast 7:1+, ☐ Minimal glow effects, ☐ OLED power optimization, ☐ No white background",
  "Design System Variables": "--bg-black: #000000, --bg-dark-grey: #121212, --text-primary: #FFFFFF, --accent-neon: neon colors, --oled-optimized: true"
}

CSV Structure

The styles database includes 20+ columns:

Column	Description	Example
`Style Category`	Style name	”Glassmorphism”
`Type`	Category	”General”
`Keywords`	Search terms	”frosted glass, transparent, blurred”
`Primary Colors`	Main color palette	”rgba(255,255,255,0.1-0.3)“
`Secondary Colors`	Accent colors	”Electric Blue #0080FF, Neon Purple”
`Effects & Animation`	Visual effects	”Backdrop blur (10-20px), subtle border”
`Best For`	Use cases	”Modern SaaS, financial dashboards”
`Do Not Use For`	Avoid for	”Low-contrast backgrounds, critical a11y”
`Performance`	Performance impact	”⚡ Excellent” / ”⚠ Good” / ”❌ Poor”
`Accessibility`	A11y rating	”✓ WCAG AAA” / ”⚠ Ensure 4.5:1”
`Framework Compatibility`	Framework scores	”Tailwind 9/10, MUI 8/10”
`Complexity`	Implementation complexity	”Low” / “Medium” / “High”
`AI Prompt Keywords`	Full AI prompt text	”Design a glassmorphic interface…”
`CSS/Technical Keywords`	CSS implementation	”backdrop-filter: blur(15px)“
`Implementation Checklist`	Step-by-step checklist	”☐ Blur 10-20px, ☐ Opacity 15-30%“
`Design System Variables`	CSS variables	”—blur-amount: 15px”

Style Categories

All 50+ Styles

General Styles

Minimalism & Swiss Style
Neumorphism
Glassmorphism
Brutalism
3D & Hyperrealism
Vibrant & Block-based
Dark Mode (OLED)
Accessible & Ethical
Claymorphism
Flat Design

Modern Styles

Soft UI Evolution
Aurora UI
Liquid Glass
Gradient Mesh
Motion-Driven
Micro-interactions
Bento Grid
Card-based

Specialized Styles

Data-Dense
Heat Map & Heatmap
Executive Dashboard
Sales Intelligence Dashboard
Financial Dashboard
Real-Time Monitoring

AI Prompt Integration

Every style includes a complete AI prompt in the AI Prompt Keywords column:

python3 skills/ui-ux-pro-max/scripts/search.py "neumorphism" --domain style

Returns AI prompt:

“Create a neumorphic UI with soft 3D effects. Use light pastels, rounded corners (12-16px), subtle soft shadows (multiple layers), no hard lines, monochromatic color scheme with light/dark variations. Embossed/debossed effect on interactive elements.”

Implementation Workflow

Search for Style

python3 skills/ui-ux-pro-max/scripts/search.py "glassmorphism" --domain style

Copy AI Prompt

Use the AI Prompt Keywords field to generate initial design with Claude/GPT

Apply CSS Keywords

Implement using the CSS/Technical Keywords field

Follow Checklist

Verify implementation with Implementation Checklist

Configure Design System

Set up CSS variables from Design System Variables

Framework Compatibility

Each style includes compatibility scores (out of 10) for:

Tailwind CSS
Bootstrap
Material-UI (MUI)
Chakra UI
CSS-in-JS
Three.js / R3F (for 3D styles)

Example:

Glassmorphism: Tailwind 9/10, MUI 8/10, Chakra 8/10
Brutalism: Tailwind 10/10, Bootstrap 7/10
3D & Hyperrealism: Three.js 10/10, R3F 10/10

Performance & Accessibility

Every style includes ratings:

Rating	Performance	Accessibility
⚡ Excellent	Fast, minimal overhead	✓ WCAG AAA
⚡ Good	Moderate, optimized	✓ WCAG AA
⚠ Moderate	Some overhead	⚠ Requires attention
❌ Poor	High overhead	✗ Not accessible

Next Steps

Color Palettes

Match colors to your chosen style

Typography

Select fonts that complement the style

UX Guidelines

Ensure accessibility compliance

Product Matching

Find styles for your product type

CLI Reference

Search Domains

Design Resources

Contributing

Overview

When to Use

Search Examples

Example 1: Glassmorphism

Example 2: Minimalism

Example 3: Dark Mode OLED

CSV Structure

Style Categories

General Styles

Modern Styles

Specialized Styles

AI Prompt Integration

Implementation Workflow

Framework Compatibility

Performance & Accessibility

Next Steps

Color Palettes

Typography

UX Guidelines

Product Matching

Build docs developers (and LLMs) love

CLI Reference

Search Domains

Design Resources

Contributing

​Overview

​When to Use

​Search Examples

​Example 1: Glassmorphism

​Example 2: Minimalism

​Example 3: Dark Mode OLED

​CSV Structure

​Style Categories

​General Styles

​Modern Styles

​Specialized Styles

​AI Prompt Integration

​Implementation Workflow

​Framework Compatibility

​Performance & Accessibility

​Next Steps

Color Palettes

Typography

UX Guidelines

Product Matching

Build docs developers (and LLMs) love

Overview

When to Use

Search Examples

Example 1: Glassmorphism

Example 2: Minimalism

Example 3: Dark Mode OLED

CSV Structure

Style Categories

General Styles

Modern Styles

Specialized Styles

AI Prompt Integration

Implementation Workflow

Framework Compatibility

Performance & Accessibility

Next Steps