What is the recommended workflow for API integration?

The skill enforces an OpenAPI contract approach: build the FastAPI backend first with Pydantic models, then reference the auto-generated spec to build frontend types.

When should I use this skill over Streamlit?

Use this skill when you need user authentication, persistent CRUD operations, high UI responsiveness, or a polished look using custom Shadcn UI components.

Which package managers are used by this skill?

The setup utilizes pnpm for frontend JavaScript packages and uv for high-performance Python backend dependency management.

How does this skill handle Tailwind CSS setup?

It implements Tailwind CSS v4 via the Vite plugin, replacing standard CSS imports and avoiding unnecessary configuration files for a cleaner setup.

Fullstack App Architect (Vite + FastAPI)

Name: Fullstack App Architect (Vite + FastAPI)
Author: djliden

bydjliden

0•

API Development

Builds high-performance fullstack applications using a Vite-React frontend, FastAPI backend, and type-safe OpenAPI contracts.

This skill streamlines the development of modern web applications by providing a standardized blueprint for Vite (React/TypeScript) and FastAPI stacks. It automates complex configuration tasks, such as Tailwind CSS v4 integration and Shadcn UI setup, while enforcing an OpenAPI-driven development workflow. Ideal for developers moving beyond simple read-only tools, it ensures responsive UIs, robust backend logic, and seamless data persistence for both internal tools and professional stakeholder demos.

Key Features

01Tailwind CSS v4 and Shadcn UI automated configuration

02Best practices for business logic separation and state management

03Standardized OpenAPI-first development workflow for type safety

04Pre-configured CORS and Vite proxy setup for seamless communication

05Rapid scaffolding for Vite (React/TS) and FastAPI projects

060 GitHub stars

Use Cases

01Transitioning read-only Streamlit apps to interactive full-featured web applications

02Building polished product demos with high-quality Shadcn UI components

03Creating production-grade internal tools requiring authentication and persistent storage

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add djliden/devrel-claude-code-plugin fullstack-app

For use in Claude.ai and ChatGPT

Download Skill