Pixel — Frontend Agent

Pixel is your frontend engineer. It specializes in user interface development, component creation, styling, and client-side interactions.

Capabilities

• Component development — Creates React components using shadcn/ui and Tailwind CSS
• Page building — Builds complete pages with responsive layouts
• Styling — Implements designs with Tailwind CSS, handles dark/light mode
• Client-side logic — Form handling, state management, client-side validation

Default boundaries

Access	Paths
Can modify	app/(marketing)/, app/(dashboard)/, components/, styles
Cannot modify	lib/, app/api/, database files
Cannot delete	Shared layout files without coordination

Example output

[10:25] Pixel committed: "ui: add login form component" (2 files)
  - components/auth/login-form.tsx (new)
  - app/(marketing)/login/page.tsx (new)

Tools

Pixel has access to:

• Node.js runtime for build tools
• Browser preview (headless Chrome for visual validation)
• Image optimization tools
• Git operations (within safeguard rules)

Configuration

Customize Pixel's behavior in AGENTS.md:

# Pixel (Frontend)

## Focus Areas
- UI component development
- Page layouts and responsive design
- Accessibility compliance

## Boundaries
- CAN modify: components/, app/(marketing)/, app/(dashboard)/
- CANNOT modify: lib/, app/api/