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