Next.js Frontend Development

When to Use This Skill

Activate this skill when working on frontend tasks in packages/nextjs/:

• •Creating or modifying React components
• •Styling with Tailwind CSS
• •Building new pages or layouts
• •Implementing animations and interactions
• •Working with UI/UX improvements

Project Context

SplitHub is a tap-to-pay bill splitting app. The frontend should feel:

• •Instant & Responsive — NFC tap interactions need snappy feedback
• •Trustworthy — Financial app requires clean, confident design
• •Effortless — Hide complexity, make payments feel magical

Aesthetic Guidelines

Avoid "AI Slop"

Generic AI-generated designs are immediately recognizable. Avoid:

• •Overused fonts: Inter, Roboto, Open Sans, Lato, system fonts
• •Cliché color schemes: purple gradients on white backgrounds
• •Predictable layouts and cookie-cutter component patterns
• •Space Grotesk (overused in AI outputs)

Make creative, distinctive choices that surprise and delight.

Typography

Typography signals quality instantly. Use distinctive fonts from Google Fonts.

Good choices:

• •Code aesthetic: JetBrains Mono, Fira Code
• •Editorial: Playfair Display, Crimson Pro
• •Technical: IBM Plex family, Source Sans 3
• •Distinctive: Bricolage Grotesque, Newsreader, Syne, Outfit, Archivo

Pairing principles:

• •High contrast = interesting (display + monospace, serif + geometric sans)
• •Use weight extremes: 100/200 vs 800/900, not 400 vs 600
• •Size jumps of 3x+, not 1.5x

Load fonts via next/font/google in layout files.

Color & Theme

• •Commit to a cohesive aesthetic with CSS variables
• •Dominant colors with sharp accents > timid, evenly-distributed palettes
• •Draw inspiration from IDE themes, cultural aesthetics, or unexpected sources
• •Dark themes work well for financial/tech apps

Motion & Animation

• •Use framer-motion (available as motion in this project) for React animations
• •Focus on high-impact moments: orchestrated page loads with staggered reveals
• •One well-designed animation-delay sequence > scattered micro-interactions
• •CSS transitions for simple hover/focus states
• •Provide tactile feedback for NFC tap interactions

Backgrounds & Depth

Create atmosphere rather than defaulting to solid colors:

• •Layer CSS gradients
• •Subtle geometric patterns
• •Contextual effects matching the aesthetic
• •Use opacity and blur for depth

Technical Stack

• •Framework: Next.js 15 with App Router
• •Styling: Tailwind CSS
• •Animation: Framer Motion (motion)
• •Fonts: next/font/google
• •Path alias: ~~/* resolves to packages/nextjs/

Component Locations

packages/nextjs/
├── app/                    # Pages (App Router)
├── components/
│   ├── settle/            # Payment flow UI
│   ├── credits/           # POS terminal UI
│   ├── activity/          # Activity/receipt UI
│   ├── expense/           # Expense forms
│   ├── home/              # Dashboard components
│   └── scaffold-eth/      # Wallet components
├── hooks/                  # Custom React hooks
└── services/              # API/data services

Implementation Checklist

When creating frontend components:

1. • Check existing components in packages/nextjs/components/ for patterns
2. • Use distinctive typography (never Inter/Roboto)
3. • Apply consistent color theme via CSS variables or Tailwind config
4. • Add purposeful animations for key interactions
5. • Ensure mobile-first responsive design
6. • Provide loading/error states with visual feedback
7. • Test NFC-related flows feel instant and satisfying