typescript-rules

Enforce React and TypeScript frontend development rules for type safety and component design.

Updated Feb 16, 2026
One-click install
npx skills add https://github.com/skiluo/vibe-springboot-scaffold --skill typescript-rules-skiluo
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: typescript-rules
Source: https://github.com/skiluo/vibe-springboot-scaffold/tree/main/.qoder/skills/typescript-rules
Command: npx skills add https://github.com/skiluo/vibe-springboot-scaffold --skill typescript-rules-skiluo

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a comprehensive set of rules and best practices for developing React and TypeScript applications, ensuring type safety, maintainable code, and efficient frontend development.

Core Features & Use Cases

  • Type Safety: Enforces strict type checking, preventing runtime errors.
  • Component Design: Guides the creation of well-structured React components using functional components and custom hooks.
  • State Management: Recommends patterns for managing local, context, and server state.
  • Security: Highlights critical client-side security considerations.
  • Use Case: When starting a new React component or refactoring existing TypeScript code, consult these rules to ensure adherence to modern best practices for robustness and maintainability.

Quick Start

Apply the typescript-rules skill to review the provided React component code for adherence to type safety and component design principles.

Frequently Asked Questions about typescript-rules

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

FAQPage Schema
What are the best practices for React and TypeScript component design?

React and TypeScript component design best practices involve using functional components, building custom hooks, and enforcing strict type checking. This approach prevents runtime errors and guides the creation of robust, maintainable frontend architecture.

How do I enforce type safety and prevent runtime errors in TypeScript?

To enforce type safety and prevent runtime errors in TypeScript, apply strict type checking rules and leverage modern type features. This ensures secure client-side coding and robust error handling across your React components.

Does this approach support modern type features and aggressive refactoring?

Yes, this approach supports aggressive refactoring and modern type features. It provides comprehensive rules covering type safety, state management, and error handling to satisfy requirements for secure and maintainable frontend development.

How do I review existing React components for state management and security?

To review existing React components for state management and security, apply these rules to evaluate local, context, and server state patterns. It highlights critical client-side security considerations and identifies areas for aggressive refactoring.

When should I not use functional components with custom hooks in React?

You should review constraints when your frontend feature requires patterns outside standard state management or when client-side security considerations demand specialized handling. These rules help identify specific limitations and guide secure coding practices.