Can this skill help with large file refactoring?

Yes, it enforces a 500-line file limit and provides strategies for splitting logic into custom hooks, utilities, and smaller sub-components to improve maintainability.

Why does the skill prohibit barrel exports?

It prohibits index.ts barrel exports to improve tree-shaking optimization, reduce build times, and maintain clear, explicit dependency paths in your codebase.

What frameworks does this style guide support?

This skill is specifically designed and optimized for React and TypeScript projects, focusing on functional components, hooks, and modern frontend patterns.

How does the compliance checklist work?

The skill uses RFC 2119 severity levels: MUST (required), SHOULD (recommended), and MAY (optional) to provide clear, actionable feedback during code analysis.

Does it enforce specific naming conventions?

Yes, it requires declarative naming prefixes such as 'is', 'has', 'handle', and 'get' to ensure that variable and function names clearly communicate their intent and return types.

React & TypeScript Coding Style Guide

Name: React & TypeScript Coding Style Guide
Author: xxziiko

byxxziiko

0•

開発者ツール

Enforces high-quality React and TypeScript coding standards through automated review and consistent convention application.

This skill provides a comprehensive framework for maintaining clean, scalable, and type-safe React and TypeScript codebases. It automates the application of declarative naming conventions, component patterns, and business logic abstraction using custom hooks. By strictly enforcing rules like named exports and prohibiting barrel exports, it optimizes build performance and code maintainability while providing a clear compliance checklist for code reviews and refactoring tasks.

主な機能

01Enforcement of declarative naming conventions for improved code readability.

020 GitHub stars

03Build performance optimization by prohibiting barrel exports and re-exports.

04Automated compliance checks against strict React/TypeScript style guides.

05Severity-based checklists (MUST/SHOULD/MAY) for consistent code reviews.

06Logic abstraction using custom hooks to separate business logic from UI components.

ユースケース

01Standardizing naming conventions and file organization during the scaffolding of new features.

02Conducting automated code reviews to ensure consistency across large-scale frontend projects.

03Refactoring legacy React components into modern functional patterns with enhanced type safety.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add xxziiko/subagent coding-style-guide

For use in Claude.ai and ChatGPT

主な機能

01Enforcement of declarative naming conventions for improved code readability.

020 GitHub stars

03Build performance optimization by prohibiting barrel exports and re-exports.

04Automated compliance checks against strict React/TypeScript style guides.

05Severity-based checklists (MUST/SHOULD/MAY) for consistent code reviews.

06Logic abstraction using custom hooks to separate business logic from UI components.

ユースケース

01Standardizing naming conventions and file organization during the scaffolding of new features.

02Conducting automated code reviews to ensure consistency across large-scale frontend projects.

03Refactoring legacy React components into modern functional patterns with enhanced type safety.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add xxziiko/subagent coding-style-guide

For use in Claude.ai and ChatGPT