| 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
- User requests a trend (or you suggest one based on context)
- Read the trend file from
trends/ directory to load the full specification
- Apply the design system to whatever artifact you're building — React component, HTML page, landing page, dashboard, etc.
- 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
- Read the relevant
trends/<name>.md file
- Apply the CSS Variables, Tailwind Config, and Layout Principles from the trend
- Follow the Do / Don't rules specific to that trend
- 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:
- Read 2-3 trend files
- Cherry-pick the color palette from one, layout from another, typography from a third
- 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
