Add 71 new skills: Spark Intelligence, SupaRalph, PayloadCMS, Frontend-Design, Ralph, and Vibeship ecosystem integration
This commit is contained in:
AI Agent
252
skills/frontend-design/SKILL.md
Normal file
252
skills/frontend-design/SKILL.md
Normal file
@@ -0,0 +1,252 @@
|
||||
# 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!** 🎨
|
||||
Reference in New Issue
Block a user