eslint-custom-guidelines

Enforce justified ESLint disable comments in React/TypeScript projects.

Updated Mar 28, 2025

Search Tags:#typescript #react #eslint #state-management #lint #disable-comments

Ready to run

npx skills add https://github.com/gileck/app-template-ai --skill eslint-custom-guidelines

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: eslint-custom-guidelines
Source: https://github.com/gileck/app-template-ai/tree/main/.ai/skills/template/eslint-custom-guidelines
Command: npx skills add https://github.com/gileck/app-template-ai --skill eslint-custom-guidelines

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill codifies when and how to apply ESLint disable comments and provides a structured rule for state-management usage, helping teams avoid unsafe overrides and keep code quality high.

Core Features & Use Cases

Disable comment discipline: Only allow disables when explicitly justified for specific rules (e.g., state-management/prefer-state-architecture).
State-management guidelines: Prefer using React Query or Zustand for non-local UI state; retain predictable lint outcomes.
Quality assurance: After fixes, run yarn checks to validate lint status.

Quick Start

Use this Skill to determine whether a lint warning warrants a disable comment and how to justify it in the codebase.

Frequently Asked Questions about eslint-custom-guidelines

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

FAQPage Schema

How do I enforce ESLint disable comments and require justification in React TypeScript projects?▼

To enforce ESLint disable comments, apply a structured rule that only allows overrides for specific rules like 'state-management/prefer-state-architecture' with explicit justification. This approach supports React TypeScript projects using useState and common lint configurations.

When should I use an ESLint disable comment for state management warnings?▼

Use an ESLint disable comment for state management warnings only when explicitly justified for specific scenarios like ephemeral UI state, form validation, or local loading indicators. You must document the reason in the codebase to maintain code quality.

What is the 'state-management/prefer-state-architecture' ESLint rule and when is it needed?▼

The 'state-management/prefer-state-architecture' ESLint rule is a structured guideline for state usage in React TypeScript projects. It is needed when determining whether local useState should be replaced by React Query or Zustand for non-local UI state.

Does this ESLint configuration approach work with React Query and Zustand?▼

Yes, this ESLint configuration approach works with React Query and Zustand. It provides state-management guidelines that explicitly prefer using these libraries for non-local UI state instead of relying on local useState hooks and disabling lint rules.

How do I validate lint status after applying ESLint disable comments?▼

To validate lint status after applying ESLint disable comments and fixes, run 'yarn checks' in your project. This command ensures your lint outcomes remain predictable and verifies that all overrides are correctly documented and applied.

What are the limitations of using ESLint disable comments for state management rules?▼

The limitation of using ESLint disable comments is that they are only permitted when explicitly justified for specific rules. Unsafe overrides are restricted to maintain code quality, requiring documentation for scenarios like ephemeral UI state or form validation.