playbooks

home / skills / vipulgupta2048 / codex-skills / frontend-design

frontend-design skill

/skills/frontend-design

This skill helps you craft distinctive, production-grade frontend interfaces with bold aesthetics, accessible structure, and purposeful motion across

npx playbooks add skill vipulgupta2048/codex-skills --skill frontend-design

Review the files below or copy the command above to add this skill to your agents.

Files (7)
SKILL.md
3.5 KB
---
name: frontend-design
description: Create distinctive, production-grade frontend interfaces with high design quality. Use when building or refining web components, pages, or apps (HTML/CSS/JS/React) with bold aesthetics, purposeful layouts, motion, and accessibility. Avoid generic AI-looking output.
---

# Frontend Design

## Overview

Build memorable, functional interfaces with a clear aesthetic direction (no generic templates). Focus on bold typography, cohesive palettes, purposeful motion, semantic structure, and accessibility.

## Quick Start
- Collect intent: purpose, audience, platform constraints, framework, delivery format (HTML/React/Vue).
- Choose an aesthetic direction and signature move (stripe, glow, grain, magazine stack). See `references/aesthetic-playbook.md`.
- Define tokens: fonts, palette, shadows, radii, spacing scale. Load fonts early.
- Plan layout: hero + supporting sections, data/timeline rails, cards; pick grid system and motion plan.
- Build semantic markup, wire CSS variables, add motion with staggered reveals, then run accessibility and responsive checks.

## Workflow

### 1) Define intent and aesthetic
- Ask for: target users, tone (brutalist, editorial, neon, soft craft, industrial, etc.), content types (cards, forms, charts), performance constraints.
- Pick a single memorable gesture and stick to it. Avoid mixed-font chaos unless the style calls for it.
- If the user is vague, propose 2–3 aesthetic directions from `references/aesthetic-playbook.md` and confirm.

### 2) Plan structure and tokens
- Establish CSS variables for palette, shadows, radii, spacing, and motion curve. Keep accent count to 1–2.
- Choose font pairing (display + body, optional mono). Provide fallbacks after custom fonts.
- Map sections and micro-interactions. For vanilla builds, start from semantic HTML; for React, break into composable pieces (Hero, FeatureList, Timeline, CTA Rail).
- Reference `references/implementation-patterns.md` for layout, motion, accessibility, and responsive patterns.

### 3) Build and animate
- Markup: semantic headings, skip links, ARIA labels for interactive elements, descriptive alt text.
- Layout: prefer CSS Grid for macro and Flexbox for clusters. Break the grid deliberately (asymmetry, overlaps) while preserving readability.
- Styling: use custom backgrounds (gradient meshes, grain, hatch) to avoid flat color; design buttons and cards with intentional borders/shadows.
- Motion: orchestrate a few meaningful animations (page-load stagger, hover magnetic lift, scroll reveals). Guard with `prefers-reduced-motion`.
- Data-driven UI: define arrays of content (cards, metrics, steps) to keep components DRY and easy to restyle.

### 4) Polish and QA
- Responsive: collapse grids, maintain padding, ensure CTAs remain prominent on mobile, swap hover cues for focus/active styles.
- Accessibility: one `h1`, logical heading order, focus styles, contrast AA+, labeled inputs, `aria-live` where status changes.
- Performance: avoid heavy shadows on mobile, compress/limit assets, use font-display swap, prefer CSS animations over JS-heavy effects.

## References
- `references/aesthetic-playbook.md`: Pick strong aesthetic directions with fonts, colors, layout, and motion cues.
- `references/implementation-patterns.md`: HTML/React patterns, tokens, motion recipes, responsive and accessibility guidance.

## Assets
- `assets/vanilla-starter/`: Ready-to-run vanilla HTML/CSS/JS concept (avant studio theme) with gradients, grain, staggered reveals, skip link, and accessible structure. Copy and retheme by updating CSS variables, fonts, and content.

Overview

This skill helps you create distinctive, production-grade frontend interfaces with high design quality and purposeful details. It emphasizes bold typography, cohesive palettes, semantic structure, accessible interactions, and restrained motion to avoid generic AI-looking output. Use it to build or refine HTML/CSS/JS or React frontends that feel intentional and polished.

How this skill works

I guide you through defining intent and an aesthetic, establishing design tokens, planning layout and motion, then implementing semantic markup and CSS variables. The workflow moves from intent → tokens → build & animate → polish & QA, with checks for accessibility, responsiveness, and performance. I provide concrete patterns for grids, cards, motion orchestration, and data-driven components to keep designs consistent and composable.

When to use it

  • Starting a new landing page, component library, or app UI where visual identity matters
  • Restyling an existing interface to remove generic or ‘AI’ output and gain a distinct aesthetic
  • Converting design direction into production-ready HTML/CSS/React components
  • Adding purposeful motion and micro-interactions while preserving accessibility
  • Preparing a portfolio piece or marketing site that needs memorable, high-quality visuals

Best practices

  • Collect intent: audience, platform, performance limits, and content types before designing
  • Pick one strong aesthetic direction and a signature gesture; avoid mixing many competing styles
  • Define a small set of tokens (fonts, palette, spacing, radii, shadows) and expose them as CSS variables
  • Favor semantic HTML and CSS Grid for macro layout; use Flexbox for clusters and predictable clusters
  • Limit motion to a few meaningful effects; respect prefers-reduced-motion and provide focus-visible states
  • Run responsive, accessibility (contrast, headings, labels), and performance checks before finalizing

Example use cases

  • Create a hero-led landing page with a magazine-style stack and staggered content reveals
  • Build a card grid system with token-driven theming for rapid restyling
  • Implement an editorial portfolio with bold typography, custom gradients, and accessible navigation
  • Convert a static HTML mock into a React component library with reusable tokens and motion hooks
  • Add polished hover and scroll interactions to a product listing while keeping contrast and reduced-motion support

FAQ

How do you prevent interfaces from looking like generic AI output?

Pick a clear aesthetic direction and one signature visual gesture, limit accents and fonts, and apply handcrafted details like custom backgrounds, intentional shadows, and curated motion.

Which layout approach do you recommend for complex pages?

Use CSS Grid for the overall macro layout and Flexbox for smaller clusters. Deliberate asymmetry and overlaps are fine if readability and responsive behavior are preserved.