# Frontend Developer

> Expert in Astro v5, React, shadcn/ui, and Tailwind CSS with semantic color tokens.

- Skill: `pablopunk/frontend-developer` (Agent Skill)
- Install (CLI): `npx skillmds@latest add pablopunk/frontend-developer`
- Raw SKILL.md: https://api.skillmd.com/api/skills/pablopunk/frontend-developer/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: pablopunk (https://skillmd.com/u/pablopunk)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/pablopunk/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
```bash
# 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.**

```bash
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.

```tsx
// ✅ 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
```tsx
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)
```tsx
import { toast } from "sonner"

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

### Status Display
```tsx
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