skills.rest
nickromney
nickromneyCOMMUNITY
Explore all skills by this author →
Website𝕏@nickromneyGitHub

TypeScript Project Setup

Automate TypeScript project setup with standardized configs and tooling templates.

Updated Nov 14, 2024
One-click install
npx skills add https://github.com/nickromney/n-dotfiles --skill typescript-project-setup
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: TypeScript Project Setup
Source: https://github.com/nickromney/n-dotfiles/tree/main/claude/.claude/skills/setup-typescript-project
Command: npx skills add https://github.com/nickromney/n-dotfiles --skill typescript-project-setup

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires typescript, @biomejs/biome, eslint, @eslint/js, @typescript-eslint/eslint-plugin, @typescript-eslint/parser, prettier, vitest, @vitest/coverage-v8, @playwright/test, husky.

What problem does it solve?

Setting up a new TypeScript project with modern tooling (linting, formatting, testing, CI/CD) can be complex and time-consuming. This skill provides standardized configurations and guidance to quickly bootstrap projects, ensuring best practices from day one and reducing setup overhead.

Core Features & Use Cases

  • Configurable Setup: Choose your module system (ES Modules/CommonJS), linting/formatting tool (Biome/ESLint+Prettier), testing framework (Vitest/Playwright), and pre-commit hooks.
  • Modern Tooling: Integrates with cutting-edge tools like Biome for fast linting/formatting, Vitest for unit tests, and Playwright for end-to-end tests.
  • CI/CD Ready: Provides GitHub Actions workflows and Makefile targets for consistent development, quality checks, and deployment.
  • Use Case: You're starting a new frontend application with Vite and TypeScript. Use this skill to generate all necessary tsconfig.json, biome.json, vitest.config.js, and GitHub Actions files, saving hours of manual configuration.

Quick Start

Set up a new TypeScript project. Choose ES Modules, Biome for linting, Vitest for testing, and enable pre-commit hooks.

Frequently Asked Questions about TypeScript Project Setup

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

FAQPage Schema
How do I set up a new TypeScript project with modern tooling?▼

Set up a TypeScript project by configuring your module system (ES Modules or CommonJS), choosing a linter (Biome or ESLint), selecting a test framework (Vitest or Playwright), and enabling pre-commit hooks with Husky. This Skill automates the entire process, generating tsconfig.json, linter configs, test setup, and GitHub Actions workflows in minutes.

Can I use Biome instead of ESLint and Prettier for TypeScript projects?▼

Yes. Biome provides fast linting and formatting as a unified tool, replacing both ESLint and Prettier. This Skill supports Biome as an alternative configuration option, letting you choose based on your performance and workflow preferences.

What's the fastest way to configure Vitest and code coverage for a TypeScript project?▼

This Skill generates ready-to-use Vitest configs with @vitest/coverage-v8 integrated, eliminating manual configuration. You get unit testing and coverage tracking set up immediately, including CI/CD workflows via GitHub Actions.

How do I add pre-commit hooks to enforce linting and formatting on TypeScript projects?▼

This Skill uses Husky to automate pre-commit hooks that run linting and formatting checks before commits. Configuration is generated automatically, ensuring code quality standards are enforced consistently across your team.

Does this work for converting existing JavaScript projects to TypeScript?▼

Yes. This Skill handles TypeScript project setup for new projects and conversions from JavaScript. It provides the tsconfig.json, linting, formatting, and testing infrastructure needed to migrate incrementally or comprehensively.

What testing options are available for end-to-end tests in TypeScript projects?▼

This Skill integrates Playwright for end-to-end testing alongside Vitest for unit tests. Both are configured automatically with TypeScript support, giving you browser automation and unit testing capabilities in a single setup.

Related Skills

zangxin75zangxin75

NodeJS

Guide Node.js development to avoid event loop blocking and memory leaks.

Community
Intermediate
zxpmailzxpmail
18

release-builder

Automate build, test, and publish lifecycle for web, desktop, and CLI applications.

Community
Advanced
AEtherlight-aiAEtherlight-ai

publish

Automate ÆtherLight release publishing to npm and GitHub.

Official
Intermediate
jupremjuprem

project-initializer

Scaffold a TanStack Start project with NeonDB, Drizzle ORM, and tooling.

Community
Intermediate