Can I use this for an existing React project?

No, this skill is specifically designed for initializing new projects. Running it on an existing project may overwrite your current configuration files like vite.config.js or App.jsx.

Why is HTTPS required for this setup?

Modern browser security and Django session configurations often require HTTPS to handle secure cookies properly, even in a local development environment.

Does this skill provide user authentication logic?

It provides the infrastructure for authentication (Axios interceptors for CSRF and session headers), but you will still need to implement your specific login, logout, and registration logic.

What prerequisites do I need before running this skill?

You should have Node.js 18+ installed, a Django backend running with HTTPS, and mkcert certificates generated in a local /certs/ directory.

React-Django Frontend Setup

Name: React-Django Frontend Setup
Author: otoshek

byotoshek

0•

API Development

Initializes a production-ready React frontend using Vite, pre-configured for secure HTTPS communication and CSRF protection with Django backends.

This skill automates the complex setup required to connect a modern React frontend to a Django backend. It handles the scaffolding of a Vite-based project, configures secure local development with HTTPS certificates, implements robust CSRF token management for session-based authentication, and sets up a scalable routing structure with Axios interceptors. It is ideal for developers starting new full-stack projects who want to bypass the repetitive configuration of proxy servers, security headers, and API services, ensuring a secure connection between frontend and backend from day one.

Key Features

01Pre-configured HTTPS development environment using mkcert certificates

020 GitHub stars

03Scalable project architecture including layouts, routing, and centralized API configuration

04Integrated production build validation to ensure dependency and syntax integrity

05Automated React + Vite initialization with React Router and Axios dependencies

06Advanced CSRF token handling and automatic injection via Axios interceptors

Use Cases

01Starting a new React frontend specifically designed to consume a Django REST API using session authentication

02Standardizing project architecture for team-based React/Django full-stack development

03Setting up a secure local development environment that requires HTTPS for cookie-based security

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add otoshek/claude-code-toolkit react-setup

For use in Claude.ai and ChatGPT

Download Skill