From design-mastery
Explains historical design movements like Bauhaus, Art Deco, Memphis with visual markers, modern applications, and Tailwind CSS examples. Use for aesthetic choices, cultural context, trend prediction.
npx claudepluginhub hermeticormus/libreuiux-claude-code --plugin design-masteryThis skill uses the workspace's default tool permissions.
Every movement is a reaction. Understanding the chain of reactions helps you predict what comes next and choose directions intentionally.
Provides UI/UX resources: 50+ styles, color palettes, font pairings, guidelines, charts for web/mobile across React, Next.js, Vue, Svelte, Tailwind, React Native, Flutter. Aids planning, building, reviewing interfaces.
Fetches up-to-date documentation from Context7 for libraries and frameworks like React, Next.js, Prisma. Use for setup questions, API references, and code examples.
Analyzes competition with Porter's Five Forces, Blue Ocean Strategy, and positioning maps to identify differentiation opportunities and market positioning for startups and pitches.
Every movement is a reaction. Understanding the chain of reactions helps you predict what comes next and choose directions intentionally.
Arts & Crafts (1850s) ─→ Art Nouveau (1890s) ─→ Art Deco (1920s)
│
↓
Bauhaus (1919-33) ←────── Modernism
│
↓
Swiss International Style (1950s)
│
┌───────────────┼───────────────┐
↓ ↓ ↓
Corporate Psychedelic Postmodernism
Modernism (1960s) (1970s)
(1960s) │ │
│ ↓ ↓
│ Punk/New Wave Memphis Group
│ (1970s) (1980s)
│ │ │
└───────────────┴───────────────┘
│
↓
Grunge/Deconstructivism (1990s)
│
┌───────────────┼───────────────┐
↓ ↓ ↓
Web 2.0 Flat Design Contemporary
Skeuomorphism (2010s) Eclecticism
(2000s) │ (2020s)
│ │ ↑
└───────────────┴───────────────┘
Origin: England → Global Reaction To: Industrial Revolution's dehumanizing mass production Core Belief: Handcraft has moral value
When a brand needs to feel:
Tailwind Approach:
/* Arts & Crafts-inspired */
colors: earth tones (amber, stone, emerald)
borders: decorative, visible
textures: paper, fabric, natural
typography: serif, slightly ornate
spacing: generous, organic rhythms
Origin: France, Belgium → International Reaction To: Academic historicism and industrialization Core Belief: Art should be everywhere; no separation between art and craft
When a brand needs to feel:
Reference: Paris Metro entrances, Alphonse Mucha posters, Tiffany lamps
Origin: Paris → Global Reaction To: Art Nouveau's organic chaos; post-WWI optimism Core Belief: Machine-age glamour meets geometric precision
When a brand needs to feel:
Tailwind Approach:
/* Art Deco-inspired */
colors: gold-500, black, cream
borders: decorative lines, stepped forms
patterns: geometric, repetitive
typography: geometric sans, high contrast display
shadows: sharp, dramatic
Reference: Chrysler Building, Great Gatsby aesthetic, classic Hollywood
Origin: Germany (Weimar, Dessau) Reaction To: Decorative excess; need for functional post-war reconstruction Core Belief: Form follows function; art and technology unified
When a brand needs to feel:
Tailwind Approach:
/* Bauhaus-inspired */
colors: red-600, blue-600, yellow-500, black, white
shapes: geometric, primitive
layout: asymmetric grid
typography: geometric sans (Futura, Avant Garde)
borders: minimal, functional
Legacy: Google Material Design, IKEA, modern corporate identity
Origin: Switzerland → Global Reaction To: Post-war need for universal, clear communication Core Belief: Objective communication through mathematical order
+---+---+---+---+---+---+
| 1 | 2 | 3 | 4 | 5 | 6 |
+---+---+---+---+---+---+
↓ ↓ ↓
Column Gutter Module
- Consistent column widths
- Mathematical proportions
- Elements snap to grid
- Typography aligned to baseline grid
When a brand needs to feel:
Tailwind Approach:
/* Swiss-inspired */
typography: 'Inter', 'Helvetica Neue', sans-serif
colors: black, white, one accent
layout: 12-column grid, generous gutters
spacing: consistent, mathematical
whitespace: abundant
Legacy: NYC Subway signage, corporate identity systems, most of the web
Origin: San Francisco → Global counterculture Reaction To: Swiss Style's sterility; counterculture movement Core Belief: Design as experience; break every rule
When a brand needs to feel:
Caution: Accessibility nightmare. Use for specific contexts only.
Reference: Grateful Dead posters, Victor Moscoso, Wes Wilson
Origin: Academic architecture → Design Reaction To: Modernist purity ("less is a bore") Core Belief: Embrace complexity, contradiction, and historical reference
When a brand needs to feel:
Origin: Milan, Italy Reaction To: Good taste and minimalist seriousness Core Belief: Anti-design; pleasure over function
When a brand needs to feel:
Tailwind Approach:
/* Memphis-inspired */
colors: bright clashing (pink + teal + yellow + black)
shapes: irregular geometry
patterns: terrazzo, squiggles
borders: thick, contrasting
shadows: offset, colored
Reference: 80s music videos, Saved by the Bell, current Gen Z aesthetics
Origin: Pacific Northwest → Global Reaction To: Clean corporate design; digital tools enabling mess Core Belief: Destroy legibility; design as art
When a brand needs to feel:
Reference: Ray Gun magazine, early MTV, 90s album covers
Origin: Microsoft Metro → Apple iOS 7 → Web Reaction To: Skeuomorphic excess; need for responsive design Core Belief: Digital should look digital
Now the baseline. Most UI design defaults to flat principles with:
Where We Are Now: All styles available simultaneously
We're in a post-ideological moment. No single style dominates. Success comes from:
Styles tend to return on ~30-year cycles:
| Original Era | Revival Era |
|---|---|
| 1960s psychedelic | 1990s rave |
| 1970s disco | 2000s web gradients |
| 1980s Memphis | 2010s hipster design |
| 1990s grunge | 2020s brutalism |
| Y2K aesthetic | 2025-2030s (predicted) |
Prediction: Expect a 1990s deconstructivist/grunge revival in the late 2020s.