\r \r

Frontend Design Ultimate\r

\r Create distinctive, production-grade static sites from text requirements alone. No mockups, no Figma — just describe what you want and get bold, memorable designs.\r \r Cross-Framework Support: React 18 | Vue 3 | Nuxt 3 \r Styling: Tailwind CSS + shadcn/ui (or framework equivalents) \r Output: Vite (static HTML) or Framework-specific deployment\r \r

Quick Start\r

\r

"Build a SaaS landing page for an AI writing tool. Dark theme, \r
editorial typography, subtle grain texture. Use Vue 3. Pages: hero with \r
animated demo, features grid, pricing table, FAQ accordion, footer."\r
```\r
\r
---\r
\r
## Framework Selection Guide\r
\r
Choose the right framework for your project:\r
\r
| Framework | Best For | Deployment | Learning Curve |\r
|-----------|----------|------------|----------------|\r
| **React + Vite** | SPAs, interactive apps, React ecosystem | Static/CDN | Medium |\r
| **React + Next.js** | SEO-critical sites, SSR needed | Vercel/Node | Medium-High |\r
| **Vue 3 + Vite** | Progressive apps, easier learning curve | Static/CDN | Low |\r
| **Nuxt 3** | SEO-critical, full-stack Vue, SSR/SSG | Vercel/Netlify/Node | Low-Medium |\r
\r
### Quick Commands\r
\r
**TypeScript Versions (Original):**\r
```bash\r
# React + Vite (Pure Static)\r
bash scripts/init-vite.sh my-react-site\r
\r
# React + Next.js (Vercel Deploy)\r
bash scripts/init-nextjs.sh my-next-site\r
\r
# Vue 3 + Vite (Pure Static)\r
bash scripts/init-vue-vite.sh my-vue-site\r
\r
# Nuxt 3 (SSR/SSG)\r
bash scripts/init-nuxt.sh my-nuxt-site\r
```\r
\r
**JavaScript Versions (New - JavaScript Runtime Compatible):**\r
```bash\r
# React + Vite (Pure Static) - JavaScript\r
bash scripts/init-vite-js.sh my-react-site\r
\r
# React + Next.js (Vercel Deploy) - JavaScript\r
bash scripts/init-nextjs-js.sh my-next-site\r
\r
# Vue 3 + Vite (Pure Static) - JavaScript\r
bash scripts/init-vue-vite-js.sh my-vue-site\r
\r
# Nuxt 3 (SSR/SSG) - JavaScript\r
bash scripts/init-nuxt-js.sh my-nuxt-site\r
```\r
\r
> **Note**: JavaScript versions provide full compatibility with pure JavaScript runtimes while maintaining all original functionality, design patterns, and user experience.\r
\r
---\r
\r
## Design Thinking (Do This First)\r
\r
Before writing any code, commit to a **BOLD aesthetic direction**:\r
\r
### 1. Understand Context\r
- **Purpose**: What problem does this interface solve? Who uses it?\r
- **Audience**: Developer tools? Consumer app? Enterprise? Creative agency?\r
- **Constraints**: Performance requirements, accessibility needs, brand guidelines?\r
\r
### 2. Choose an Extreme Tone\r
Pick ONE and commit fully — timid designs fail:\r
\r
| Tone | Characteristics |\r
|------|-----------------|\r
| **Brutally Minimal** | Sparse, monochrome, massive typography, raw edges |\r
| **Maximalist Chaos** | Layered, dense, overlapping elements, controlled disorder |\r
| **Retro-Futuristic** | Neon accents, geometric shapes, CRT aesthetics |\r
| **Organic/Natural** | Soft curves, earth tones, hand-drawn elements |\r
| **Luxury/Refined** | Subtle animations, premium typography, restrained palette |\r
| **Editorial/Magazine** | Strong grid, dramatic headlines, whitespace as feature |\r
| **Brutalist/Raw** | Exposed structure, harsh contrasts, anti-design |\r
| **Art Deco/Geometric** | Gold accents, symmetry, ornate patterns |\r
| **Soft/Pastel** | Rounded corners, gentle gradients, friendly |\r
| **Industrial/Utilitarian** | Functional, monospace, data-dense |\r
\r
### 3. Define the Unforgettable Element\r
What's the ONE thing someone will remember? A hero animation? Typography treatment? Color combination? Unusual layout?\r
\r
---\r
\r
## Aesthetics Guidelines (Framework-Agnostic)\r
\r
These principles apply to ALL frameworks:\r
\r
### Typography — NEVER Generic\r
\r
**BANNED**: Inter, Roboto, Arial, system fonts, Open Sans\r
\r
**DO**: Distinctive, characterful choices that elevate the design.\r
\r
| Use Case | Approach |\r
|----------|----------|\r
| Display/Headlines | Bold personality — Clash, Cabinet Grotesk, Satoshi, Space Grotesk (sparingly), Playfair Display |\r
| Body Text | Refined readability — Instrument Sans, General Sans, Plus Jakarta Sans |\r
| Monospace/Code | DM Mono, JetBrains Mono, IBM Plex Mono |\r
| Pairing Strategy | Contrast weights (thin display + bold body), contrast styles (serif + geometric sans) |\r
\r
**Size Progression**: Use 3x+ jumps, not timid 1.5x increments.\r
\r
### Color & Theme\r
\r
**BANNED**: Purple gradients on white, evenly-distributed 5-color palettes\r
\r
**DO**:\r
- **Dominant + Sharp Accent**: 70-20-10 rule (primary-secondary-accent)\r
- **CSS Variables**: `--primary`, `--accent`, `--surface`, `--text`\r
- **Commit to dark OR light**: Don't hedge with gray middle-grounds\r
- **High contrast CTAs**: Buttons should pop dramatically\r
\r
```css\r
:root {\r
  --bg-primary: #0a0a0a;\r
  --bg-secondary: #141414;\r
  --text-primary: #fafafa;\r
  --text-secondary: #a1a1a1;\r
  --accent: #ff6b35;\r
  --accent-hover: #ff8555;\r
}\r
```\r
\r
### Motion & Animation\r
\r
**Priority**: One orchestrated page load > scattered micro-interactions\r
\r
**High-Impact Moments**:\r
- Staggered hero reveals (`animation-delay`)\r
- Scroll-triggered section entrances\r
- Hover states that surprise (scale, color shift, shadow depth)\r
- Smooth page transitions\r
\r
**Implementation by Framework**:\r
- **React**: Framer Motion (`motion.div`, `AnimatePresence`)\r
- **Vue 3**: @vueuse/motion (`v-motion`, `useMotion`)\r
- **Nuxt 3**: @vueuse/motion (auto-imported) or @nuxt/animations\r
\r
**Keep durations 200-400ms** (snappy, not sluggish)\r
\r
### Spatial Composition\r
\r
**BANNED**: Centered, symmetrical, predictable layouts\r
\r
**DO**:\r
- Asymmetry with purpose\r
- Overlapping elements\r
- Diagonal flow / grid-breaking\r
- Generous negative space OR controlled density (pick one)\r
- Off-grid hero sections\r
\r
### Backgrounds & Atmosphere\r
\r
**BANNED**: Solid white/gray backgrounds\r
\r
**DO**:\r
- Gradient meshes (subtle, not garish)\r
- Noise/grain textures (SVG filter or CSS)\r
- Geometric patterns (dots, lines, shapes)\r
- Layered transparencies\r
- Dramatic shadows for depth\r
- Blur effects for glassmorphism\r
\r
```css\r
/* Subtle grain overlay */\r
.grain::before {\r
  content: '';\r
  position: fixed;\r
  inset: 0;\r
  background: url("data:image/svg+xml,...") repeat;\r
  opacity: 0.03;\r
  pointer-events: none;\r
}\r
```\r
\r
---\r
\r
## Mobile-First Patterns (Framework-Agnostic)\r
\r
See **[references/mobile-patterns.md](references/mobile-patterns.md)** for detailed CSS.\r
\r
### Critical Rules\r
\r
| Pattern | Desktop | Mobile Fix |\r
|---------|---------|------------|\r
| Hero with hidden visual | 2-column grid | Switch to `display: flex` (not grid) |\r
| Large selection lists | Horizontal scroll | Accordion with category headers |\r
| Multi-column forms | Side-by-side | Stack vertically |\r
| Status/alert cards | Inline | `align-items: center` + `text-align: center` |\r
| Feature grids | 3-4 columns | Single column |\r
\r
### Breakpoints\r
\r
```css\r
/* Tablet - stack sidebars */\r
@media (max-width: 1200px) { }\r
\r
/* Mobile - full single column */\r
@media (max-width: 768px) { }\r
\r
/* Small mobile - compact spacing */\r
@media (max-width: 480px) { }\r
```\r
\r
### Font Scaling\r
\r
```css\r
@media (max-width: 768px) {\r
  .hero-title { font-size: 32px; }      /* from ~48px */\r
  .section-title { font-size: 24px; }   /* from ~32px */\r
  .section-subtitle { font-size: 14px; } /* from ~16px */\r
}\r
```\r
\r
---\r
\r
## Framework-Specific Workflows\r
\r
### Option A: React + Vite (Pure Static)\r
\r
```bash\r
# 1. Initialize\r
bash scripts/init-vite.sh my-site\r
cd my-site\r
\r
# 2. Develop\r
npm run dev\r
\r
# 3. Build static files\r
npm run build\r
# Output: dist/\r
\r
# 4. Bundle to single HTML (optional)\r
bash scripts/bundle-artifact.sh\r
# Output: bundle.html\r
```\r
\r
**Key Libraries**:\r
- `framer-motion` for animations\r
- `@radix-ui/react-*` for accessible components\r
- `lucide-react` for icons\r
\r
**Component Pattern** (React):\r
```tsx\r
import { motion } from 'framer-motion'\r
import { Button } from '@/components/ui/button'\r
\r
export function Hero() {\r
  return (\r
    \x3Cmotion.section\r
      initial={{ opacity: 0, y: 20 }}\r
      animate={{ opacity: 1, y: 0 }}\r
      transition={{ duration: 0.5 }}\r
    >\r
      \x3CButton size="lg">Get Started\x3C/Button>\r
    \x3C/motion.section>\r
  )\r
}\r
```\r
\r
### Option B: React + Next.js (Vercel Deploy)\r
\r
```bash\r
# 1. Initialize\r
bash scripts/init-nextjs.sh my-site\r
cd my-site\r
\r
# 2. Develop\r
npm run dev\r
\r
# 3. Deploy to Vercel\r
vercel\r
```\r
\r
**Next.js-Specific Features**:\r
- App Router (`app/` directory)\r
- Server Components (use `'use client'` for interactive parts)\r
- Image optimization (`next/image`)\r
- Metadata API for SEO\r
\r
**Component Pattern** (Next.js):\r
```tsx\r
'use client'\r
import { motion } from 'framer-motion'\r
import { Button } from '@/components/ui/button'\r
\r
export default function Hero() {\r
  return (\r
    \x3Cmotion.section\r
      initial={{ opacity: 0, y: 20 }}\r
      animate={{ opacity: 1, y: 0 }}\r
      transition={{ duration: 0.5 }}\r
    >\r
      \x3CButton size="lg">Get Started\x3C/Button>\r
    \x3C/motion.section>\r
  )\r
}\r
```\r
\r
### Option C: Vue 3 + Vite (Pure Static)\r
\r
```bash\r
# 1. Initialize\r
bash scripts/init-vue-vite.sh my-site\r
cd my-site\r
\r
# 2. Develop\r
npm run dev\r
\r
# 3. Build static files\r
npm run build\r
# Output: dist/\r
```\r
\r
**Key Libraries**:\r
- `@vueuse/motion` for animations\r
- `radix-vue` for accessible components\r
- `lucide-vue-next` for icons\r
- `shadcn-vue` for UI components\r
\r
**Component Pattern** (Vue 3):\r
```vue\r
\x3Cscript setup lang="ts">\r
import { Motion } from '@vueuse/motion'\r
import Button from '@/components/ui/Button.vue'\r
\x3C/script>\r
\r
\x3Ctemplate>\r
  \x3Csection\r
    v-motion\r
    :initial="{ opacity: 0, y: 20 }"\r
    :enter="{ opacity: 1, y: 0 }"\r
    :duration="500"\r
  >\r
    \x3CButton size="lg">Get Started\x3C/Button>\r
  \x3C/section>\r
