fastreact
SolidScaffold 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.
Install
Quality Score: 84/100
Skill Content
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
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".
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
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).