---
name: trend-researcher
description: Research latest UI/UX trends from Dribbble and design communities. Use when starting a design project to understand current visual trends, color palettes, and layout patterns.
allowed-tools:
  - mcp__claude-in-chrome__tabs_context_mcp
  - mcp__claude-in-chrome__tabs_create_mcp
  - mcp__claude-in-chrome__navigate
  - mcp__claude-in-chrome__computer
  - mcp__claude-in-chrome__read_page
  - mcp__claude-in-chrome__get_page_text
---

# Trend Researcher

Research current UI/UX design trends from Dribbble and other design communities to inform design decisions.

## Purpose

Before designing, understand what's trending in the design world. This skill helps:
- Identify popular visual styles and aesthetics
- Discover color palette trends
- Learn typography approaches
- See layout patterns in use
- Avoid outdated or overused styles

## Workflow

### Step 1: Navigate to Dribbble

Visit the popular shots pages:

```
https://dribbble.com/shots/popular/web-design
https://dribbble.com/shots/popular/mobile
```

### Step 2: Screenshot and Analyze

For each page:
1. Take a screenshot of the current view
2. Scroll down and take additional screenshots (2-3 scrolls)
3. Analyze the visible designs for:
   - Dominant color schemes
   - Typography styles (serif vs sans-serif, weight, spacing)
   - Layout patterns (bento, cards, full-bleed, etc.)
   - Animation/motion indicators
   - UI element styles (buttons, cards, navigation)

### Step 3: Identify Patterns

Look for recurring themes:

**Color Trends**
- What primary colors appear most?
- Light vs dark mode preference?
- Gradient usage patterns?
- Accent color choices?

**Typography Trends**
- Display fonts: bold, condensed, decorative?
- Body fonts: clean sans, readable serif?
- Weight trends: heavy, light, mixed?
- Spacing: tight, loose, dramatic?

**Layout Trends**
- Grid systems in use
- White space usage
- Card vs full-section layouts
- Navigation patterns

**UI Element Trends**
- Button styles (rounded, sharp, outlined)
- Card designs (shadows, borders, flat)
- Icon styles (outlined, filled, animated)

### Step 4: Generate Report

Create a structured trend report:

```markdown
## UI/UX Trend Report - [Date]

### Top Visual Trends
1. **[Trend Name]**: [Description with specific examples seen]
2. **[Trend Name]**: [Description with specific examples seen]
3. **[Trend Name]**: [Description with specific examples seen]

### Color Trends
- **Primary colors trending**: [hex codes observed]
- **Background approaches**: [light/dark/gradient patterns]
- **Accent colors**: [popular accent choices]

### Typography Trends
- **Heading styles**: [observations about display fonts]
- **Body text**: [readable font choices]
- **Font weight trends**: [heavy/light/mixed]

### Layout Patterns
1. **[Pattern]**: [description + where seen]
2. **[Pattern]**: [description + where seen]

### Elements to Avoid
- [Outdated pattern 1]
- [Overused style 1]

### Recommended Direction
Based on this analysis, suggest: [aesthetic direction that feels fresh]
```

## Alternative Sources

If Dribbble is unavailable, check:
- `https://www.awwwards.com/websites/` - Award-winning sites
- `https://www.behance.net/galleries/ui-ux` - Behance UI/UX
- `https://www.siteinspire.com/` - Curated site inspiration

## Fallback Mode

If browser tools are unavailable:
1. Note that trend research requires browser access
2. Suggest user share screenshots or describe sites they like
3. Reference general current trends from knowledge:
   - Dark mode with accent colors
   - Bento grid layouts
   - Large typography
   - Micro-interactions
   - Glassmorphism (fading)
   - Neobrutalism (rising)
   - Variable fonts
   - 3D elements and depth

## Output

The trend report should inform:
- Aesthetic direction selection
- Color palette choices
- Typography decisions
- Layout structure
- What to avoid (outdated patterns)


---
Source attribution: davepoon
Original project: https://github.com/davepoon/buildwithclaude/blob/a1103092fa571c032ae3e706433505ce0d6327bc/plugins/frontend-design-pro/skills/trend-researcher/SKILL.md
License: MIT
License information: https://opensource.org/license/mit
Original upstream instructions; downloaded from Dave AI.

## Upstream license notice

MIT License

Copyright (c) 2025 davepoon

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.



# Dave AI resource metadata

Creator / publisher: davepoon
Original project: https://github.com/davepoon/buildwithclaude/blob/a1103092fa571c032ae3e706433505ce0d6327bc/plugins/frontend-design-pro/skills/trend-researcher/SKILL.md
Attribution basis: Source repository record

Fields of work: Design, Marketing
Roles: Content Marketer, Graphic Designer, Marketing Analyst, Product Designer, UX Designer
Specialties: Design
Tools: Awwwards, Behance, Dribbble, Siteinspire
Country applicability: Country not specified
Classification basis: Source catalog labels
Instruction SHA-256: 40d41302e253ca278ca4c9625c2803c578d8515b0eb9a378c86a236d7caa953d