bartstcCommunity·11 Agent Skills Included

vite-ts-react-template

Spec-driven React development, testing, and code quality workflows

Guides feature development in a React, TypeScript, and Vite codebase through spec writing, test-driven development, and typed building block patterns. Eliminates vague prompts, untested code, and inconsistent architecture by enforcing review gates and canonical patterns. Covers Playwright page objects, React performance rules, dependency updates, commits, and QA test planning.

121|12

↗

npx skills add bartstc/vite-ts-react-template --all -g -y

Available:

Tells the agent the project's stack, commands, and core working principles, and routes it to plan mode, spec-driven development, and verification steps before marking any task complete.

All Skills in This Repository (11)

Pure Emerald Level Indicators

📦 In Repo

bartstc

test-driven-development

Enforce the red-green-refactor cycle for tests before production code.

typescript-advanced-types

Resolve complex type-level problems in TypeScript with advanced types.

executing-plans

Execute written plans in review-driven batches with verification checkpoints.

react-useeffect

Identify and apply React useEffect best practices to avoid common pitfalls.

brainstorming

Clarify goals and constraints, then propose 2–3 design directions with trade-offs.

commit-work

Guide staging and draft Conventional Commits messages for logical Git commits.

dependency-updater

Detect project type and automate safe dependency updates across manifests.

writing-plans

Generate implementation plans with tasks, files, tests, docs, and commits.

github-actions-templates

Create and standardize GitHub Actions workflow templates for CI/CD tasks.

frontend-design

Create React components with bold aesthetics, accessible typography, and cohesive theming.

qa-test-planner

Generate QA test plans, cases, regression suites, and bug reports.

Community

Advanced

Frequently Asked Questions

FAQPage Schema

How to install vite-ts-react-template skills?▼

Run `npx skills add bartstc/vite-ts-react-template --all -g -y` in your terminal to install all skills in this suite globally.

What is spec-driven development?▼

It is a workflow where you write a short feature spec with requirements, design, and tasks before any code is written. The writing-spec skill guides the agent through four gated phases so implementation decisions are explicit and reviewed.

How does this template enforce test-driven development?▼

The test-driven-development skill requires a failing test before any production code, following the red-green-refactor cycle. Supporting skills add typed patterns for Storybook, Vitest, MSW handlers, and fixtures.

Does it work with Claude Code and other coding agents?▼

Yes. All skills follow the standard SKILL.md format and work in Claude Code, Cursor, and other compatible coding agents.

Can it help with React performance and E2E testing?▼

Yes. It includes Vercel's React performance rules, useEffect best practices, and Playwright page object patterns for maintainable end-to-end tests.