skills.rest
mauriciodelrio
mauriciodelrioCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

code-quality-rules

Configure ESLint, Prettier, or Biome with strict linting rules for React projects.

3|Updated Apr 12, 2026
Search Tags:#typescript#linting#frontend#eslint#prettier#pre-commit#biome
One-click install
npx skills add https://github.com/mauriciodelrio/delriodev-skills --skill code-quality-rules-mauriciodelrio
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: code-quality-rules
Source: https://github.com/mauriciodelrio/delriodev-skills/tree/main/es-skills/software/frontend/code-quality-rules
Command: npx skills add https://github.com/mauriciodelrio/delriodev-skills --skill code-quality-rules-mauriciodelrio

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend projects often lack a unified, enforceable code‑quality setup, leading to inconsistent linting, formatting, and commit standards that increase technical debt.

Core Features & Use Cases

  • ESLint 9 flat config with React, accessibility, import ordering, and complexity rules.
  • Prettier or Biome formatter configuration for consistent styling.
  • Naming conventions for components, hooks, types, and constants.
  • Pre‑commit hooks using husky and lint‑staged to automatically lint and format code before commits. Ideal for new or existing TypeScript React applications that need a comprehensive, production‑ready quality gate.

Quick Start

Use the code-quality-rules skill to configure ESLint, Prettier and pre‑commit hooks for a new React project.

Frequently Asked Questions about code-quality-rules

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

FAQPage Schema
How do I set up ESLint 9 flat config with Prettier for a React project?▼

To set up ESLint 9 flat config with Prettier for a React project, configure strict linting rules including React, accessibility, import ordering, and complexity limits alongside a Prettier formatter for consistent styling.

How do I configure husky and lint-staged to run pre-commit hooks for linting?▼

Configure husky and lint-staged pre-commit hooks to automatically lint and format staged JavaScript and TypeScript code, enforcing quality gates and consistent formatting standards before commits are finalized.

Should I use Biome or Prettier for formatting my TypeScript React application?▼

You can use either Biome or Prettier for formatting your TypeScript React application; this configuration supports both, allowing you to enforce consistent styling and strict linting rules based on your preferred tool.

Can I enforce naming conventions for components and hooks in an ESLint flat config?▼

Yes, you can enforce naming conventions for components, hooks, types, and constants in an ESLint flat config by applying strict linting rules tailored for JavaScript and TypeScript React applications.

What's the best way to add import ordering and complexity limits to a frontend project?▼

The best way to add import ordering and complexity limits to a frontend project is by configuring ESLint 9 flat config with strict linting rules, ensuring maintainable and consistent code quality standards.

Related Skills

Explore More Software Engineering Skills→
mattwoodcomattwoodco
3

create-next

Initialize a Next.js project with TypeScript, Tailwind CSS, Biome, and Turbopack.

Community
Intermediate
marcioaltoemarcioaltoe
14

quality-engineer

Automate code quality tooling setup and enforcement for TypeScript/JavaScript projects.

Community
Intermediate
joshuakesselljoshuakessell

typescript

Enforce strict TypeScript compiler options, ESLint rules, and Jest testing.

Community
Advanced
f-elixf-elix

coding-conventions

Codify TypeScript, TailwindCSS, formatting, and testing standards for projects.

Community
Intermediate