\x3C/template>\r
```\r
\r
### Option D: Nuxt 3 (SSR/SSG)\r
\r
```bash\r
# 1. Initialize\r
bash scripts/init-nuxt.sh my-site\r
cd my-site\r
\r
# 2. Develop\r
npm run dev\r
\r
# 3. Generate static site\r
npm run generate\r
# Output: .output/public/\r
\r
# 4. Deploy\r
npx nuxi deploy\r
```\r
\r
**Nuxt-Specific Features**:\r
- File-based routing (`pages/`)\r
- Auto-imports (components, composables, utils)\r
- `@nuxt/ui` component library (UButton, UCard, etc.)\r
- Built-in SEO with `useHead()` and `useSeoMeta()`\r
\r
**Component Pattern** (Nuxt 3):\r
```vue\r
\x3Cscript setup lang="ts">\r
import { siteConfig } from '~/config/site'\r
\r
useHead({\r
  title: `${siteConfig.name} - ${siteConfig.tagline}`\r
})\r
\x3C/script>\r
\r
\x3Ctemplate>\r
  \x3Csection\r
    v-motion\r
    :initial="{ opacity: 0, y: 20 }"\r
    :enter="{ opacity: 1, y: 0 }"\r
  >\r
    \x3CUButton size="xl" :to="/signup">Get Started\x3C/UButton>\r
  \x3C/section>\r
