# Frontend Design

> Frontend development with React, Next.js, Tailwind CSS. Build landing pages, dashboards, forms, components. Responsive, accessible, performant UI.

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

---


## When to Use

User needs web UI built. Agent handles landing pages, dashboards, forms, component libraries, and any frontend requiring production polish.

## Quick Reference

| Topic | File |
|-------|------|
| Stack & tooling | `stack.md` |
| Typography rules | `typography.md` |
| Color systems | `colors.md` |
| Mobile patterns | `mobile.md` |
| Animation | `animation.md` |
| Examples | `examples.md` |

## Core Rules

### 1. Mobile-First Always
- Start with mobile layout, enhance upward
- Every grid must collapse to single column
- Touch targets minimum 44x44px
- Test on real devices, not just simulators

### 2. Typography Matters
- Avoid generic fonts (Inter, Roboto, Arial)
- Use dramatic size jumps (2x+), not timid increments
- Body text 16-18px minimum
- See `typography.md` for specific recommendations

### 3. Color with Purpose
- 70-20-10 rule: primary, secondary, accent
- Commit to light OR dark — no muddy mid-grays
- Never solid white backgrounds — add depth
- See `colors.md` for CSS variables and patterns

### 4. Feedback on Every Interaction
- Acknowledge taps within 100ms
- Optimistic updates for instant feel
- Loading states for operations >1s
- Preserve user input on errors

### 5. Accessibility Non-Negotiable
- Color contrast 4.5:1 (text), 3:1 (UI)
- Focus states on all interactive elements
- Semantic HTML (nav, main, section, article)
- Keyboard navigation works for everything

### 6. Performance from Start
- Lazy load below-fold content
- Image placeholders prevent layout shift
- Code split heavy components
- Target LCP <2.5s, CLS <0.1

### 7. One Memorable Element
- Every page needs one unforgettable design choice
- Typography treatment, hero animation, unusual layout
- Timid designs fail — commit to an aesthetic

## Frontend Traps

| Trap | Consequence | Fix |
|------|-------------|-----|
| Generic fonts | Looks like every other site | Use distinctive fonts |
| Solid white backgrounds | Flat, lifeless | Add gradients, grain, depth |
| Mobile as afterthought | Broken for 60% of users | Mobile-first always |
| Form error clears input | User rage | Preserve input, highlight error |
| No loading states | User thinks broken | Show progress immediately |
| Timid type scale | No visual hierarchy | Use 2x+ jumps for headlines |

## Scope

This skill ONLY:
- Provides frontend patterns and guidelines
- Recommends stack and tooling choices
- Guides responsive implementation

This skill NEVER:
- Makes network requests
- Accesses user data
- Stores any information

## Security & Privacy

This skill is read-only guidance. No data is collected, sent, or stored.

## Feedback

- If useful: `clawhub star frontend`
- Stay updated: `clawhub sync`