# premium-web-design

This skill guides Claude Code toward polished React components with distinctive type, composition, color, and motion. Use it for sites, landing pages, and portfolios.

- skill · `type=skill` · Claude Code · 1090 installs
- Author: davila7
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/davila7/claude-code-templates/tree/HEAD/cli-tool/components/skills/creative-design/premium-web-design
- Updated: 2026-10-24
- HTML: https://affpapa.org/en/nevibecode/skills/premium-web-design

## What it does

\`premium-web-design` guides Claude Code when it builds React components in `.jsx` for websites, landing pages, portfolios, and standalone web pieces. Its rules push the result toward deliberate typography, an intentional palette, an original page structure, and an immersive hero rather than a plain text block.

The skill also flags familiar AI design habits: overused typefaces, predictable section stacks, equal card grids, arbitrary gradients, and repeated motion patterns. It gives direction for type hierarchy, asymmetry, color restraint, layout storytelling, and choreographed animation.

This is for visual-facing work. It is not meant for dashboards, admin panels, or internal tools where utility takes priority over aesthetics.

## Requirements
- Works with: Stripe

## Install

### Claude Code (native platform)

1. **claude-code-templates**
```bash
npx claude-code-templates@latest --skill creative-design/premium-web-design
```

2. **Skills CLI (Vercel)**
```bash
npx skills add davila7/claude-code-templates --skill premium-web-design -a claude-code
```

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

### Codex

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

### Cursor

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

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install davila7/claude-code-templates premium-web-design
```

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

### Gemini CLI

**Platform CLI**
```bash
gemini skills install https://github.com/davila7/claude-code-templates --path cli-tool/components/skills/creative-design/premium-web-design
```

### Windsurf (Devin Desktop)

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

### 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/davila7/claude-code-templates/tree/HEAD/cli-tool/components/skills/creative-design/premium-web-design

## When to use it
- build a premium React landing page
- shape a portfolio into a distinctive web component
- remove generic AI-style layout patterns
- define type and color for a high-end visual direction
- design an immersive hero with intentional motion

## Example prompts
- Build a `.jsx` React landing page with distinctive typography and an original page structure.
- Redesign this web component so it feels like agency work rather than a generic AI interface.
- Create a portfolio with restrained color, asymmetric composition, and choreographed animation.

## Similar
- [premium-frontend-ui](https://affpapa.org/en/nevibecode/skills/premium-frontend-ui.md) — skill · 4900 installs
- [modern-web-design](https://affpapa.org/en/nevibecode/skills/modern-web-design.md) — skill · 2900 installs
- [animation-systems](https://affpapa.org/en/nevibecode/skills/animation-systems.md) — skill · 1900 installs
- [web-typography](https://affpapa.org/en/nevibecode/skills/web-typography.md) — skill · 9200 installs
- [web-motion-design](https://affpapa.org/en/nevibecode/skills/web-motion-design.md) — skill · 1300 installs
- [web-design-reviewer](https://affpapa.org/en/nevibecode/skills/web-design-reviewer.md) — skill · 13957 installs

From the same set: [davila7/claude-code-templates](https://affpapa.org/en/nevibecode/by/davila7/claude-code-templates.md) — 361 cards

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