---
name: ui-ux-pro-max-bricks
version: 2.5.0
description: AI-powered design intelligence with 67 UI styles, 161 color palettes, 57 font pairings, 99 UX guidelines, and 25 chart types specifically adapted for bricks-framework JSON-based development using pure JavaScript and CSS.
author: NextLevelBuilder + Hermes Agent
license: MIT
homepage: https://uupm.cc
repository: https://github.com/nextlevelbuilder/ui-ux-pro-max-skill
keywords:
  - ui
  - ux
  - design
  - design-system
  - color-palette
  - typography
  - accessibility
  - ai-skill
  - bricks-framework
  - json-ui
  - pure-javascript
  - css-styling
platforms:
  - hermes
---

# UI/UX Pro Max for Bricks Framework

## Overview

This skill provides AI-powered design intelligence specifically adapted for the **bricks-framework** JSON-based frontend development system. It includes comprehensive databases of UI styles, color palettes, font pairings, UX guidelines, and chart types optimized for bricks component structure and JSON configuration patterns.

The skill integrates seamlessly with bricks-framework's .ui file format, providing design recommendations that can be directly implemented using pure JavaScript and CSS within the bricks JSON component system. All styling is applied through the `options.style` property using standard CSS properties and camelCase variants (e.g., `maxWidth`, `backgroundColor`).

## Prerequisites

Check if Python is installed:

```bash
python3 --version || python --version
```

If Python is not installed, install it based on user's OS:

**macOS:**
```bash
brew install python3
```

**Ubuntu/Debian:**
```bash
sudo apt update && sudo apt install python3
```

**Windows:**
```powershell
winget install Python.Python.3.12
```

---

## How to Use This Skill

Use this skill when the user requests any of the following:

| Scenario | Trigger Examples | Start From |
|----------|-----------------|------------|
| **New project / page** | "做一个 landing page"、"Build a dashboard" | Step 1 → Step 2 (design system) |
| **New component** | "Create a pricing card"、"Add a modal" | Step 3 (domain search: style, ux) |
| **Choose style / color / font** | "What style fits a fintech app?"、"推荐配色" | Step 2 (design system) |
| **Review existing UI** | "Review this page for UX issues"、"检查无障碍" | Quick Reference checklist above |
| **Fix a UI bug** | "Button hover is broken"、"Layout shifts on load" | Quick Reference → relevant section |
| **Improve / optimize** | "Make this faster"、"Improve mobile experience" | Step 3 (domain search: ux, bricks) |
| **Implement dark mode** | "Add dark mode support" | Step 3 (domain: style "dark mode") |
| **Add charts / data viz** | "Add an analytics dashboard chart" | Step 3 (domain: chart) |
| **Bricks best practices** | "bricks performance tips"、"JSON UI optimization" | Step 4 (stack search: bricks) |

Follow this workflow:

### Step 1: Analyze User Requirements

Extract key information from user request:
- **Product type**: Entertainment (social, video, music, gaming), Tool (scanner, editor, converter), Productivity (task manager, notes, calendar), or hybrid
- **Target audience**: C-end consumer users; consider age group, usage context (commute, leisure, work)
- **Style keywords**: playful, vibrant, minimal, dark mode, content-first, immersive, etc.
- **Stack**: bricks-framework (pure JavaScript and CSS, JSON-based UI)

### Step 2: Generate Design System (REQUIRED)

**Always start with `--design-system`** to get comprehensive recommendations with reasoning:

```bash
python3 skills/ui-ux-pro-max-bricks/scripts/search.py "<product_type> <industry> <keywords>" --design-system [-p "Project Name"]
```

This command:
1. Searches domains in parallel (product, style, color, landing, typography)
2. Applies reasoning rules from `ui-reasoning.csv` to select best matches
3. Returns complete design system: pattern, style, colors, typography, effects
4. Includes anti-patterns to avoid

**Example:**
```bash
python3 skills/ui-ux-pro-max-bricks/scripts/search.py "beauty spa wellness service" --design-system -p "Serenity Spa"
```

### Step 2b: Persist Design System (Master + Overrides Pattern)

To save the design system for **hierarchical retrieval across sessions**, add `--persist`:

```bash
python3 skills/ui-ux-pro-max-bricks/scripts/search.py "<query>" --design-system --persist -p "Project Name"
```

This creates:
- `design-system/MASTER.md` — Global Source of Truth with all design rules
- `design-system/pages/` — Folder for page-specific overrides

**With page-specific override:**
```bash
python3 skills/ui-ux-pro-max-bricks/scripts/search.py "<query>" --design-system --persist -p "Project Name" --page "dashboard"
```

