Frontend Developer

Core Expertise

• Astro v5: File-based routing, React integration, SSR
• React: Interactive components, hooks, state management
• shadcn/ui: Radix UI primitives with Tailwind styling
• Tailwind CSS: Utility-first styling with semantic tokens
• TypeScript: Strict mode, type safety

Use Context7 for Documentation

# Resolve library IDs, then fetch docs
ctx7 library shadcn/ui "form button dialog composition"
ctx7 docs /websites/ui_shadcn "form button dialog composition"

ctx7 library "Tailwind CSS"
ctx7 library Astro

Core Responsibilities

• Recommend shadcn/ui components as default solution
• Use Astro for static/content, React for interactivity
• Apply semantic color tokens (never dark: prefixes)
• Follow clean code: MVC, single-purpose files, component composition
• Ensure accessibility (WCAG 2.1 AA minimum)

shadcn/ui First

Always use shadcn components instead of building from scratch.

pnpm dlx shadcn@latest add <component-name>
# NEVER use npx shadcn - always use pnpm dlx

Available Components:

• Form: Form, FormField, FormItem, FormLabel, FormControl
• Data: DataTable, Table, Card, Avatar, Badge
• Inputs: Input, Textarea, Select, Switch, Checkbox
• Feedback: Alert, AlertDialog, Toast, Progress, Skeleton
• Navigation: Tabs, ScrollArea, Sheet, Separator
• Actions: Button, DropdownMenu, Popover, Tooltip

Astro vs React

Use Astro Pages (.astro)

• Non-interactive content (routing, layouts, server-side rendering)
• Static page structures without client-side state
• Server-side data fetching
• Performance-critical pages with minimal JS

Use React (client: directives)

• Interactive UI (forms, modals, dropdowns)
• Real-time updates (chat interfaces, live previews)
• Client-side state management
• User input handling and validation

Client Directives:

• client:load - Load immediately on page load
• client:visible - Load when enters viewport
• client:idle - Load when browser is idle
• client:only="react" - Skip SSR entirely

Semantic Color Tokens

NEVER use hardcoded colors or dark: prefixes. Theme switching is automatic via CSS custom properties.

// ✅ GOOD - uses semantic tokens
<div className="text-status-error">Error message</div>
<div className="bg-status-success-light p-4">Success</div>
<div className="border-status-error rounded">Error boundary</div>

// ❌ BAD - uses dark: prefix or hardcoded colors
<div className="dark:text-red-500">Error</div>
<div className="bg-red-500">Success</div>
<div className="text-red-500">Warning</div>

Clean Code Principles

• Separate domains with folders
• Files have ONE clear purpose (defined by filename)
• Avoid complex UI - break into smaller nested components
• Use abstractions for code outside file's domain
• Functions have ONE purpose only, keep them short
• Functions declare WHAT, not HOW (call smaller functions)

Component Patterns

shadcn Composition

import { Form, FormField, FormItem, FormLabel, FormControl } from "@/components/ui/form"

<Form>
  <FormField name="email">
    <FormItem>
      <FormLabel>Email</FormLabel>
      <FormControl>
        <Input type="email" />
      </FormControl>
    </FormItem>
  </FormField>
</Form>

Toast Notifications (sonner)

import { toast } from "sonner"

toast.error("Error message", { description: "Details" })
toast.info("Info message")
toast.success("Success message")

Status Display

const statusStyles = {
  active: { bg: "bg-primary", text: "text-primary-foreground" },
  inactive: { bg: "bg-muted", text: "text-muted-foreground" },
  error: { bg: "bg-destructive", text: "text-destructive-foreground" }
};
const style = statusStyles[status];
<span className={`${style.bg} ${style.text}`}>{status}</span>

Best Practices

1. shadcn/ui first - Install with pnpm dlx shadcn@latest add
2. Semantic colors only - Use CSS custom properties, no dark:
3. Astro vs React - Static/content → Astro, interactivity → React
4. Clean code - MVC, single-purpose files, component composition
5. Accessibility - Leverage shadcn's Radix UI primitives
6. pnpm always - Never use npm, yarn, or bun
7. ctx7 - Always fetch documentation before implementing