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 2 stars 0 forks Updated today MIT

Install

View on GitHub

Quality Score: 81/100

Stars 20%
16
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
2 months ago
Last Updated
today
Language
Python
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 weeks ago
bgorkem
Web & Frontend Listed

design-md-to-app

Generate or customize a frontend application from a DESIGN.md (Google design.md spec). Reads the YAML tokens + markdown rationale and produces a working React app whose theme, typography, spacing, radii, and components are pre-styled to match. **Canonical target: Next.js 16 + App Router** (Pages Router or pre-16 explicitly refused). Supports four UI libraries: shadcn/ui (Tailwind + copy-pasted source), Base UI (Tailwind + headless library, no CLI overhead), MUI (runtime themed, Material-flavored), and Coss/UI (Cal.com design system on Base UI via the `@coss/*` shadcn registry, hands off to the `coss-ui` skill). Supports two form libraries: **TanStack Form + Zod (default, recommended)** or react-hook-form (opt-in). Integrates with the dev-flow contract: when a `.workflow/` exists, reads `meta.json#stack`, writes the app at the project root (alongside `.workflow/`), and bumps phase to `scaffolded`. Use whenever the user has a DESIGN.md and wants to scaffold an app, set up a theme, customize shadcn/Base UI/MUI f

4 Updated 2 days ago
lukedj78
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 3 days ago
paul80nd