frontend

majiayu000's avatarfrom majiayu000

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

⭐5stars🔀1forks📁View on GitHub🕐Updated Jan 11, 2026
[Code Generation]

When & Why to Use This Skill

This Claude skill provides a comprehensive environment for modern frontend development, specializing in the React, Vite, and TailwindCSS stack. It streamlines the entire web development lifecycle—from scaffolding reusable UI components and managing complex page routing to implementing Supabase authentication and integrating backend APIs—ensuring high-quality code consistency and rapid deployment to Cloudflare Pages.

Use Cases

  • Rapid UI Development: Generate responsive and accessible React components using TailwindCSS utility classes to speed up the prototyping phase.
  • Authentication Integration: Implement secure user login, logout, and session management workflows using Supabase Auth with minimal manual configuration.
  • Dynamic Page Routing: Create new application pages with pre-configured routing logic and data-fetching patterns for seamless user navigation.
  • API Client Management: Set up and maintain a robust API client to handle data synchronization between the frontend interface and backend services.
  • Deployment & Environment Setup: Quickly configure local development environments on specific ports and prepare the codebase for production deployment on Cloudflare Pages.
namefrontend
descriptionReact + Vite + TailwindCSS frontend development in web/. Covers components, pages, routing, API client, Supabase auth, and Cloudflare Pages deployment. Port 5174 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