Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx agentmods add skills/github/copilot-plugins/spark-app-templatenpx skills add github/copilot-plugins --skill spark-app-templategit clone --depth 1 https://github.com/github/copilot-pluginsWhat it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5 | $0.00072 | $0.03976 |
| Opus 5 | $0.00036 | $0.01988 |
| Sonnet 5 | $0.00014 | $0.00795 |
| Haiku 4.5 | $0.00007 | $0.00398 |
Grade A, and why
spark-app-template scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 2d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 491 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Spark App Template
Purpose
Spark App Template provides defaults and guidance for building web applications. When a user asks to build a web app, this skill provides the technical foundation and design direction to create functional applications.
When to Use This Skill
Activate Spark App Template when the user:
- Wants to build a new web application from scratch
- Asks "what stack should I use?"
- Needs guidance on design, styling, or tech choices
- Wants to start a dashboard, interactive tool, data app, or content site
- Requests help choosing between frameworks, libraries, or approaches
Quick Start Workflow
CRITICAL: Follow this exact order to avoid configuration errors:
- Create project:
pnpm create vite@latest my-app --template react-ts - Install base dependencies:
pnpm install - Configure TypeScript path aliases (tsconfig.json AND tsconfig.app.json - see Step 1 below)
- Install Tailwind and tooling:
pnpm add -D tailwindcss @tailwindcss/vite @biomejs/biome - Configure vite.config.ts: Add Tailwind plugin and path aliases
- Initialize shadcn:
pnpm dlx shadcn@latest init(will now succeed with proper aliases) - Install required shadcn components:
pnpm dlx shadcn add button card avatar ...(BEFORE writing components) - Install additional packages: TanStack Router, Query, Zustand, etc.
- Write custom components (NOW safe to import from
@/components/ui/*) - Configure routing and state management
- Implement features
Steps 3, 6, and 7 must happen in this exact order to avoid TypeScript errors and failed shadcn installations.
Complexity Levels
Understanding complexity helps choose the right stack variation and design approach:
-
Micro Tool (single-purpose)
- Examples: Calculator, converter, color picker, timer
- Stack:
stacks/default-webapp.md - Focus: Simple, focused UI with minimal state
-
Content Showcase (information-focused)
- Examples: Landing page, portfolio, blog, documentation
- Stack:
stacks/content-showcase.md - Focus: Typography, reading experience, visual hierarchy
What ships with it
11 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
- references/color-palettes.md 12 KB
- references/component-patterns.md 25 KB
- references/design-system.md 14 KB
- references/performance-checklist.md 13 KB
- references/prd-template.md 8.2 KB
- references/radix-migration-guide.md 7.1 KB
- references/typography-pairings.md 11 KB
- stacks/complex-application.md 22 KB
- stacks/content-showcase.md 11 KB
- stacks/data-dashboard.md 11 KB
- stacks/default-webapp.md 9.8 KB
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 2d ago First seen · 491 lines · 72 tokens per session scan A 9c402f3582e5
spark-app-template is a skill published in the GitHub repository github/copilot-plugins (344 stars, last pushed 7d ago), licensed MIT. It adds 72 tokens to every session and 3,976 once invoked, about $0.0004 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.
Other skills, from other repositories
systematic-debugging
Use when encountering any bug, test failure, or unexpected behavior, before proposing fixes.
next-cache-components-adoption
Turn on Cache Components in a Next.js app and resolve the blocking routes it surfaces. Use when the user wants to enable, adopt, or migrate to Cache Components, flip the cacheComponents flag, work through a flood of blocking-prerender / instant validation errors, run the cache-components-instant-false codemod, or…
babysit-pr
Babysit a GitHub pull request after creation by continuously polling review comments, CI checks/workflow runs, and mergeability state until the PR is merged/closed or user help is required. Diagnose failures, retry likely flaky failures up to 3 times, auto-fix/push branch-related issues when appropriate, and keep…
imagegen
Generate or edit raster images when the task benefits from AI-created bitmap visuals such as photos, illustrations, textures, sprites, mockups, or transparent-background cutouts. Use when Codex should create a brand-new image, transform an existing image, or derive visual variants from references, and the output…
cpu-profile-analysis
Analyze V8/Chrome CPU profiles (.cpuprofile) and DevTools trace files (Trace-.json). Use when: profiling performance, investigating slow functions, comparing code paths, finding bottlenecks, analyzing timeToRequest, understanding call trees from sampling profiler data, analyzing layout/paint/rendering, investigating…
next-cache-components-optimizer
Drive a Next.js route to instant navigation by setting up an agentic loop, under Cache Components / PPR, on initial load (hard navigation) and client-side navigation (soft navigation). Encode the goal as a failing @next/playwright instant() e2e and work it to green, one verified route at a time; the shipped test then…