fastreact

Solid

Scaffold and build a full-stack web app: FastAPI backend (Python, uv, SQLModel, Postgres, Alembic, JWT + Google OAuth, boto3/S3) + React frontend (Vite, TypeScript, shadcn/ui + Tailwind, TanStack Router/Query/Table, Zod, Axios), wired with Docker Compose. Use this skill whenever the user wants to spin up, bootstrap, create, or design a new full-stack webapp; an API-first backend + SPA frontend; an admin/portal/dashboard app; file upload + S3; RBAC / role-based auth with seeded test users; local docker dev; or asks for a 'FastAPI + React' / 'Python + React' project. Runs mockup-first: marketing-design (brand/logo raster) + opendesign (HTML page mockups) before code, then ports the design to Tailwind/shadcn. Covers project structure, local setup, auth/RBAC, S3 uploads, and the gotchas that break these stacks.

Web & Frontend 7 stars 0 forks Updated today MIT

Install

View on GitHub

Quality Score: 84/100

Stars 20%
30
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
80
License 10%
100
Description 5%
100

Skill Content

# fastreact - FastAPI + React full-stack webapp Build a production-shaped full-stack web app from a mockup to a running Docker Compose stack. **Backend:** FastAPI, uv, SQLModel, Postgres, Alembic, JWT + Google OAuth, boto3 (S3). **Frontend:** Vite, React, TypeScript, shadcn/ui + Tailwind, TanStack Router (file-based) / Query / Table, Zod, Axios. **Infra:** Docker Compose (postgres + backend + frontend), seeded test users, agent-browser E2E. ## When to use - "Spin up / bootstrap / create a full-stack webapp", "FastAPI + React", "Python backend + React frontend". - An admin panel, client portal, dashboard, or internal tool with auth + RBAC + file upload + S3. - API-first backend with a typed SPA; local docker dev with seeded users. ## Scope This skill handles scaffolding, conventions, and local setup for a FastAPI+React+Postgres+S3 webapp. It does NOT: deploy to cloud, generate raster brand art itself (delegates to `vd:marketing-design`), or design HTML pages itself (delegates to `vd:opendesign`). For pure UI-token/Tailwind work use `vd:uiuxdesign`. Never put secrets in tracked files; always a gitignored `.env`. ## Workflow (numbered) ### 1. Mockup first (design before code) Lock the look before writing app code. Save artifacts under the injected `Visuals:` path (fall back to a temp dir only when no `Visuals:` path was injected) in a `mockup-{ts}-{app-slug}/` subdir, where `{app-slug}` is a kebab-case name for the app/feature. 1. **Brand/logo (raster):** use `marketing-des...

Details

Author
vanducng
Repository
vanducng/skills
Created
4 months ago
Last Updated
today
Language
HTML
License
MIT

Integrates with

Bundled in these plugins

Similar Skills

Semantically similar based on skill content — not just same category

Web & Frontend Listed

react-frontend

Build responsive, client-side React single-page web apps (SPA) with Vite, TypeScript, and Tailwind CSS, designed for both mobile and desktop browsers. Use when creating or editing a React SPA, a component, a hook, a page/route, responsive layouts, or browser UI. This skill is for CLIENT-SIDE SPAs ONLY — no server-side rendering. Enforces React best practices, the Rules of Hooks, strict TypeScript, ESLint React rules, and SOLID principles. Triggers: "react component", "build a website/UI", "responsive design", "tailwind", "SPA", "custom hook", "react page/screen", "react-router".

4 Updated 1 months ago
bgorkem
Web & Frontend Listed

nextjs-bootstrap

Scaffold a new production-grade Next.js (App Router) + TypeScript + Tailwind + shadcn/ui frontend from scratch, wired to a separate API backend (e.g. Express) via a BFF proxy, with axios, Zod, TanStack Query, and React Hook Form. Use this whenever the user wants to start a new Next.js / React frontend, bootstrap a web client/UI, set up a shadcn starter, or initialize a frontend project — even if they only say "new frontend", "Next.js starter", "React app", "admin dashboard UI", or name the stack loosely. It scaffolds the infrastructure ONCE per project and emits the two source-of-truth files (ARCHITECTURE.md and MODULE_REGISTRY.md) that module-planner, module-builder, test-writer, and code-review depend on. Do NOT use this to add a feature/page to an existing project (that is module-planner + module-builder) or to write tests. This scaffolds a Next.js + React frontend specifically — do NOT use it to bootstrap a backend/API (that is express-ts-bootstrap) or projects in other frontend stacks (Vite/CRA/Remix/Vue

0 Updated 1 months ago
vipincode
Web & Frontend Listed

forkast-design

Use this skill to generate well-branded interfaces and assets for Forkast — the local-first meal planner — either for production or throwaway prototypes/mocks. Contains the Fresh Organic design guidelines, colour/type/spacing tokens, fonts, assets, and a UI-kit of React components for prototyping the app's screens (Browse, Recipe, Curate, Plan, Shop).

0 Updated 2 days ago
paul80nd