# Frontend Design

> Create distinctive, production-grade frontend interfaces with high design quality. Use for React/web UI implementation and redesign work where visual direction matters.

- Skill: `munlucky/frontend-design` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add munlucky/frontend-design`
- Raw SKILL.md: https://api.skillmd.com/api/skills/munlucky/frontend-design/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- License: Apache 2.0. Adapted from pbakaus/impeccable.
- Author: munlucky (https://skillmd.com/u/munlucky)
- Updated: 2026-09-10
- Page: https://skillmd.com/skills/munlucky/frontend-design

---


# Frontend Design

Use this skill when implementing or redesigning user-facing web UI.

## Context Protocol

Do not start visual design work without design context.

Check in this order:
1. Loaded instructions for a `## Design Context` section
2. `.impeccable.md` at the project root
3. If neither exists, run `teach-impeccable` first or ask the user for the missing context

Minimum required context:
- target audience
- primary use cases or jobs to be done
- desired tone or brand personality

Do not infer these only from code. Existing code shows implementation history, not design intent.

## When To Apply

Apply for:
- React or web frontend implementation
- landing pages, dashboards, settings pages, flows, posters, or visual artifacts
- redesign requests where polish, distinctiveness, or product feel matters

Do not use this skill as a substitute for repo-specific design systems. If the repository already has tokens, primitives, or brand rules, follow them first and use this skill to improve execution quality.

## Working Principles

Commit to a clear visual direction before editing code:
- define the purpose of the surface
- choose an intentional tone, not a default template
- identify one memorable differentiator

Then implement working code that is:
- production-grade and functional
- visually coherent
- responsive on desktop and mobile
- accessible and maintainable

## Design Rules

### Typography

- Prefer distinctive, intentional type pairings over default stacks.
- Use fluid sizing with `clamp()` when appropriate.
- Build a clear hierarchy with weight, size, spacing, and rhythm.
- Avoid overused defaults such as Inter, Roboto, Arial, and system stacks unless the repo already standardizes on them.

### Color

- Use a deliberate palette with clear hierarchy.
- Prefer CSS variables and modern color functions when the stack allows it.
- Tint neutrals toward the brand hue rather than relying on flat grayscale.
- Avoid the generic AI palette: purple-to-blue gradients, cyan on dark, neon accents, or gray text on colored backgrounds.

### Layout

- Create rhythm with varied spacing, not repeated identical blocks.
- Use asymmetry intentionally where it improves hierarchy.
- Prefer strong sections and spacing systems over wrapping everything in cards.
- Avoid nested cards, templated hero metrics, or repetitive icon-card grids.

### Motion

- Use a small number of meaningful transitions and reveals.
- Prefer transform and opacity animations.
- Respect `prefers-reduced-motion`.
- Avoid bounce or elastic easing unless the product explicitly calls for it.

### Interaction

- Make primary actions obvious within seconds.
- Use progressive disclosure for advanced detail.
- Design empty, loading, error, and success states intentionally.
- Keep keyboard focus visible and touch targets usable.

### Responsive Behavior

- Design for mobile and desktop as different contexts, not just smaller and larger boxes.
- Prefer fluid spacing and container-aware layouts where available.
- Do not hide critical functionality on mobile without a replacement interaction.

### UX Writing

- Make every word earn its place.
- Avoid repeating information users can already see.
- Keep labels direct and specific.

## Anti-Patterns

Treat these as warning signs:
- obvious AI-looking gradients and glow-heavy dark mode
- gray text on colored surfaces
- glassmorphism used decoratively
- nested cards and repeated safe component grids
- decorative charts or metrics with no real meaning
- generic rounded rectangles with default shadows everywhere

## Coordination

- Use this skill before or during implementation when visual direction is part of the task.
- Use `vercel-react-best-practices` later for React/Next.js runtime and performance refinement.
- Use `audit`, `normalize`, and `polish` as focused follow-up skills when needed.