scaffold-ui

Community

Scaffold 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.css with 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.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.