design-trends

name

design-trends

description

Apply 2026 web design trends as complete styling systems to any artifact — landing pages, dashboards, presentations, components, or creative builds. Use this skill whenever the user mentions a design trend by name (e.g. "neo-brutalism", "neumorphism", "retrofuturism", "maximalism", "collage", "gamified", "dark mode", "vibrant", "bold typography", "3D immersive", "experimental navigation", "sustainable design", "motion design") or asks for something "trendy", "2026 style", "anti-design", "dopamine design", "Y2K", "retro-futuristic", "scrapbook style", "raw aesthetic", or similar. Also trigger when the user says "apply a trend", "style this like...", "make it feel like...", or references any of the 13 web design trends or 4 AI design trends. Even if they just say "make this look cool" or "give this some personality" — consider offering trend options from this skill.

Design Trends Skill

Apply 2026 web design trends as complete, opinionated styling systems to any artifact. Each trend is a full design language — not just colors, but layout philosophy, motion principles, typography rules, CSS patterns, and Tailwind utility strategies.

How It Works

1. User requests a trend (or you suggest one based on context)
2. Read the trend file from trends/ directory to load the full specification
3. Apply the design system to whatever artifact you're building — React component, HTML page, landing page, dashboard, etc.
4. Combine trends if appropriate — some layer naturally (e.g. Dark Mode + Neumorphism, Retrofuturism + Bold Typography)

Available Trends (17 total)

Core Design Trends (13)

#	Trend	File	Quick Vibe
1	3D & Immersive	trends/3d-immersive.md	Depth, parallax, perspective transforms, WebGL-inspired
2	Experimental Navigation	trends/experimental-nav.md	Non-linear layouts, radial menus, hidden drawers, exploration
3	Vibrant Color Palettes	trends/vibrant-color.md	Neon gradients, Y2K nostalgia, dopamine design, high-saturation
4	Bold Typography	trends/bold-typography.md	Oversized headlines, kinetic lettering, variable fonts, type-as-hero
5	Dark Mode	trends/dark-mode.md	OLED-friendly, high contrast, ambient glows, light/dark toggle
6	Motion Design	trends/motion-design.md	Scroll-triggered, micro-animations, easing curves, scrollytelling
7	Gamified Design	trends/gamified.md	Points, progress bars, badges, streaks, reward loops, XP systems
8	Neumorphism	trends/neumorphism.md	Soft shadows, inset/raised elements, tactile UI, frosted surfaces
9	Retrofuturism	trends/retrofuturism.md	Neon + chrome, pixel art accents, CRT glow, arcade/sci-fi aesthetic
10	Maximalism	trends/maximalism.md	Dense layers, rich textures, overlapping visuals, bold everything
11	Collage	trends/collage.md	Scrapbook, torn textures, sticker graphics, handwritten fonts
12	Neo-Brutalism	trends/neo-brutalism.md	Raw borders, loud colors, anti-design, visible structure, no polish
13	Sustainable Design	trends/sustainable.md	Lean, accessible, high-contrast, minimal footprint, ethical UX

AI Design Trends (4)

#	Trend	File	Quick Vibe
14	Chatbot UI	trends/chatbot-ui.md	Conversational interfaces, agentic flows, multi-step dialogs
15	Voice Interface	trends/voice-interface.md	Waveform visualizers, voice-first nav, accessibility-forward
16	Progressive Nurturing	trends/progressive-nurture.md	Adaptive forms, contextual reveals, smart personalization
17	AI-Native Layout	trends/ai-native.md	Dynamic content zones, streaming indicators, confidence UI

Usage Instructions

Single Trend Application

1. Read the relevant trends/<name>.md file
2. Apply the CSS Variables, Tailwind Config, and Layout Principles from the trend
3. Follow the Do / Don't rules specific to that trend
4. Use the Reference Examples and Code Snippets as starting points

Combining Trends

Some trends layer naturally. When combining:

• Pick a primary trend (drives layout + typography)
• Pick a secondary trend (adds texture, motion, or color)
• The primary trend's layout rules win in conflicts
• Good combos are noted in each trend file

Building Artifacts

When building React/HTML artifacts with a trend:

• Apply CSS variables from the trend to :root
• Use the Tailwind utilities and custom classes specified
• Follow the layout grid / composition rules
• Add the motion/interaction patterns if applicable
• Import Google Fonts specified in the trend (use @import url(...) in CSS)

Creating Custom Trend Mashups

If no single trend fits, create a hybrid:

1. Read 2-3 trend files
2. Cherry-pick the color palette from one, layout from another, typography from a third
3. Document what you combined so the user can iterate

Anti-Slop Principles

Every trend in this skill is designed to produce distinctive, non-generic output. Universal rules:

• Never center everything — use asymmetric layouts when possible
• Never default to purple gradients unless the trend specifically calls for it
• Never use uniform rounded corners on everything — vary border-radius by element role
• Never use Inter as the only font — each trend specifies distinct pairings
• Never add decorative blobs/circles for no reason — every visual element earns its place
• Always create visual hierarchy through contrast, not just size
• Always let the trend's personality override "safe" defaults