typescript-frontend

Enforce TypeScript frontend coding standards and strict type safety in Vue 3 or React projects.

Updated Mar 1, 2026

Search Tags:#typescript #frontend #type-safety #vue3 #generics #strict-mode #type-design

Ready to run

npx skills add https://github.com/CloudyWing/ai-dotfiles --skill typescript-frontend-cloudywing

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: typescript-frontend
Source: https://github.com/CloudyWing/ai-dotfiles/tree/main/skills/typescript-frontend
Command: npx skills add https://github.com/CloudyWing/ai-dotfiles --skill typescript-frontend-cloudywing

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provides clear, actionable TypeScript conventions and patterns to prevent type-safety regressions, reduce runtime errors, and standardize type design across frontend projects using Vue 3 or React.

Core Features & Use Cases

Strict compiler guidance: recommends strict compilerOptions and patterns for new files while respecting existing project settings.
Type design rules: clarifies when to use interface vs type, forbids any, advises against unsafe assertions, and promotes discriminated unions and proper generics usage.
Framework integration: prescribes Vue 3 specific patterns for refs, component generics, provide/inject keys, and typed template refs to improve component safety and developer ergonomics.

Quick Start

Apply the typescript-frontend rules to this Vue 3 component and suggest type-safe refactors for props, API responses, and any generic utilities.

Frequently Asked Questions about typescript-frontend

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

FAQPage Schema

How do I enforce strict type safety in a Vue 3 frontend project?▼

To enforce strict type safety in a Vue 3 frontend project, apply coding standards that require strict compiler options, forbid the any type, and use typed refs alongside typed provide/inject patterns to prevent runtime errors.

What is the best way to type Vue 3 component props and API responses?▼

The best way to type Vue 3 component props and API responses is to use discriminated unions and proper generics, ensuring strict type design for components and API response handling while avoiding unsafe type assertions.

When do I use interface vs type for TypeScript frontend type design?▼

TypeScript frontend type design rules clarify when to use interface vs type, generally advising against unsafe assertions and promoting discriminated unions and proper generics usage to standardize shared types across components.

How do I refactor TypeScript code to remove any and unsafe assertions?▼

To remove any and unsafe assertions during TypeScript refactoring, apply type-safe patterns using discriminated unions and generics, ensuring source files adhere to strict compiler options for safer component and API type design.

Does this TypeScript frontend guidance work with React as well as Vue 3?▼

Yes, this TypeScript frontend guidance applies to projects using Vue 3 or React, enforcing strict type safety, type design rules, and avoidance of unsafe assertions for authoring, refactoring, and code review of components.

Why should I use strict compiler options for frontend TypeScript projects?▼

You should use strict compiler options for frontend TypeScript projects to prevent type-safety regressions, reduce runtime errors, and standardize type design across source files handling components, props, and API responses.