Communitygithub.com

growthaudit/claude-design-skills

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.

What is claude-design-skills?

claude-design-skills is a Claude Code agent skill that 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.

Works with✓Claude Code~Codex CLI~Cursor✓Antigravity
npx skills add growthaudit/claude-design-skills
View original→Browse all skills

Ask in your favorite AI

Open a new chat with this agent skill pre-loaded.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentation

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)

#TrendFileQuick Vibe
13D & Immersivetrends/3d-immersive.mdDepth, parallax, perspective transforms, WebGL-inspired
2Experimental Navigationtrends/experimental-nav.mdNon-linear layouts, radial menus, hidden drawers, exploration
3Vibrant Color Palettestrends/vibrant-color.mdNeon gradients, Y2K nostalgia, dopamine design, high-saturation
4Bold Typographytrends/bold-typography.mdOversized headlines, kinetic lettering, variable fonts, type-as-hero
5Dark Modetrends/dark-mode.mdOLED-friendly, high contrast, ambient glows, light/dark toggle
6Motion Designtrends/motion-design.mdScroll-triggered, micro-animations, easing curves, scrollytelling
7Gamified Designtrends/gamified.mdPoints, progress bars, badges, streaks, reward loops, XP systems
8Neumorphismtrends/neumorphism.mdSoft shadows, inset/raised elements, tactile UI, frosted surfaces
9Retrofuturismtrends/retrofuturism.mdNeon + chrome, pixel art accents, CRT glow, arcade/sci-fi aesthetic
10Maximalismtrends/maximalism.mdDense layers, rich textures, overlapping visuals, bold everything
11Collagetrends/collage.mdScrapbook, torn textures, sticker graphics, handwritten fonts
12Neo-Brutalismtrends/neo-brutalism.mdRaw borders, loud colors, anti-design, visible structure, no polish
13Sustainable Designtrends/sustainable.mdLean, accessible, high-contrast, minimal footprint, ethical UX

AI Design Trends (4)

#TrendFileQuick Vibe
14Chatbot UItrends/chatbot-ui.mdConversational interfaces, agentic flows, multi-step dialogs
15Voice Interfacetrends/voice-interface.mdWaveform visualizers, voice-first nav, accessibility-forward
16Progressive Nurturingtrends/progressive-nurture.mdAdaptive forms, contextual reveals, smart personalization
17AI-Native Layouttrends/ai-native.mdDynamic 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

Related Skills

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community