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.
From design-masterynpx claudepluginhub hermeticormus/design-mastery-claude-code --plugin design-masteryThis skill uses the workspace's default tool permissions.
Enforces baseline coding conventions for naming, readability, immutability, KISS/DRY/YAGNI, and code quality review in TypeScript/JavaScript. Use for new projects, refactoring, reviews, and onboarding.
Provides patterns for shared UI in Compose Multiplatform across Android, iOS, Desktop, and Web: state management with ViewModels/StateFlow, navigation, theming, and performance.
Analyzes unfamiliar codebases to generate structured onboarding guides with architecture maps, key entry points, conventions, and starter CLAUDE.md.
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.