spark-app-template

Scaffold a Vite React TypeScript app with Tailwind CSS and shadcn UI.

4|1|Updated Feb 19, 2026

Search Tags:#typescript #template #react #vite #tailwind #shadcn #web

Ready to run

npx skills add https://github.com/billlzzz26/visual-story-extension --skill spark-app-template

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: spark-app-template
Source: https://github.com/billlzzz26/visual-story-extension/tree/main/.github/plugins/spark/skills/spark-app-template
Command: npx skills add https://github.com/billlzzz26/visual-story-extension --skill spark-app-template

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Developers often spend excessive time configuring project scaffolds, choosing tech stacks, and ensuring design consistency for new web applications.

Core Features & Use Cases

Opinionated Stack: Sets up Vite, React 19+, TypeScript, Tailwind CSS, and shadcn/ui with proper path aliases.
Guided Workflow: Provides a step‑by‑step order for project creation, component installation, and routing setup to avoid configuration errors.
Design & Performance: Enforces OKLCH colors, accessibility contrasts, and Core Web Vitals targets for production‑ready apps.
Use Cases: Ideal for building dashboards, data tools, content sites, or any interactive web interface where a reliable foundation and design system are needed.

Quick Start

Use the spark app template skill to create a new Vite React TypeScript project configured with Tailwind and shadcn UI.

Frequently Asked Questions about spark-app-template

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

FAQPage Schema

How do I scaffold a Vite React TypeScript app with Tailwind and shadcn?▼

Scaffold a Vite React TypeScript app with Tailwind and shadcn using a guided workflow that configures project creation, component installation, and routing setup to avoid configuration errors. It provides opinionated defaults for immediate development.

What is the best way to set up TypeScript path aliases for a React dashboard?▼

Set up TypeScript path aliases for a React dashboard by applying an opinionated stack configuration that pre-configures Vite, React 19+, Tailwind CSS, and shadcn/ui. This ensures proper module resolution and design system consistency from the start.

Can I use this Vite React template for data visualization projects?▼

Yes, you can use this Vite React template for data visualization projects. It is specifically designed for building dashboards, data tools, and content sites, providing a reliable foundation with an integrated design system and interactive web interface support.

Does this React scaffold enforce accessibility contrast and Core Web Vitals?▼

Yes, this React scaffold enforces accessibility contrast and Core Web Vitals targets by applying OKLCH color standards and performance guidelines. It ensures production-ready apps meet modern web performance and accessibility requirements immediately.

What are the limitations of using an opinionated React stack for web development?▼

The limitation of using an opinionated React stack is that it enforces specific choices like Vite, React 19+, Tailwind CSS, and shadcn/ui. Developers needing alternative frameworks or custom design architectures may find these defaults restrictive for non-standard projects.