scaffold-ui
CommunityScaffold a themed Next.js UI in one go.
Authormdnaimul22
Version1.0.0
Installs0
System Documentation
What problem does it solve?
Building a polished frontend scaffold from scratch takes time and causes inconsistency, especially when you need both a UI framework setup and a design system that can be themed quickly.
Core Features & Use Cases
- Instant Next.js + shadcn/ui frontend scaffolding: Creates a ready-to-run
web/app using Next.js (App Router), TypeScript, Tailwind, and a curated set of shadcn/ui components (layout + UI building blocks). - Prebuilt app shell with real navigation patterns: Includes dashboard layout structure with sidebar + navbar wrappers, plus auth page layouts (centered card style with no sidebar/navbar).
- Theme system with 9 built-in themes and optional AI custom theme: Supports multiple dark/light themes out of the box, and can inject an AI-generated custom theme into
globals.csswith font pairing and Google Fonts wiring. - Secure FastAPI API client + OpenAPI-to-TypeScript workflow: Adds a typed API fetch helper for cookie-based auth and a script to generate TypeScript types from FastAPI OpenAPI.
Quick Start
Tell the AI: scaffold-ui a Next.js + shadcn/ui frontend into the project directory at /path/to/project with the default theme.
Dependency Matrix
Required Modules
create-next-appshadcn-cliopenapi-typescriptnext-themeszustand
Components
scriptsassets
💻 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: scaffold-ui Download link: https://github.com/mdnaimul22/human-skills/archive/main.zip#scaffold-ui 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.