\x3C/template>\r
```\r
\r
---\r
\r
## Project Structures\r
\r
### React + Vite\r
```\r
my-site/\r
├── src/\r
│   ├── components/     # React components (.tsx)\r
│   ├── lib/           # Utilities, cn()\r
│   ├── styles/        # Global CSS\r
│   ├── config/\r
│   │   └── site.ts    # Editable content config\r
│   ├── App.tsx\r
│   └── main.tsx\r
├── index.html\r
├── tailwind.config.ts\r
└── package.json\r
```\r
\r
### React + Next.js\r
```\r
my-site/\r
├── app/\r
│   ├── layout.tsx\r
│   ├── page.tsx\r
│   └── privacy/page.tsx\r
├── components/\r
├── lib/\r
├── config/\r
│   └── site.ts\r
└── tailwind.config.ts\r
```\r
\r
### Vue 3 + Vite\r
```\r
my-site/\r
├── src/\r
│   ├── components/     # Vue components (.vue)\r
│   │   └── ui/        # shadcn-vue components\r
│   ├── lib/           # Utilities, cn()\r
│   ├── assets/        # CSS, images\r
│   ├── plugins/       # Vue plugins\r
│   ├── config/\r
│   │   └── site.ts    # Editable content config\r
│   ├── App.vue\r
│   └── main.ts\r
├── index.html\r
├── tailwind.config.ts\r
└── package.json\r
```\r
\r
### Nuxt 3\r
```\r
my-site/\r
├── app.vue              # Root component\r
├── pages/               # File-based routing\r
│   └── index.vue\r
├── layouts/             # Layout components\r
│   └── default.vue\r
├── components/          # Auto-imported components\r
├── composables/         # Auto-imported composables\r
├── config/              # Site configuration\r
│   └── site.ts\r
├── assets/css/          # Global CSS\r
├── nuxt.config.ts\r
├── tailwind.config.ts\r
└── package.json\r
```\r
\r
---\r
\r
## Site Config Pattern (Universal)\r
\r
Keep all editable content in one file — works across all frameworks:\r
\r
```typescript\r
// config/site.ts (or ~/config/site.ts for Nuxt)\r
export const siteConfig = {\r
  name: "Acme AI",\r
  tagline: "Write better, faster",\r
  description: "AI-powered writing assistant",\r
  \r
  hero: {\r
    badge: "Now in beta",\r
    title: "Your words,\
supercharged",\r
    subtitle: "Write 10x faster with AI that understands your style",\r
    cta: { text: "Get Started", href: "/signup" },\r
    secondaryCta: { text: "Watch Demo", href: "#demo" },\r
  },\r
  \r
  features: [\r
    { icon: "Zap", title: "Lightning Fast", description: "..." },\r
    // ...\r
  ],\r
  \r
  pricing: [\r
    { name: "Free", price: 0, features: [...] },\r
    { name: "Pro", price: 19, features: [...], popular: true },\r
  ],\r
  \r
  faq: [\r
    { q: "How does it work?", a: "..." },\r
  ],\r
  \r
  footer: {\r
    links: [...],\r
    social: [...],\r
  }\r
}\r
```\r
\r
---\r
\r
## Component Library Mapping\r
\r
Each framework has its own component library with similar APIs:\r
\r
| Component | React (shadcn/ui) | Vue 3 (shadcn-vue) | Nuxt 3 (@nuxt/ui) |\r
|-----------|-------------------|---------------------|---------------------|\r
| Button | `\x3CButton>` | `\x3CButton />` | `\x3CUButton />` |\r
| Card | `\x3CCard>` | `\x3CCard />` | `\x3CUCard />` |\r
| Badge | `\x3CBadge>` | `\x3CBadge />` | `\x3CUBadge />` |\r
| Accordion | `\x3CAccordion>` | `\x3CAccordion />` | `\x3CUAccordion />` |\r
| Dialog/Modal | `\x3CDialog>` | `\x3CDialog />` | `\x3CUModal />` |\r
| Navigation | `\x3CNavigationMenu>` | `\x3CNavigationMenu />` | `\x3CUNavigationMenu />` |\r
| Tabs | `\x3CTabs>` | `\x3CTabs />` | `\x3CUTabs />` |\r
| Sheet/Drawer | `\x3CSheet>` | `\x3CSheet />` | `\x3CUSheet />` |\r
| Avatar | `\x3CAvatar>` | `\x3CAvatar />` | `\x3CUAvatar />` |\r
| Alert | `\x3CAlert>` | `\x3CAlert />` | `\x3CUAlert />` |\r
\r
**Installation by Framework**:\r
\r
```bash\r
# React\r
npx shadcn@latest add button card badge accordion dialog navigation-menu tabs sheet separator avatar alert\r
\r
# Vue 3\r
npx shadcn-vue@latest add button card badge accordion dialog navigation-menu tabs sheet separator avatar alert\r
\r
# Nuxt 3 (@nuxt/ui - auto-installed)\r
# All U* components are available automatically\r
```\r
\r
---\r
\r
## Animation Library Mapping\r
\r
| Feature | React (Framer Motion) | Vue 3 (@vueuse/motion) | Nuxt 3 (@vueuse/motion) |\r
|---------|----------------------|------------------------|--------------------------|\r
| Basic animation | `\x3Cmotion.div>` | `v-motion` directive | `v-motion` directive |\r
| Page transitions | `AnimatePresence` | `\x3CTransition>` | `\x3CTransition>` (built-in) |\r
| Scroll triggers | `whileInView` | `useScroll` composable | `useScroll` composable |\r
| Gestures | `whileHover`, `whileTap` | Event bindings | Event bindings |\r
| Stagger children | `staggerChildren` | Config-based | Config-based |\r
\r
### Cross-Framework Animation Example\r
\r
**React**:\r
```tsx\r
\x3Cmotion.div\r
  initial={{ opacity: 0, y: 20 }}\r
  whileInView={{ opacity: 1, y: 0 }}\r
  viewport={{ once: true }}\r
  transition={{ duration: 0.5 }}\r
