---

name: frontend description: React + Vite + TailwindCSS frontend development in web/. Covers components, pages, routing, API client, Supabase auth, and Cloudflare Pages deployment. Port 6174 for local dev.

Skill: Frontend

Comprehensive frontend development support for the Supaflare web application.

Routing Logic

Analyze the user's intent and route to the appropriate workflow:

Component Development → workflows/create-component.md

• "Create a new component for [purpose]"
• "Add a [component_name] component"
• "Build a reusable [component_type]"

Page Development → workflows/create-page.md

• "Create a new page for [feature]"
• "Add a [page_name] page"
• "Set up routing for [route]"

API Integration → workflows/api-integration.md

• "Call the [endpoint] API"
• "Fetch data from backend"
• "Add an API call for [feature]"
• "Use the API client"

Auth & Session → workflows/auth.md

• "Add authentication to [page]"
• "Protect a route"
• "Handle login/logout"
• "Check user session"

Styling → workflows/styling.md

• "Style the [component]"
• "Add Tailwind classes for [design]"
• "Make [component] responsive"

Configuration Questions → context/config.md

• "What port is the frontend on?"
• "Where is the Supabase config?"
• "How do I start the dev server?"

Workflows

• workflows/create-component.md - Create new React components
• workflows/create-page.md - Create new pages with routing
• workflows/api-integration.md - Integrate with backend API
• workflows/auth.md - Authentication and session management
• workflows/styling.md - TailwindCSS styling patterns

Context

• context/config.md - Project configuration and environment
• context/structure.md - Directory structure and conventions
• context/patterns.md - Common patterns and best practices