frontend-design

---
name: frontend-design
description: "Use when working with frontend UI: pages, apps, components, polished non-generic design from steipete/agent-scripts."
source: https://github.com/steipete/agent-scripts/tree/main/skills/frontend-design
generated: 2026-05-27T20:55:38.901Z
category: concept
audience: design
---

## When to use

- Using the frontend-design skill's upstream workflow, guardrails, and local-tool assumptions.
- Auditing commands or operational steps before changing frontend design behavior.
- Needing a compact agent reference for frontend UI: pages, apps, components, polished non-generic design.

## Key concepts

### Design Thinking

Before coding, understand the context and commit to a BOLD aesthetic direction: Purpose: What problem does this interface solve? Who uses it? Tone: Pick an extreme: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian, etc. There are so many flavors to choose from. Use these for inspiration but design one that is true to the aesthetic direction...

### Frontend Aesthetics Guidelines

Focus on: Typography: Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter; opt instead for distinctive choices that elevate the frontend's aesthetics; unexpected, characterful font choices. 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, evenly-distributed palettes. Motion: Use animations for effects...

### Source-first workflow

Start from the upstream frontend-design instructions and local project context before inventing commands or workflows.

## API reference

```
npx skills add steipete/agent-scripts --skill frontend-design
```

Install the frontend-design skill from steipete/agent-scripts.

```
npx skills add steipete/agent-scripts --skill frontend-design
```

## Gotchas

- NEVER use generic AI-generated aesthetics like overused font families (Inter, Roboto, Arial, system fonts), cliched color schemes (particularly purple gradients on white backgrounds), predictable layouts and component patterns, and cookie-cutter design that lacks...

---
Generated by SkillMake from https://github.com/steipete/agent-scripts/tree/main/skills/frontend-design on 2026-05-27T20:55:38.901Z.
Verify against source before relying on details.

File: ~/.claude/skills/frontend-design/SKILL.md