>\r
  Content\r
\x3C/motion.div>\r
```\r
\r
**Vue 3**:\r
```vue\r
\x3Cdiv\r
  v-motion\r
  :initial="{ opacity: 0, y: 20 }"\r
  :enter="{ opacity: 1, y: 0 }"\r
  :duration="500"\r
>\r
  Content\r
\x3C/div>\r
```\r
\r
**Nuxt 3**:\r
```vue\r
\x3Cdiv\r
  v-motion\r
  :initial="{ opacity: 0, y: 20 }"\r
  :visible="{ opacity: 1, y: 0 }"\r
  :duration="500"\r
>\r
  Content\r
\x3C/div>\r
```\r
\r
---\r
\r
## Pre-Implementation Checklist\r
\r
Run this before finalizing any design:\r
\r
### Design Quality (Framework-Agnostic)\r
- [ ] Typography is distinctive (no Inter/Roboto/Arial)\r
- [ ] Color palette has clear dominant + accent (not evenly distributed)\r
- [ ] Background has atmosphere (not solid white/gray)\r
- [ ] At least one memorable/unforgettable element\r
- [ ] Animations are orchestrated (not scattered)\r
\r
### Mobile Responsiveness (Framework-Agnostic)\r
- [ ] Hero centers on mobile (no empty grid space)\r
- [ ] All grids collapse to single column\r
- [ ] Forms stack vertically\r
- [ ] Large lists use accordion (not horizontal scroll)\r
- [ ] Font sizes scale down appropriately\r
\r
### Form Consistency\r
- [ ] Input, select, textarea all styled consistently\r
- [ ] Radio/checkbox visible (check transparent-border styles)\r
- [ ] Dropdown options have readable backgrounds\r
- [ ] Labels use CSS variables (not hardcoded colors)\r
\r
### Accessibility\r
- [ ] Color contrast meets WCAG AA (4.5:1 text, 3:1 UI)\r
- [ ] Focus states visible\r
- [ ] Semantic HTML (nav, main, section, article)\r
- [ ] Alt text for images\r
- [ ] Keyboard navigation works\r
\r
### Framework-Specific\r
- [ ] Using correct component imports for chosen framework\r
- [ ] Animations use framework-appropriate library\r
- [ ] Build configuration matches target framework\r
- [ ] TypeScript types properly configured\r
\r
---\r
\r
## Cross-Framework Consistency Guarantees\r
\r
This skill ensures consistency across frameworks:\r
\r
✅ **Design System**: Same color variables, typography scale, spacing tokens  \r
✅ **Responsive Patterns**: Same mobile-first breakpoints and behaviors  \r
✅ **Animation Timing**: Same durations (200-400ms), easing functions  \r
✅ **Component APIs**: Similar props and event handling patterns  \r
✅ **File Organization**: Logical structure adapted per framework conventions  \r
✅ **Performance**: Optimized bundle sizes, lazy loading strategies  \r
\r
**What Adapts Per Framework**:\r
- Syntax (JSX vs Template)\r
- Import paths (@/ vs ~/ vs relative)\r
- Component names (PascalCase vs kebab-case)\r
- State management (useState vs ref/reactive)\r
- Lifecycle hooks (useEffect vs onMounted/watch)\r
- Routing (React Router vs Vue Router vs file-based)\r
\r
---\r
\r
## References\r
\r
- **[references/design-philosophy.md](references/design-philosophy.md)** — Extended anti-AI-slop guidance\r
- **[references/mobile-patterns.md](references/mobile-patterns.md)** — Detailed responsive CSS\r
- **[references/shadcn-components.md](references/shadcn-components.md)** — Component quick reference (React-focused)\r
- **[templates/site-config.ts](templates/site-config.ts)** — Full siteConfig example\r
- **Framework Guides**:\r
  - React: See init-vite.sh and init-nextjs.sh output\r
  - Vue 3: See init-vue-vite.sh output\r
  - Nuxt 3: See init-nuxt.sh output\r
\r
---\r
\r
## Examples\r
\r
### Prompt → Multi-Framework Output\r
\r
**Input**:\r
> "Portfolio site for a photographer. Minimal, editorial feel. \r
> Grid gallery with lightbox, about section, contact form."\r
\r
**Design Decisions** (Same for all frameworks):\r
- Tone: Editorial/Magazine\r
- Typography: Cormorant Garamond (display) + Plus Jakarta Sans (body)\r
- Color: Near-black bg (#0c0c0c), warm white text (#f5f5f0), copper accent (#b87333)\r
- Unforgettable: Full-bleed hero image with text overlay that reveals on scroll\r
- Motion: Gallery images fade in staggered on scroll\r
\r
**Output Options**:\r
- **React + Vite**: Complete Vite project with responsive gallery, lightbox component\r
- **React + Next.js**: Next.js App Router with image optimization\r
- **Vue 3 + Vite**: Vue 3 composition API with reactive gallery state\r
- **Nuxt 3**: Nuxt 3 with auto-imports, SEO metadata, static generation\r
\r
All outputs maintain identical visual design and user experience.\r
\r
---\r
\r
## Migration Guide\r
\r
### Converting Between Frameworks\r
\r
**React → Vue 3**:\r
- `useState` → `ref()` or `reactive()`\r
- `useEffect` → `onMounted()` + `watch()`\r
- JSX → Vue template syntax\r
- `className` → `class`\r
- `onClick` → `@click`\r
- `{variable}` → `{{ variable }}`\r
\r
**Vue 3 → Nuxt 3**:\r
- Move `src/` contents to root level\r
- Replace `vue-router` with `pages/` directory\r
- Replace manual imports with auto-imports\r
- Add `~/` alias for root imports\r
- Use `useHead()` instead of manual `\x3Chead>`\r
\r
**React → Nuxt 3**:\r
- Convert JSX to Vue templates\r
- Replace React hooks with Vue composition API\r
- Move to file-based routing\r
- Use Nuxt-specific modules (@nuxt/image, etc.)\r
\r
---\r
\r
*Based on Anthropic's frontend-design, web-artifacts-builder, and community frontend-design-v2 skills. Enhanced with cross-framework support for modern frontend development.*\r