{"skill":{"slug":"superdesign","displayName":"SuperDesign","summary":"Expert frontend design guidelines for creating beautiful, modern UIs. Use when building landing pages, dashboards, or any user interface.","description":"---\nname: frontend-design\ndescription: Expert frontend design guidelines for creating beautiful, modern UIs. Use when building landing pages, dashboards, or any user interface.\nmetadata: {\"clawdbot\":{\"emoji\":\"🎨\"}}\n---\n\n# Frontend Design Skill\n\nUse this skill when creating UI components, landing pages, dashboards, or any frontend design work.\n\n## Design Workflow\n\nFollow this structured approach for UI design:\n\n1. **Layout Design** — Think through component structure, create ASCII wireframes\n2. **Theme Design** — Define colors, fonts, spacing, shadows\n3. **Animation Design** — Plan micro-interactions and transitions\n4. **Implementation** — Generate the actual code\n\n### 1. Layout Design\n\nBefore coding, sketch the layout in ASCII format:\n\n```\n┌─────────────────────────────────────┐\n│         HEADER / NAV BAR            │\n├─────────────────────────────────────┤\n│                                     │\n│            HERO SECTION             │\n│         (Title + CTA)               │\n│                                     │\n├─────────────────────────────────────┤\n│   FEATURE   │  FEATURE  │  FEATURE  │\n│     CARD    │   CARD    │   CARD    │\n├─────────────────────────────────────┤\n│            FOOTER                   │\n└─────────────────────────────────────┘\n```\n\n### 2. Theme Guidelines\n\n**Color Rules:**\n- NEVER use generic bootstrap-style blue (#007bff) — it looks dated\n- Prefer oklch() for modern color definitions\n- Use semantic color variables (--primary, --secondary, --muted, etc.)\n- Consider both light and dark mode from the start\n\n**Font Selection (Google Fonts):**\n```\nSans-serif: Inter, Roboto, Poppins, Montserrat, Outfit, Plus Jakarta Sans, DM Sans, Space Grotesk\nMonospace: JetBrains Mono, Fira Code, Source Code Pro, IBM Plex Mono, Space Mono, Geist Mono\nSerif: Merriweather, Playfair Display, Lora, Source Serif Pro, Libre Baskerville\nDisplay: Architects Daughter, Oxanium\n```\n\n**Spacing & Shadows:**\n- Use consistent spacing scale (0.25rem base)\n- Shadows should be subtle — avoid heavy drop shadows\n- Consider using oklch() for shadow colors too\n\n### 3. Theme Patterns\n\n**Modern Dark Mode (Vercel/Linear style):**\n```css\n:root {\n  --background: oklch(1 0 0);\n  --foreground: oklch(0.145 0 0);\n  --primary: oklch(0.205 0 0);\n  --primary-foreground: oklch(0.985 0 0);\n  --secondary: oklch(0.970 0 0);\n  --muted: oklch(0.970 0 0);\n  --muted-foreground: oklch(0.556 0 0);\n  --border: oklch(0.922 0 0);\n  --radius: 0.625rem;\n  --font-sans: Inter, system-ui, sans-serif;\n}\n```\n\n**Neo-Brutalism (90s web revival):**\n```css\n:root {\n  --background: oklch(1 0 0);\n  --foreground: oklch(0 0 0);\n  --primary: oklch(0.649 0.237 26.97);\n  --secondary: oklch(0.968 0.211 109.77);\n  --accent: oklch(0.564 0.241 260.82);\n  --border: oklch(0 0 0);\n  --radius: 0px;\n  --shadow: 4px 4px 0px 0px hsl(0 0% 0%);\n  --font-sans: DM Sans, sans-serif;\n  --font-mono: Space Mono, monospace;\n}\n```\n\n**Glassmorphism:**\n```css\n.glass {\n  background: rgba(255, 255, 255, 0.1);\n  backdrop-filter: blur(10px);\n  border: 1px solid rgba(255, 255, 255, 0.2);\n  border-radius: 1rem;\n}\n```\n\n### 4. Animation Guidelines\n\n**Micro-syntax for planning:**\n```\nbutton: 150ms [S1→0.95→1] press\nhover: 200ms [Y0→-2, shadow↗]\nfadeIn: 400ms ease-out [Y+20→0, α0→1]\nslideIn: 350ms ease-out [X-100→0, α0→1]\nbounce: 600ms [S0.95→1.05→1]\n```\n\n**Common patterns:**\n- Entry animations: 300-500ms, ease-out\n- Hover states: 150-200ms\n- Button press: 100-150ms\n- Page transitions: 300-400ms\n\n### 5. Implementation Rules\n\n**Tailwind CSS:**\n```html\n<!-- Import via CDN for prototypes -->\n<script src=\"https://cdn.tailwindcss.com\"></script>\n```\n\n**Flowbite (component library):**\n```html\n<link href=\"https://cdn.jsdelivr.net/npm/flowbite@2.0.0/dist/flowbite.min.css\" rel=\"stylesheet\">\n<script src=\"https://cdn.jsdelivr.net/npm/flowbite@2.0.0/dist/flowbite.min.js\"></script>\n```\n\n**Icons (Lucide):**\n```html\n<script src=\"https://unpkg.com/lucide@latest/dist/umd/lucide.min.js\"></script>\n<script>lucide.createIcons();</script>\n```\n\n**Images:**\n- Use real placeholder services: Unsplash, placehold.co\n- Never make up image URLs\n- Example: `https://images.unsplash.com/photo-xxx?w=800&h=600`\n\n### 6. Responsive Design\n\nAlways design mobile-first and responsive:\n\n```css\n/* Mobile first */\n.container { padding: 1rem; }\n\n/* Tablet */\n@media (min-width: 768px) {\n  .container { padding: 2rem; }\n}\n\n/* Desktop */\n@media (min-width: 1024px) {\n  .container { max-width: 1200px; margin: 0 auto; }\n}\n```\n\n### 7. Accessibility\n\n- Use semantic HTML (header, main, nav, section, article)\n- Include proper heading hierarchy (h1 → h2 → h3)\n- Add aria-labels to interactive elements\n- Ensure sufficient color contrast (4.5:1 minimum)\n- Support keyboard navigation\n\n### 8. Component Design Tips\n\n**Cards:**\n- Subtle shadows, not heavy drop shadows\n- Consistent padding (p-4 to p-6)\n- Hover state: slight lift + shadow increase\n\n**Buttons:**\n- Clear visual hierarchy (primary, secondary, ghost)\n- Adequate touch targets (min 44x44px)\n- Loading and disabled states\n\n**Forms:**\n- Clear labels above inputs\n- Visible focus states\n- Inline validation feedback\n- Adequate spacing between fields\n\n**Navigation:**\n- Sticky header for long pages\n- Clear active state indication\n- Mobile-friendly hamburger menu\n\n---\n\n## Quick Reference\n\n| Element | Recommendation |\n|---------|---------------|\n| Primary font | Inter, Outfit, DM Sans |\n| Code font | JetBrains Mono, Fira Code |\n| Border radius | 0.5rem - 1rem (modern), 0 (brutalist) |\n| Shadow | Subtle, 1-2 layers max |\n| Spacing | 4px base unit (0.25rem) |\n| Animation | 150-400ms, ease-out |\n| Colors | oklch() for modern, avoid generic blue |\n\n---\n\n*Based on SuperDesign patterns — https://superdesign.dev*\n","tags":{"latest":"1.0.0"},"stats":{"comments":1,"downloads":38521,"installsAllTime":337,"installsCurrent":337,"stars":184,"versions":1},"createdAt":1767719074735,"updatedAt":1778485729679},"latestVersion":{"version":"1.0.0","createdAt":1767719074735,"changelog":"Frontend design guidelines based on SuperDesign patterns","license":null},"metadata":{"setup":[],"os":null,"systems":null},"owner":{"handle":"mpociot","userId":"s170f0j0qrjftk5522nedp44qh884efe","displayName":"mpociot","image":"https://avatars.githubusercontent.com/u/804684?v=4"},"moderation":null}