skills.rest
lhz960904
lhz960904COMMUNITY
Explore all skills by this author →
GitHub

frontend-starter

Generate a Vite + React + TypeScript frontend template with Tailwind v3, shadcn/ui, TanStack Router/Query, and Zustand.

26|4|Updated Mar 28, 2026
Search Tags:#frontend#react#dashboard#vite#tailwindcss#tanstack router#ui scaffolding
One-click install
npx skills add https://github.com/lhz960904/code-artisan --skill frontend-starter
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-starter
Source: https://github.com/lhz960904/code-artisan/tree/main/sandbox-template/skills/frontend-starter
Command: npx skills add https://github.com/lhz960904/code-artisan --skill frontend-starter

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Speeding up frontend project kickoff by providing a ready-to-run, browser-only app scaffold tailored to common UI and dashboard style requests.

Core Features & Use Cases

  • Instant frontend scaffolding (Vite + React + TypeScript): Establishes a modern baseline for landing pages, dashboards, todo/note apps, and content sites without adding a server layer.
  • Pre-wired routing and data patterns: Uses TanStack Router for page structure and TanStack Query for async state, with Zustand for local state.
  • UI-ready design system: Includes shadcn/ui primitives and Tailwind v3 theming so you can iterate on interface quickly.
  • Platform preview workflow: Leverages the platform manifest and fixed dev server port (5173) to automatically boot and expose a preview.

Quick Start

Copy the template output provided by this skill and replace src/routes/index.tsx with the page you want, then describe your desired app in chat.

Frequently Asked Questions about frontend-starter

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I scaffold a React frontend with Vite and Tailwind CSS?▼

Scaffold a React frontend with Vite and Tailwind CSS by generating a production-ready template that pre-wires TypeScript, shadcn/ui primitives, and a fixed 5173 dev server workflow. You replace src/routes/index.tsx and describe your app in chat to iterate.

Can I use TanStack Router and TanStack Query in a Vite React dashboard?▼

Yes, you can use TanStack Router and TanStack Query in a Vite React dashboard. The generated template pre-wires TanStack Router for page structure and TanStack Query for async state, alongside Zustand for local client-side state management.

Does this frontend starter include backend API code or server-side routing?▼

No, this frontend starter does not include backend API code or server-side routing. It establishes a browser-only app scaffold designed for UI-centric apps and dashboards without adding a server layer or hidden API keys.

What is the best way to generate a UI-ready React template for landing pages?▼

The best way to generate a UI-ready React template for landing pages is to use a scaffold that integrates Tailwind v3 theming and shadcn/ui primitives. This provides a pre-configured design system so you can iterate on interface components quickly.

How do I preview a Vite React app on a fixed port during development?▼

You preview a Vite React app on a fixed port during development by leveraging the platform manifest that automatically boots the dev server. The template uses a fixed 5173 port to expose and run the browser preview seamlessly.

When should I not use a frontend-only React scaffold for my web app?▼

You should not use a frontend-only React scaffold when your web app requires server-side logic, hidden API keys, or backend data fetching. This template is strictly browser-based and lacks server code to secure backend operations.

Related Skills

Explore More Software Engineering Skills→
twillcockstwillcocks

portal-setup

Initialize a Showpane workspace by installing dependencies and applying the SQLite Prisma schema.

Community
Advanced
BellaBeBellaBe
37

frontend-api-connector

Generate typed API clients connecting Next.js App Router pages to backend endpoints with loading and error states.

Community
Advanced
docaohieu2808docaohieu2808

ui-styling

Style user interfaces with shadcn/ui components and Tailwind CSS.

Community
Intermediate
act70255act70255

nextjs-app-router-patterns

Provide Next.js 14+ App Router patterns for server-side rendering and streaming.

Community
Advanced