Awesome-omni-skill frontend-design

Tech Stack

• Next.js 14+ App Router
• TypeScript
• Tailwind CSS
• Mobile-first breakpoints (sm → md → lg → xl)

Mobile-First Rules

1. Default styles = mobile. No breakpoint prefix means phone.
2. Scale up:

   text-sm md:text-base lg:text-lg

3. Touch targets: Minimum 44x44px for interactive elements
4. Stack by default: Use

   flex-col

   then

   md:flex-row

5. Test at 375px width first, then 320px for edge cases
6. Thumb zones: Place primary actions in bottom 60% of screen

Low-Bandwidth & Emerging Markets

Design for users with slow 3G, data caps, and older devices.

Performance Budget

• First paint: Under 1.5s on 3G
• Total page weight: Under 500KB ideal, 1MB maximum
• JavaScript: Minimize client-side JS, prefer Server Components
• Images: Under 100KB each, use WebP/AVIF with fallbacks

Asset Optimization

1. Use Next.js

   <Image>

   — never raw

   <img>

   tags
2. Lazy load below-fold content —

   loading="lazy"

   or dynamic imports
3. Subset fonts — only characters you need, prefer

   font-display: swap

4. Compress aggressively — quality 75-80 is usually indistinguishable
5. Avoid decorative images — every image must earn its bytes

Code Splitting

1. Dynamic imports for routes/modules —

   next/dynamic

   with

   ssr: false

   when appropriate
2. Split by interaction — don't load modal code until modal opens
3. Analyze bundle — run

   next build

   and check chunk sizes regularly

Offline-Tolerant Patterns

1. localStorage for progress — save state so users can resume
2. Graceful degradation — app works if analytics/fonts fail to load
3. Optimistic UI — show success immediately, sync when possible
4. Cache static assets — configure proper Cache-Control headers

Reduce Third-Party Scripts

1. One analytics tool — not three
2. Defer non-critical scripts —

   strategy="lazyOnload"

   in next/script
3. Self-host when possible — fonts, icons, critical libraries
4. Audit regularly — each external script = potential failure point

Device Constraints

1. Older Android phones — test on Chrome DevTools throttling (4x CPU slowdown)
2. Limited RAM — avoid memory-heavy animations, large state objects
3. Small screens — some users still on 320px width devices
4. Touch-only — no hover states as primary interaction

Design Principles

Before coding, commit to a BOLD aesthetic direction:

• Tone: Pick one extreme—brutally minimal, maximalist, retro-futuristic, organic, luxury, playful, editorial, brutalist, art deco, soft/pastel, industrial
• Differentiation: What makes this UNFORGETTABLE?

Typography

• Choose distinctive fonts, never Inter/Arial/Roboto/system fonts
• Pair a display font with a refined body font
• Use Google Fonts or next/font for optimization
• For low-bandwidth: Consider system font stacks as fallback-first

Color & Theme

• Use CSS variables in globals.css
• Dominant color + sharp accent beats evenly-distributed palettes
• Commit to light OR dark, don't hedge
• High contrast — many users outdoors on dim screens

Motion

• CSS-only when possible
• One orchestrated page load > scattered micro-interactions
• Use

  animation-delay

  for staggered reveals
• Respect

  prefers-reduced-motion

  — some devices struggle with animations

Layout

• Unexpected compositions: asymmetry, overlap, grid-breaking
• Generous negative space OR controlled density
• Never center everything
• Single-column default — complexity only at larger breakpoints

File Structure

src/
  components/    # Reusable components
  app/           # Pages and layouts
  styles/        # Global CSS

Anti-Patterns (NEVER)

• Generic gradients on white backgrounds
• Cookie-cutter card layouts
• Predictable hero + 3-column features
• Space Grotesk (overused)
• Purple/blue tech gradients
• Heavy client-side rendering for static content
• Multiple analytics scripts loading synchronously
• Unoptimized images or raw

  <img>

  tags
• Assuming fast, stable internet