QwenClaw-with-Auth/skills/frontend-design/SKILL.md

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

// 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

// 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

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! 🎨