Frontend Design

Frontend Design Skill

Philosophy: Intentional Minimalism. Every element must earn its place.

Tech Stack

React Performance Patterns (Vercel)

Priority 1: Eliminating Waterfalls (CRITICAL)

// ❌ Sequential waterfalls
const user = await getUser();
const posts = await getPosts();

// ✅ Parallel fetching
const [user, posts] = await Promise.all([getUser(), getPosts()]);

Priority 2: Bundle Optimization (CRITICAL)

// ❌ Barrel import
import { Button, Card, Modal } from "@/components";

// ✅ Direct imports
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";

Priority 3: Component Boundaries (HIGH)

// ❌ Client boundary too high
"use client"
export function Page() { ... } // Entire page is client

// ✅ Client boundary at leaf
export function Page() {
  return <Layout><InteractiveButton /></Layout> // Only button is client
}

Web Design Standards (Vercel)

Accessibility

Animation

Forms

Typography

AI Prototyping Tools

Stitch (Google Gemini)

Generate UI prototypes from text prompts via MCP.

workflow:
  1. Create project: mcp_stitch_create_project
  2. Generate screen: mcp_stitch_generate_screen_from_text
     - Use GEMINI_3_PRO for high fidelity
     - Include design system colors in prompt
  3. Handle output_components (suggestions or code)
  4. Adapt to Tailwind v4 + shadcn/ui

prompt_template: |
  Create a [component type] for [purpose].
  Style: {from ui-ux-pro-max palette}
  Layout: [specific grid/flex requirements]
  Features: [interactive elements needed]

Nano Banana Pro (Image Generation)

Generate assets using Gemini 3.0 Pro via generate_image tool.

usage:
  - High-fidelity placeholders and mockups
  - UI illustrations and icons
  - Background patterns and gradients

best_practices:
  - Be specific about style, colors, dimensions
  - Reference design system palette
  - Request "clean, minimal, professional" for UI assets

Quick Reference

Component Checklist

• Uses shadcn/ui primitives (not custom buttons/modals)
• Client boundary at lowest possible level
• Parallel data fetching where applicable
• Visible focus states
• Respects prefers-reduced-motion
• Form inputs have autocomplete and name

Import Pattern

// UI Components
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";

// Hooks
import { useState, useEffect } from "react";
import { trpc } from "@/lib/trpc";