typescript

Enforces TypeScript strict-mode typing, naming conventions, and code style rules for React projects.

3|1|Updated Jan 12, 2026
One-click install
npx skills add https://github.com/nghyane/VSTEP --skill typescript-nghyane
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: typescript
Source: https://github.com/nghyane/VSTEP/tree/main/apps/_deprecated/frontend-v2/.agents/skills/typescript
Command: npx skills add https://github.com/nghyane/VSTEP --skill typescript-nghyane

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Inconsistent TypeScript usage—loose typing, any escapes, unclear naming, and messy imports—leads to fragile React codebases that are hard to review and refactor. This Skill provides a concrete rulebook so generated or reviewed code follows one strict, predictable style. ## Core Features & Use Cases - Strict Type Rules: Enforces strict mode, bans any and @ts-ignore, restricts as casts to I/O boundaries, and promotes discriminated unions for state modeling. - Naming Conventions: Standardizes component, hook, boolean, and event handler naming (e.g., isLoading, onX/handleX). - Code Style Guidance: Covers magic values, import organization via Biome, #/ path aliases, and the ban on barrel files. - Use Case: When writing a new React component with complex loading/error/success states, load this Skill to model the state as a discriminated union and keep the code review-ready. ## Quick Start Review this TypeScript React component against the strict typing, naming, and code style conventions and refactor any violations.

Frequently Asked Questions about typescript

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

FAQPage Schema
How do I model loading and error states in TypeScript React?▼

Use a discriminated union instead of separate boolean flags: define states like { status: "loading" }, { status: "error"; error: Error }, and { status: "success"; data: T }. This makes invalid state combinations unrepresentable and simplifies exhaustive handling in components.

How to avoid using any in strict TypeScript code?▼

Replace any with unknown and narrow the type with type guards before use. Use @ts-expect-error only with an explanatory comment, and reserve as casts for I/O boundaries like parsed JSON, DOM queries, or event targets.

Should I use interface or type for React component props?▼

Use interface for component props and type for unions, intersections, and mapped types. Destructure props with explicit typing and avoid spreading arbitrary props onto DOM nodes.

Does React 19 still support the global JSX namespace?▼

No, React 19 removed the global JSX namespace. Type children explicitly as React.ReactNode instead of relying on JSX.Element or implicit global types.

Why avoid barrel files and deep relative imports in TypeScript projects?▼

Barrel files (index.ts re-exports) complicate tree-shaking and create circular dependency risks. Use a path alias like #/ for imports instead of relative paths that traverse beyond the current directory.