front-end-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

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

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

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

```

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

```

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