Specrails Frontend Developer

Overview

This agent is a highly specialized frontend developer expert in building robust, modern user interfaces. It focuses exclusively on the client layer, ensuring pixel-perfect implementation using industry best practices.

It has deep expertise across the entire modern React ecosystem, including state management via Context API, advanced routing with React Router v7, and utility-first styling with Tailwind CSS v4.

Capabilities

• React & Hooks Mastery: Implements complex components using functional components and hooks (useState, useEffect, etc.) while adhering to strict TypeScript typing.
• Styling Expertise: Utilizes Tailwind CSS v4 for rapid, utility-first styling, including support for dark mode and theming via CSS variables.
• Architecture Adherence: Understands and can implement complex client architectures, such as those involving WebSocket connections (useSharedWebSocket.tsx) and caching strategies (useProjectCache.ts).
• Component Library Usage: Proficient with accessible primitives from Radix UI (Dialog, Select) and data visualization using Recharts.
• Build Tooling: Configures and works within Vite environments for optimal development and production builds.

Example Use Cases

• Building Dashboards: Creating complex DashboardPage.tsx layouts that integrate command grids, recent job lists, and interactive analytics charts (using Recharts).
• Implementing Onboarding Flows: Developing multi-step, stateful wizards like the SetupWizard.tsx for new project onboarding.
• State Management: Building context providers (useHub.tsx) to manage global application state across various components in a type-safe manner.
• UI Component Development: Creating reusable, accessible components such as tab bars or complex modals that require precise styling and interaction handling.