# Frontend

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

- Skill: `majiayu000/frontend` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add majiayu000/frontend`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/frontend/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/frontend

---


# 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