|
| 1 | +# Spark |
| 2 | + |
| 3 | +Comprehensive guidance for building modern web applications with opinionated defaults for tech stack, design system, and code standards. |
| 4 | + |
| 5 | +## What it does |
| 6 | + |
| 7 | +Spark helps you quickly bootstrap high-quality web applications by providing: |
| 8 | + |
| 9 | +- Pre-vetted technology stack choices with multiple complexity-based variations |
| 10 | +- An opinionated design philosophy and system |
| 11 | +- Step-by-step setup workflows |
| 12 | +- Design and performance optimization guidance |
| 13 | + |
| 14 | +## Skills |
| 15 | + |
| 16 | +### `spark-app-template` |
| 17 | + |
| 18 | +Activated when a user wants to create a new web application, dashboard, or interactive interface. Provides guidance on: |
| 19 | + |
| 20 | +- **Tech stack** — Vite, React 19+, TypeScript, Tailwind CSS v4+, shadcn/ui, TanStack Router & Query |
| 21 | +- **Design system** — Typography pairings, OKLCH color palettes, spatial composition, micro-interactions |
| 22 | +- **Stack variations** — Pre-configured stacks tailored to app complexity (default web app, content showcase, data dashboard, complex application) |
| 23 | +- **Performance** — Core Web Vitals targets, React Compiler setup, optimization checklists |
| 24 | +- **Component patterns** — Common shadcn compositions and usage patterns |
| 25 | + |
| 26 | +## Stack variations |
| 27 | + |
| 28 | +| Stack | Use case | |
| 29 | +| --- | --- | |
| 30 | +| **Default Web App** | General-purpose tools, utilities, simple CRUD, MVPs, prototypes | |
| 31 | +| **Content Showcase** | Marketing sites, portfolios, blogs, documentation | |
| 32 | +| **Data Dashboard** | Analytics dashboards, admin panels, BI tools, monitoring | |
| 33 | +| **Complex Application** | SaaS platforms, enterprise tools, multi-view apps | |
0 commit comments