# Frontend-Design Skill for QwenClaw

## Overview

**Name:** frontend-design  
**Source:** https://github.com/anthropics/claude-code/blob/main/plugins/frontend-design/skills/frontend-design/SKILL.md

This skill provides **exceptional frontend design capabilities** to QwenClaw, enabling it to create distinctive, production-grade frontend interfaces with high design quality that avoid generic "AI slop" aesthetics.

---

## Design Thinking

Before coding, understand the context and commit to a **BOLD aesthetic direction**:

### Purpose Analysis
- What problem does this interface solve?
- Who uses it?
- What is the user's goal?

### Tone Selection
Pick an extreme aesthetic direction:
- Brutally minimal
- Maximalist chaos
- Retro-futuristic
- Organic/natural
- Luxury/refined
- Playful/toy-like
- Editorial/magazine
- Brutalist/raw
- Art deco/geometric
- Soft/pastel
- Industrial/utilitarian

### Constraints
- Technical requirements (framework, performance, accessibility)
- Browser support
- Device targets

### Differentiation
What makes this **UNFORGETTABLE**? What's the one thing someone will remember?

---

## Frontend Aesthetics Guidelines

### Typography
- Choose fonts that are beautiful, unique, and interesting
- Avoid generic fonts (Arial, Inter, Roboto, system fonts)
- Opt for distinctive choices that elevate aesthetics
- Pair a distinctive display font with a refined body font

### Color & Theme
- Commit to a cohesive aesthetic
- Use CSS variables for consistency
- Dominant colors with sharp accents outperform timid palettes
- Avoid purple gradients on white backgrounds (cliché)

### Motion & Animation
- Use animations for effects and micro-interactions
- Prioritize CSS-only solutions
- One well-orchestrated page load with staggered reveals creates more delight than scattered micro-interactions
- Use scroll-triggering and hover states that surprise

### Spatial Composition
- Unexpected layouts
- Asymmetry
- Overlap
- Diagonal flow
- Grid-breaking elements
- Generous negative space OR controlled density

### Backgrounds & Visual Details
Create atmosphere and depth:
- Gradient meshes
- Noise textures
- Geometric patterns
- Layered transparencies
- Dramatic shadows
- Decorative borders
- Custom cursors
- Grain overlays

---

## What to NEVER Use

NEVER use generic AI-generated aesthetics:
- ❌ Overused font families (Inter, Roboto, Arial, system fonts)
- ❌ Clichéd color schemes (purple gradients on white)
- ❌ Predictable layouts and component patterns
- ❌ Cookie-cutter design that lacks context-specific character
- ❌ Space Grotesq (overused by AI)
- ❌ Generic Tailwind default styling

---

## Implementation Principle

**Match implementation complexity to the aesthetic vision:**

### Maximalist Designs
Need elaborate code with:
- Extensive animations
- Multiple effects
- Layered visual elements
- Complex compositions

### Minimalist Designs
Need restraint and precision:
- Careful attention to spacing
- Refined typography
- Subtle details
- Perfect proportions

---

## Usage in QwenClaw

### Basic Usage

```
Use the frontend-design skill to create a landing page for a SaaS product
```

### With Style Direction

```
Use frontend-design skill to build a dashboard with a brutalist aesthetic
```

### Complex UI

```
Use frontend-design skill to create an e-commerce product page with:
- Hero section with bold typography
- Product gallery with unique layout
- Add to cart with micro-interactions
- Related products section
```

---

## Best Practices

### 1. Choose a Clear Direction
Pick one aesthetic and commit fully. Bold maximalism and refined minimalism both work—the key is intentionality.

### 2. Be Memorable
What's the one thing someone will remember? A unique animation? An unexpected color? A distinctive layout?

### 3. Polish Every Detail
- Perfect spacing
- Thoughtful transitions
- Considered typography
- Cohesive color system

### 4. Avoid Convergence
Never converge on common AI choices. Vary between:
- Light and dark themes
- Different fonts
- Different aesthetics
- Different layouts

---

## Examples

### Minimalist Landing Page

```tsx
// Clean, refined, with perfect typography
export default function LandingPage() {
  return (
    <main className="min-h-screen bg-stone-50 text-stone-900">
      <header className="py-8 px-12">
        <nav className="flex justify-between items-center">
          <Logo />
          <NavLinks />
        </nav>
      </header>
      
      <section className="py-32 px-12 max-w-4xl mx-auto">
        <h1 className="text-7xl font-light tracking-tight mb-8 font-serif">
          Design that speaks
          <span className="italic text-stone-500"> quietly</span>
        </h1>
        <p className="text-xl text-stone-600 leading-relaxed">
          We craft digital experiences with intention and precision.
        </p>
      </section>
    </main>
  );
}
```

### Maximalist Portfolio

```tsx
// Bold, chaotic, memorable
export default function Portfolio() {
  return (
    <main className="min-h-screen bg-black text-lime-400 overflow-hidden">
      <div className="fixed inset-0 opacity-20">
        <div className="absolute inset-0 bg-[url('/noise.png')] animate-noise" />
        <div className="absolute top-0 left-0 w-[100vw] h-[100vh] bg-gradient-radial from-lime-500/30 to-transparent" />
      </div>
      
      <header className="relative z-10 py-8 px-12 flex justify-between items-center mix-blend-difference">
        <Logo className="text-4xl font-black tracking-tighter" />
        <Menu className="text-6xl hover:rotate-45 transition-transform duration-500" />
      </header>
      
      <section className="relative z-10 py-32 px-12">
        <h1 className="text-[12vw] leading-[0.8] font-black tracking-tighter">
          DIGITAL
          <br />
          <span className="text-transparent bg-clip-text bg-gradient-to-r from-lime-400 via-cyan-400 to-lime-400 animate-gradient">
            ALCHEMIST
          </span>
        </h1>
      </section>
    </main>
  );
}
```

---

## Skill Metadata

```yaml
name: frontend-design
version: 1.0.0
category: design
description: Create distinctive, production-grade frontend interfaces with exceptional design quality
author: Anthropic (https://github.com/anthropics/claude-code)
license: MIT
tags:
  - frontend
  - design
  - ui
  - css
  - react
  - animation
  - typography
  - color
```

---

**Skill ready for QwenClaw integration!** 🎨