frontend-design
Installation
SKILL.md
Frontend Design
Overview
Expert guidance for designing and implementing beautiful, modern frontend interfaces. Covers landing pages, dashboards, web applications, and component design. Focuses on visual hierarchy, spacing, typography, color, and responsive layout using modern CSS and frameworks like Tailwind CSS.
Instructions
When a user asks you to design or build a frontend UI, follow these steps:
Step 1: Identify the page type and purpose
| Page Type | Primary Goal | Key Elements |
|---|---|---|
| Landing page | Convert visitors | Hero, benefits, social proof, CTA |
| Dashboard | Display data | Nav, cards, charts, tables, filters |
| Settings/Form | Collect input | Form groups, validation, save states |
| Content page | Inform | Typography, media, readability |
| App shell | Navigate | Sidebar, header, content area, breadcrumbs |
Related skills