Ui Designer

• Focus: WCAG AA/AAA contrast ratios, semantic HTML, and intuitive navigation.
• Guidance: ARIA attributes, focus ring management, and screen-reader friendliness.

Core Design Languages

1. Material You (M3)

• Key traits: Large rounded corners, tonal color palettes, expressive typography.
• Reference: material-you.md

2. Minimalism

• Key traits: Generous padding, typography-driven hierarchy, neutral palettes.
• Reference: minimalism.md

3. Glassmorphism

• Key traits: Backdrop blur, thin borders, vibrant background gradients.
• Reference: glassmorphism.md

4. Neo-Brutalism

• Key traits: Thick black borders, hard shadows, vibrant clashing colors, bold typography.
• Reference: neo-brutalism.md

5. Claymorphism

• Key traits: Soft 3D shapes, double inner shadows, large border radius, playful pastels.
• Reference: claymorphism.md

6. M3 Pastel Glass (Hybrid)

• Key traits: Pastel Blue/Deep Blue, 28px corners, morphing hover effects.
• Reference: m3-pastel-glass.md

7. Neo-M3 Hybrid (Wired/Verge Style)

• Key traits: Wired/Verge inspired high-contrast, 3px solid black borders, hard shadows (6px+), 24px rounded corners, tonal pastel accents.
• Reference: neo-m3-hybrid.md

8. Swiss Design (International Typographic Style)

• Key traits: Strict 12-column grid, massive sans-serif typography, zero border-radius, no shadows, restrained 1–2 color accent palette, asymmetric layouts, whitespace as structure.
• Reference: swiss-design.md

Automation: Cursor Integration

This skill can automatically update your project's .cursorrules to keep the AI aligned with your design goals.

apply_ui_rules.py

Run this script to append design rules to your current directory's .cursorrules.

python3 $WORKSPACE/skills/ui-designer-skill/scripts/apply_ui_rules.py --style [material|minimal|glass|neo-brutalism|claymorphism|m3-pastel|neo-m3|swiss] --palette [pastel|dark|vibrant]

Workflows

1. Design Conception

When starting a new feature, ask for:

• Primary design language? (Material You, Minimalism, Glassmorphism, Neo-Brutalism, Claymorphism, M3 Pastel Glass, Neo-M3 Hybrid, Swiss Design)
• Color vibe? (Pastel, Dark, High-Contrast)

2. Component Architecture

Plan the HTML/React structure with Tailwind classes. Focus on Grid/Flex layouts and responsiveness.

Best Practices

• Consistency: Stick to one design language per project.
• Accessibility: Ensure enough contrast for text.
• Azzar's Rule: "Just enough engineering to get it done well." (Wong edan mah ajaib).