--- name: frontend-design version: 1.0.0 Author: justinsanjp & ChatGPT description: Helps LLMs too understand Front end design license: open-use train: false # mandatory --- # Frontend Design Skill ## Goal Create modern, clean, believable frontend designs that look handcrafted by experienced designers and frontend developers — NOT generic AI-generated layouts. The design should feel natural, structured, intentional, and production-ready. --- # Core Design Philosophy Good frontend design is: - subtle - consistent - readable - emotionally neutral unless branding requires otherwise - visually balanced - functional before decorative Avoid: - overly perfect symmetry everywhere - random gradients - excessive glow effects - giant rounded corners on everything - AI-looking dashboards - fake futuristic UI - clutter - inconsistent spacing - overly saturated colors - "Dribbble-only" designs that are unusable in practice The UI should look like something from: - a real SaaS company - a modern startup - a polished open-source project - an experienced indie developer --- # Design Principles ## 1. Visual Hierarchy Always establish: - clear primary action - secondary actions - readable content flow - strong section separation Use: - font size - spacing - contrast - weight instead of: - excessive colors - borders everywhere - unnecessary shadows --- ## 2. Spacing System Use consistent spacing. Preferred spacing scale: - 4px - 8px - 12px - 16px - 24px - 32px - 48px - 64px Never use random spacing values. Whitespace is important. Modern UIs breathe. --- ## 3. Typography Preferred fonts: - Inter - Geist - SF Pro - Manrope - Plus Jakarta Sans Rules: - readable first - avoid oversized headings - avoid tiny text - line-height matters Recommended: - body: 14px–16px - headings: 24px–48px - line-height: 1.4–1.7 Avoid: - ultra thin fonts - heavy all caps - decorative fonts - excessive gradients on text --- ## 4. Color Usage Use restrained color palettes. Preferred approach: - neutral backgrounds - one primary accent color - subtle secondary accents Good modern base colors: - zinc - slate - stone - neutral Avoid: - neon overload - rainbow gradients - pure black backgrounds (#000000) - pure white backgrounds (#FFFFFF) Preferred: - off-black - soft-white - muted colors Example: - background: #0f1115 - card: #171a21 - border: rgba(255,255,255,0.06) --- ## 5. Shadows & Effects Use subtle shadows only. Modern UI uses: - depth minimally - layering carefully - blur sparingly Avoid: - massive glow - aggressive glassmorphism - heavy drop shadows - too many layered effects --- # Layout Guidelines ## Containers Use max-width containers. Recommended: - 1200px - 1280px - 1440px Content should never stretch infinitely on large monitors. --- ## Grid Systems Use: - CSS Grid - Flexbox Preferred layouts: - asymmetrical but balanced - consistent alignment - predictable spacing Avoid: - random floating elements - uneven columns - centered-everything syndrome --- ## Responsive Design Mobile-first. Breakpoints: - mobile - tablet - desktop - ultrawide Important: The UI should still feel premium on smaller screens. Do not just shrink desktop layouts. --- # Component Design ## Buttons Buttons should: - feel clickable - have proper states - maintain contrast - avoid excessive gradients Primary button: - solid color - medium contrast - subtle hover state Avoid: - giant pill buttons everywhere - glowing borders - animation spam --- ## Cards Cards should: - separate information - not dominate the UI - use subtle borders Recommended: - small radius - soft contrast - limited shadow Avoid: - nested cards inside cards inside cards - huge padding - giant empty areas --- ## Forms Forms should feel: - fast - clean - easy to scan Use: - clear labels - proper spacing - visible focus states Avoid: - placeholder-only labels - oversized inputs - unnecessary validation spam --- ## Navigation Navigation should: - be predictable - minimal - easy to scan Modern navigation: - fewer items - grouped logically - clear active states Avoid: - overcrowded navbars - giant sidebars - too many icons --- # Animations Animations should: - support usability - feel responsive - be subtle Recommended: - 150ms–300ms transitions - opacity - transform - slight movement Avoid: - bounce everywhere - dramatic animations - constant motion - distracting effects --- # Modern Frontend Standards Preferred stack: - React - Next.js - TailwindCSS - shadcn/ui - Framer Motion (sparingly) Use: - semantic HTML - accessible components - proper keyboard navigation - ARIA where needed Always support: - responsive layouts - dark mode - reduced motion - accessibility --- # Accessibility Must have: - proper contrast - keyboard support - visible focus states - semantic structure Never sacrifice usability for aesthetics. Accessibility is part of good design. --- # Local Assets & Self-Hosting Rules If the user writes in German, consider privacy-friendly and self-hosted frontend setups whenever appropriate. However, unless the user explicitly requests otherwise: prefer CDN solutions by default for simplicity and faster development. This especially applies to: - Google Fonts - Tailwind CSS CDN - icon libraries - animations - UI assets Preferred default approach: - use stable and trusted CDNs - minimize setup complexity - optimize for rapid development However, if the user mentions: - privacy - GDPR - production deployment - self-hosting - offline support - enterprise environments then prefer local/self-hosted solutions instead. Examples of self-hosted alternatives: - use local font files instead of Google Fonts CDN - install TailwindCSS via npm instead of `