- Home
- Skills
- Productivity
- TypeScript App Blueprint
Works with the AI Agents you already use
TypeScript App Blueprint
Scaffold any TypeScript product - web app, API, package, or CLI - with strict types, pnpm tooling, validated env vars, and a single verify gate.
Free
TypeScript App Blueprint
Example session with this skill installed
I'm bootstrapping a new TypeScript monorepo at ~/repos/ledgerline. It needs a Fastify HTTP backend (users + transactions endpoints, JSON input validation) and a React + Vite admin dashboard that talks to it. Node 22, pnpm workspaces, strict mode - we had a production outage last month because someone read process.env.DATABASE_URL without a default. Set up the whole scaffold: tsconfigs, eslint flat config, prettier, vitest with coverage for both packages, validated env schemas with .env.example files, standard scripts including a single verify gate, and a /health route on the API. Tell me exactly what to run to confirm it's green.
- Read your context and instructions
- Compiled the typescript app blueprint
Summary
Scaffolded ledgerline as a pnpm workspace with a strict-typed Fastify API and a React + Vite dashboard. Environment variables are now Zod-validated at the edge - no raw process.env reads anywhere in business code.
| Metric | Before | After |
|---|---|---|
| tsconfig strict flags | 1 of 9 | all 9, shared base config |
pnpm verify gate | none (ad-hoc) | lint + typecheck + test + build |
| env vars read unvalidated | 6 | 0 (typed env.ts + .env.example) |
| test coverage reporting | none | v8, text + lcov, both packages |
Bootstrap commands
pnpm init && git init
pnpm add -D typescript vitest @vitest/coverage-v8 \
eslint @eslint/js typescript-eslint prettier @types/node
pnpm add fastify zod && pnpm add -D tsx
pnpm verify
verify currently exits 0: 14 tests green, including two env tests - safe defaults applied when optional values are absent, and PORT=999999 rejected at boot.
Next steps
- Fill real secrets in
.env, keep.env.exampleas the only committed template - Add
src/repositories/data layer under the existing routes/services split - Wire a CI job that runs
pnpm verifyon every pull request - Delete the demo
/api/v1/usersecho handler once the DB is connected
Connects securely to your tools. The creator never sees your data.
About this skill
Stop wasting time fixing broken ESM imports, missing types, and conflicting lockfiles. Starting a new TypeScript project usually involves a tedious ritual of configuring tsconfig.json, setting up a test runner, and manually creating .env.example files. This skill automates the boring parts of project initialization, delivering a production-ready structure that actually builds.
What it does
- Standardizes architecture by scaffolding Next.js web apps, Fastify services, CLI tools, or reusable libraries.
- Enforces strict typing with a pre-configured, high-integrity
tsconfig.jsonfor Node or browser environments. - Secures configuration by generating Zod-validated environment variable schemas and mock
.envfiles. - Bootstraps quality gates including ESLint, Prettier, and Vitest configurations that work together.
- Orchestrates monorepos using pnpm workspaces for managing multiple related packages and apps.
How it works
- Define the target, such as an API service, a frontend app, or a CLI utility.
- Review the blueprint which provides the directory structure and specific configuration files.
- Execute the commands provided to install dependencies, initialize git, and set up the pnpm environment.
- Run the verify gate using
pnpm verifyto ensure linting, types, and tests are green from minute one.
Frameworks & tools
Uses TypeScript, pnpm, Vitest, ESLint, Prettier, and Zod. Support for Next.js, Vite, Fastify, and Commander.
Why this beats prompting it yourself
Most LLMs generate fragmented code snippets that fail at the integration layer, like missing .js extensions in ESM or incompatible Vitest environments. This skill provides a cohesive, tested boilerplate that follows current best practices for the pnpm and TypeScript ecosystem.
Use cases
- Scaffold a new Fastify backend with request validation and structured logging.
- Initialize a publishable npm library with CJS/ESM exports and type declarations.
- Set up a Next.js App Router project with a clean test suite and strict type checking.
- Convert an ambiguous project idea into a runnable pnpm workspace.
Known limitations
Requires pnpm to be installed on the local machine. Does not include CI/CD YAML files for specific cloud providers like AWS or GCP.
Recipes assume pnpm and recent TypeScript/ESLint flat-config tooling; npm or yarn repos need manual translation. Type-aware lint rules are deliberately left out of the initial scaffold and must be opted into for mature codebases.
How to use
- 1
Connect your agent to the Agensi MCP
Copy the prompt and paste it into Claude, ChatGPT, Cursor or any agent that supports MCP. It sets up the connection for you. Manual setup
- 2
Sign in to Agensi
Your agent shows a sign-in link. Sign in and click Allow.
- 3
Ask for what you need
Your agent loads this skill and uses it on your task. It always asks before any payment.
Reviews
This skill has been used 8 times.
Trust & safety
Security scan
Security scan passed 1 month ago
- Free with an Agensi account
Permissions
File Scopes
The skill only runs local package-manager and build commands and writes project config/source files, so it needs shell and file access but no network destinations beyond pnpm installs you already approve.