This also creates:
- `design-system/pages/dashboard.md` — Page-specific deviations from Master

**How hierarchical retrieval works:**
1. When building a specific page (e.g., "Checkout"), first check `design-system/pages/checkout.md`
2. If the page file exists, its rules **override** the Master file
3. If not, use `design-system/MASTER.md` exclusively

### Step 3: Domain Search (When You Already Know the Domain)

If you already know which domain to search, use direct domain search:

```bash
python3 skills/ui-ux-pro-max-bricks/scripts/search.py "<query>" --domain <domain> [-n <max_results>]
```

**Domain search:**
- `product` - Product type recommendations (SaaS, e-commerce, portfolio)
- `style` - UI styles (glassmorphism, minimalism, brutalism) + AI prompts and CSS keywords
- `typography` - Font pairings with Google Fonts imports
- `color` - Color palettes by product type
- `landing` - Page structure and CTA strategies
- `chart` - Chart types and library recommendations
- `ux` - Best practices and anti-patterns

### Step 4: Stack-Specific Search (Bricks Framework)

For bricks-framework specific guidance, use stack search:

```bash
python3 skills/ui-ux-pro-max-bricks/scripts/search.py "<query>" --stack bricks
```

**Available stacks:** `bricks` (this skill's primary stack)

This returns bricks-specific:
- Component recommendations (Form, VBox, HBox, DataGrid, Tree, etc.)
- JSON structure patterns for .ui files with proper CSS styling
- Event binding best practices (urlwidget, method, script, registerfunction, event)
- Layout container strategies (VBox/HBox/Filler/ResponsableBox)
- Form field type mappings (uitype: str, email, date, int, float, check, etc.)
- Pure JavaScript and CSS implementation patterns

### Step 5: Implementation with Bricks Components

Apply design recommendations using bricks-framework components with pure JavaScript and CSS:

**Basic Components** (atomic, no children):
- Button, Text, Image, Form fields (via uitype), etc.

**Container Components** (can hold children):
- VBox (vertical layout), HBox (horizontal layout)
- Filler (takes remaining space), Modal, Tab, Accordion

**Specialized Components**:
- DataGrid (for data tables), Tree (hierarchical data)
- Charts (Bar, Line, Pie), VideoPlayer, AudioPlayer
- MarkdownViewer, PDFviewer, DOCXviewer, EXCELviewer

**Component Structure (.ui file):**
```json
{
  "id": "optional_unique_id",
  "widgettype": "required_component_type", 
  "options": { /* initialization parameters with CSS styling */ },
  "subwidgets": [ /* child components - containers only */ ],
  "binds": [ /* event handlers using pure JavaScript */ ]
}
```

**CSS Styling in options.style:**
All CSS properties are supported using camelCase notation:
- `maxWidth`, `minHeight`, `backgroundColor`, `borderRadius`
- `fontSize`, `fontWeight`, `fontFamily`, `lineHeight`
- `padding`, `margin`, `display`, `flexDirection`
- Standard CSS units: px, %, em, rem, vh, vw

**Event Handling Patterns (Pure JavaScript):**
- `urlwidget`: Load components dynamically from URLs
- `method`: Call methods on target widgets
- `script`: Execute pure JavaScript code with access to `this` and `params`
- `registerfunction`: Call pre-registered functions  
- `event`: Dispatch custom events

### Step 6: Template Integration

Integrate with Jinja2 templating in .ui files:
- Use `{{entire_url('component.ui')}}` for dynamic component loading
- Access parameters with `{{params_kw.get('param') or 'default'}}`
- Implement dynamic data retrieval via datawidget/datamethod/datascript

## Bricks-Specific Design Guidelines

### Layout Best Practices
- Use **VBox/HBox** for primary layout structure with pure CSS flexbox
- Leverage **Filler** components for flexible spacing using CSS flex-grow
- Implement **ResponsableBox** for responsive layouts with CSS media queries
- Use **Tab/IconBarPage** for navigation between sections

### Form Design Patterns
Map form field types to bricks uitype values:
- `'str'` → UiStr (text input)
- `'email'` → UiEmail  
- `'date'` → UiDate
- `'int'` → UiInt
- `'float'` → UiFloat
- `'check'` → UiCheck
- `'checkbox'` → UiCheckBox
- `'file'` → UiFile
- `'image'` → UiImage
- `'code'` → UiCode
- `'text'` → UiText
- `'password'` → UiPassword

### CSS Styling Integration
Apply design system recommendations directly through `options.style`:

**Color Palette Application:**
```json
{
  "widgettype": "Button",
  "options": {
    "text": "Primary Action",
    "style": {
      "backgroundColor": "#3498db",
      "color": "#ffffff",
      "border": "none",
      "borderRadius": "6px",
      "padding": "12px 24px",
      "fontSize": "16px",
      "fontWeight": "600",
      "cursor": "pointer",
      "maxWidth": "300px"
    }
  }
}
```

**Typography Application:**
```json
{
  "widgettype": "Text",
  "options": {
    "text": "Dashboard Title",
    "style": {
      "fontFamily": "'Inter', sans-serif",
      "fontSize": "32px", 
      "fontWeight": "700",
      "color": "#2c3e50",
      "maxWidth": "800px"
    }
  }
}
```

### Component Selection Guide
Based on design requirements, choose appropriate bricks components:

**Data Display:**
- Simple lists: DataGrid
- Hierarchical data: Tree  
- Analytics: Bar/Line/Pie charts
- Media: VideoPlayer/AudioPlayer/Image

**User Interaction:**
- Forms: Form component with appropriate uitype fields
- Navigation: Tab, IconBarPage, Menu
- Modals: Modal component
- Real-time: WebSocket, RTC components

**Layout Containers:**
- Vertical stacking: VBox
- Horizontal arrangement: HBox  
- Flexible spacing: Filler
- Responsive: ResponsableBox
- Accordion sections: Accordion/DynamicAccordion

## Verification Checklist

Before delivering final implementation:

- [ ] Design system generated and persisted (if multi-session project)
- [ ] Component selection matches design requirements
- [ ] Layout uses appropriate container components (VBox/HBox/Filler)
- [ ] Form fields use correct uitype mappings
- [ ] CSS styling applied through `options.style` with camelCase properties
- [ ] Event bindings follow bricks patterns (urlwidget/method/script)
- [ ] Jinja2 templating properly implemented for dynamic content
- [ ] Responsive design considerations addressed with maxWidth/minWidth
- [ ] Accessibility guidelines followed from UX database
- [ ] Performance optimized (lazy loading, efficient data structures)

## Quick Reference

### Common Bricks Component Types
- **Layout**: VBox, HBox, Filler, ResponsableBox, Splitter
- **Forms**: Form, Miniform, Conform, Input, various uitype fields  
- **Data**: DataGrid, Tree, DynamicColumn, DataViewers (PDF/DOCX/EXCEL)
- **Media**: Image, VideoPlayer, AudioPlayer, Camera, Recorder
- **Navigation**: Tab, IconBarPage, Menu, Accordion, Modal, Popup
- **Charts**: Bar, Line, Pie, MultipleStateImage
- **Real-time**: WebSocket, RTC, Period, Keypress, WebSpeech
- **Utility**: Message, ProgressBar, Countdown, Running, LLM components

### CSS Styling Properties (camelCase)
- **Layout**: `width`, `height`, `maxWidth`, `minHeight`, `display`, `flexDirection`
- **Spacing**: `padding`, `margin`, `paddingTop`, `marginLeft`
- **Colors**: `backgroundColor`, `color`, `borderColor`
- **Typography**: `fontSize`, `fontWeight`, `fontFamily`, `lineHeight`, `textAlign`
- **Borders & Radius**: `border`, `borderRadius`, `borderWidth`, `borderStyle`
- **Effects**: `boxShadow`, `opacity`, `transform`, `transition`

### Event Binding Action Types
1. **urlwidget**: Load components from URLs into targets
2. **method**: Call widget methods (set_text, show, hide, etc.)
3. **script**: Execute pure JavaScript with access to this/params
4. **registerfunction**: Call pre-registered global functions  
5. **event**: Dispatch custom events to other components

### Special Widget IDs
- `"self"`: Current widget containing binds
- `"root"`: First widget under `<body>`
- `"body/app"`: bricks.app instance
- `"-x"`: Ancestor with ID "x"
- `"@WidgetType"`: Descendant with widget type "WidgetType"  
- `"-@WidgetType"`: Ancestor with widget type "WidgetType"

## Integration with Module Development Workflow

This skill integrates with the standard module development specification:

1. **Directory Structure**: Place .ui files in `wwwroot/` directory
2. **CRUD Integration**: Use design recommendations in CRUD browserfields/alters
3. **Frontend Development**: All UI must use bricks-framework components with pure JavaScript and CSS
4. **Skill Documentation**: Create `skill/` directory with SKILL.md after completion

When developing modules that require UI/UX design decisions, always consult this skill before implementing bricks components.