Frontend Design

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications.

diegosouzapw Updated 54 repo stars

File contents

Frontend Design

Create memorable, distinctive interfaces. Avoid generic "AI slop" - every design should have a clear point of view.

Design Philosophy

  1. Bold choices: Pick a strong color palette, unusual typography, or distinctive layout
  2. Purposeful whitespace: Let content breathe, don't fill every pixel
  3. Visual hierarchy: Make the important things impossible to miss
  4. Micro-interactions: Add subtle animations that delight

Technical Stack

  • React 18+ with TypeScript
  • Tailwind CSS for styling
  • Framer Motion for animations
  • Use CSS Grid for complex layouts, Flexbox for simpler ones

Anti-patterns

  • Generic blue/white SaaS layouts
  • Overuse of rounded corners and soft shadows
  • Cards inside cards inside cards
  • Gratuitous gradient backgrounds

diegosouzapw/awesome-omni-skill/tree/main/skills/development/frontend-design-hatappo commit 0def678c5b

Frequently asked questions

npx skillmds@latest add diegosouzapw/frontend-design-8