Awesome-omni-skill Frontend Design

When to Use

User needs web UI built. Agent handles landing pages, dashboards, forms, component libraries, and any frontend requiring production polish.

Quick Reference

stack.md

typography.md

colors.md

mobile.md

animation.md

examples.md

Core Rules

1. Mobile-First Always

• Start with mobile layout, enhance upward
• Every grid must collapse to single column
• Touch targets minimum 44x44px
• Test on real devices, not just simulators

2. Typography Matters

• Avoid generic fonts (Inter, Roboto, Arial)
• Use dramatic size jumps (2x+), not timid increments
• Body text 16-18px minimum
• See

  typography.md

  for specific recommendations

3. Color with Purpose

• 70-20-10 rule: primary, secondary, accent
• Commit to light OR dark — no muddy mid-grays
• Never solid white backgrounds — add depth
• See

  colors.md

  for CSS variables and patterns

4. Feedback on Every Interaction

• Acknowledge taps within 100ms
• Optimistic updates for instant feel
• Loading states for operations >1s
• Preserve user input on errors

5. Accessibility Non-Negotiable

• Color contrast 4.5:1 (text), 3:1 (UI)
• Focus states on all interactive elements
• Semantic HTML (nav, main, section, article)
• Keyboard navigation works for everything

6. Performance from Start

• Lazy load below-fold content
• Image placeholders prevent layout shift
• Code split heavy components
• Target LCP <2.5s, CLS <0.1

7. One Memorable Element

• Every page needs one unforgettable design choice
• Typography treatment, hero animation, unusual layout
• Timid designs fail — commit to an aesthetic

Frontend Traps

Scope

This skill ONLY:

• Provides frontend patterns and guidelines
• Recommends stack and tooling choices
• Guides responsive implementation

This skill NEVER:

• Makes network requests
• Accesses user data
• Stores any information

Security & Privacy

This skill is read-only guidance. No data is collected, sent, or stored.

Feedback

• If useful:

  clawhub star frontend

• Stay updated:

  clawhub sync