typescript-export-standards

Enforce TypeScript/React export patterns for functions, components, and hooks.

Updated Feb 4, 2025

Search Tags:#typescript #react #hooks #coding-standards #code-review #export #function-export

Ready to run

npx skills add https://github.com/DavidKk/vercel-web-scripts --skill typescript-export-standards

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: typescript-export-standards
Source: https://github.com/DavidKk/vercel-web-scripts/tree/main/.cursor/skills/typescript-export-standards
Command: npx skills add https://github.com/DavidKk/vercel-web-scripts --skill typescript-export-standards

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

TypeScript/React export patterns are inconsistently applied across codebases, causing confusion, review friction, and maintenance challenges.

Core Features & Use Cases

Enforces that exported functions use export function syntax.
Specifies React component export standards: page components use default export; reusable components use named exports.
Enforces custom hook exports to use export function and returns a flat structure.
Provides guidance and examples of correct and incorrect export patterns to guide teams.

Quick Start

Audit your TypeScript/React project and update all exports to use the recommended 'export function' syntax for functions, default export for pages, and named exports for components and hooks.

Frequently Asked Questions about typescript-export-standards

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

FAQPage Schema

How do I enforce consistent TypeScript export patterns for React components and hooks?▼

To enforce consistent TypeScript export patterns, use the 'export function' syntax for functions, default exports for page components, and named exports for reusable components and hooks to reduce code review friction.

What is the best way to standardize React component exports across a codebase?▼

The best way to standardize React component exports is to use default exports strictly for page components while enforcing named exports for all reusable components, ensuring consistent patterns across your codebase.

Should I use default or named exports for React custom hooks?▼

For React custom hooks, you should use the 'export function' syntax with named exports, ensuring the hook returns a flat structure to maintain consistency and simplify maintenance across your project.

Why does TypeScript export inconsistency cause code review friction?▼

TypeScript export inconsistency causes code review friction because mixing default and named exports for functions and components creates confusion, making it difficult to establish clear maintenance and codebase standards.

How do I audit an existing React project for export convention violations?▼

To audit a React project for export convention violations, check that all functions use 'export function' syntax, page components use default exports, and reusable components use named exports, updating any incorrect patterns.