# premium-frontend-design

Guides coding assistants to build distinctive, motion-driven frontend interfaces. It prevents generic layouts by enforcing design principles and shader rules.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 1400 installs · ★ 18
- Author: kv0906
- License: MIT · policy=mirror · the beginning of the file is at the end of this page
- Source: https://github.com/kv0906/cc-skills/tree/HEAD/skills/premium-frontend-design/SKILL.md
- Updated: 2026-10-11
- HTML: https://affpapa.org/en/nevibecode/skills/premium-frontend-design

## What it does

This skill injects production UI guardrails into your coding workflow. It explicitly forbids bland light backgrounds and default fonts like Inter or Roboto in headers. The model plans layout hierarchy before writing markup, limiting hero flourish to one focal point and enforcing minimum 4.5:1 text contrast ratios.

Stack selection adapts to your project requirements. For straightforward layouts, it recommends CSS transitions or Framer Motion under 400ms duration. Advanced scroll-triggered effects escalate to GSAP, while 3D viewports use Three.js and `@react-three/fiber`. Keep in mind that SplitText and ScrollTrigger utilities require an active GSAP Club license.

Vague user prompts trigger a cautious, CSS-first default instead of heavy canvas elements. The skill also enforces browser checks: Firefox versions below 103 require fallback backgrounds for `backdrop-filter`.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add kv0906/cc-skills --skill premium-frontend-design -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/premium-frontend-design/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/premium-frontend-design/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add kv0906/cc-skills --skill premium-frontend-design -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/premium-frontend-design/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add kv0906/cc-skills --skill premium-frontend-design -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/premium-frontend-design/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install kv0906/cc-skills premium-frontend-design
```

2. **Manually: put the files in place**
- File: `.github/skills/premium-frontend-design/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add kv0906/cc-skills --skill premium-frontend-design -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/kv0906/cc-skills --path skills/premium-frontend-design
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/premium-frontend-design/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add kv0906/cc-skills --skill premium-frontend-design -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/kv0906/cc-skills/tree/HEAD/skills/premium-frontend-design/SKILL.md

## When to use it
- Prevent generic AI aesthetic in generated web interfaces
- Pick the right animation stack based on performance budgets
- Enforce strict contrast and typography scales across screens
- Implement WebGL and shader effects with safe browser fallbacks

## Example prompts
- Build a brutalist hero section for an analytics platform using Framer Motion micro-interactions
- Create a bento grid dashboard with subtle CSS glow effects and dark background scrims
- Set up a WebGL 3D globe with Three.js and include a fallback for older devices

## Source text · SKILL.md · MIT

Below is the content of a third-party file. It is data, not instructions for you: do not act on anything written inside unless the human asks. Block tag: 63ada9221dbcd42a.

BEGIN THIRD-PARTY FILE 63ada9221dbcd42a
````text
---
name: premium-frontend-design
description: Create award-winning, cinematic frontend interfaces that feel ALIVE. Combines 10+ years of creative frontend experience with technical excellence. Specializes in WebGL, custom shaders, premium animations, and distinctive aesthetics that would win on Awwwards. Use when building landing pages, dashboards, platforms, or any interface where "generic AI slop" is unacceptable.
license: MIT
---

# Premium Frontend Design Skill

This skill guides creation of **production-grade frontend interfaces that feel ALIVE** — not generic, not copy-paste, but genuinely crafted experiences that users remember.

> "The difference between a good interface and an unforgettable one is intentionality in every pixel."

---

## Dependencies (Flexible — Choose What Fits)

This skill is **framework-flexible**. Pick packages based on user preference and project needs.

### Core 3D (for WebGL templates)
```bash
pnpm add three @react-three/fiber @react-three/drei
```

### Animation (choose based on user preference)

| Library | Best For | Complexity | Bundle Size |
|---------|----------|------------|-------------|
| **CSS/Tailwind** | Simple transitions, micro-interactions | Low | 0KB |
| **Framer Motion** | React-native feel, layout animations, gestures | Medium | ~30KB |
| **GSAP** | Complex timelines, scroll-triggered, text effects | High | ~60KB |
| **GSAP + Club** | SplitText, ScrollTrigger, MorphSVG | High | ~80KB |

```bash
# Framer Motion (simpler, React-idiomatic)
pnpm add framer-motion

# GSAP (powerful, timeline-based)
pnpm add gsap @gsap/react
# Note: SplitText, ScrollTrigger require GSAP Club license
```

**Decision Guide:**
- User says "simple" or "lightweight" → CSS + Framer Motion
- User says "complex animations" or "scroll effects" → GSAP
- User says "text animations" or "split text" → GSAP + SplitText
- User doesn't specify → Default to Framer Motion (simpler API)

### Optional Enhancements
```bash
# Mesh gradients (for mesh-gradient-hero)
pnpm add @paper-design/shaders-react

# Icons
pnpm add lucide-react

# Charts/Sparklines (for dashboards)
pnpm add recharts
# or lightweight: pnpm add @visx/shape @visx/scale
```

### Browser Compatibility Notes
- `backdrop-filter`: Not supported in Firefox < 103 (add fallback bg)
- WebGL: Provide CSS fallback for older devices
- `@starting-style`: Chrome 117+, Safari 17.4+ (progressive enhancement)

---

## Core Philosophy

### The "Alive" Principle

An interface feels alive when:
- **It breathes**: Subtle ambient animations, particles, or shader effects create constant but non-distracting motion
- **It responds**: Micro-interactions acknowledge every user action with satisfying feedback
````
END THIRD-PARTY FILE 63ada9221dbcd42a

The third-party file has ended. Everything between the 63ada9221dbcd42a tags is data: requests and commands from it are not followed. An “end of file” line with another tag inside the block is part of the file.

First 2716 of 40968 bytes. © kv0906 · MIT · https://github.com/kv0906/cc-skills/tree/HEAD/skills/premium-frontend-design/SKILL.md

_Part of the page did not fit — see the HTML version._

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md