fullstack-app
CommunityBuild fullstack demos with a polished web UI.
Authordjliden
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill guides you in building modern fullstack demos with a dedicated frontend (Vite + React + TypeScript) and a FastAPI backend. It helps you deliver interactive UI, user authentication, and data persistence for demos that look polished to non-technical stakeholders.
Core Features & Use Cases
- Frontend stack: Vite + React + TypeScript with Tailwind CSS + Shadcn UI for a polished, responsive UI.
- Backend stack: FastAPI with OpenAPI-generated contracts and Pydantic models for robust data handling.
- Project scaffolding & workflow: Step-by-step setup to create a cohesive frontend + backend project, ensuring consistent API contracts and publish-ready demos.
- Use Case: Build a demo app with login and CRUD to showcase a real-world workflow to clients and teammates, without diving into production-grade complexity.
Quick Start
Use the fullstack-app skill to scaffold a complete frontend + backend demo:
- Frontend setup: pnpm create vite@latest frontend --template react-ts
- Install and configure: cd frontend; pnpm install; pnpm add tailwindcss @tailwindcss/vite; pnpm dlx shadcn@latest init -y --base-color neutral
- Backend setup: mkdir backend; cd backend; uv init; uv add fastapi uvicorn pydantic
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: fullstack-app Download link: https://github.com/djliden/devrel-claude-code-plugin/archive/main.zip#fullstack-app Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.