skills.rest
andrey-belen
andrey-belenCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-debug-linting

Automate ESLint linting, TypeScript type-checking, and Prettier formatting for React/Next.js projects.

Updated Aug 23, 2026
Search Tags:#typescript#frontend#eslint#prettier#code-quality#lint
One-click install
npx skills add https://github.com/andrey-belen/alto-iam-cloud --skill frontend-debug-linting-andrey-belen
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-debug-linting
Source: https://github.com/andrey-belen/alto-iam-cloud/tree/main/.claude/skills/frontend-debug-linting
Command: npx skills add https://github.com/andrey-belen/alto-iam-cloud --skill frontend-debug-linting-andrey-belen

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill automates frontend quality assurance by integrating ESLint linting, TypeScript type-checking, and Prettier formatting into development and pre-delivery workflows, catching issues early.

Core Features & Use Cases

  • ESLint linting and autofix across JS/TS/TSX/JSX
  • TypeScript type-checking in development and CI
  • Prettier formatting to enforce consistent styles
  • Browser console debugging and QA verification for React/Next.js apps
  • Use Case: After coding a new component, run the checks to ensure code quality before delivery; CI will fail on any issues.

Quick Start

Follow the commands below to validate and format code in your project:

  • npm run lint - ESLint check
  • npm run lint:fix - Auto-fix
  • npm run typecheck - TypeScript check
  • npm run format - Prettier format
  • npm run check - All checks

Frequently Asked Questions about frontend-debug-linting

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

FAQPage Schema
How do I automate ESLint and Prettier checks for a React project?▼

Automate ESLint and Prettier checks by configuring npm scripts for linting, type-checking, and formatting. This skill runs these checks during development and pre-delivery workflows to enforce React/Next.js code quality and catch issues early.

What's the best way to run TypeScript type-checking in a CI pipeline?▼

Run TypeScript type-checking in CI pipelines by executing a dedicated typecheck npm script. This validates types after code changes and fails the pipeline if type errors are detected, ensuring frontend quality before pre-delivery workflows.

Do I need specific npm scripts to automate frontend linting workflows?▼

Yes, you need specific npm scripts defined in your project. This skill expects lint, lint:fix, typecheck, format, and check scripts configured to execute ESLint, TypeScript, and Prettier validations across your development and CI workflows.

Can I auto-fix ESLint errors across JSX and TSX files?▼

Yes, you can auto-fix ESLint errors across JS, TS, JSX, and TSX files. By running the lint:fix npm script, the skill automatically resolves styling and linting issues to maintain consistent frontend code quality during development.

How does Prettier formatting integrate with ESLint linting?▼

Prettier formatting integrates with ESLint linting by running format and lint scripts sequentially via a unified check command. This ensures both consistent code styles and type safety are enforced before code delivery in React/Next.js projects.

Related Skills

Explore More Software Engineering Skills→
bordenetbordenet
8

pre-commit-gate

Run npm lint, typecheck, and test commands before each git commit.

Community
Intermediate
petbrainspetbrains
13

frontend-debug-linting

Lint, type-check, format, and verify React/Next.js projects in browsers.

Official
Intermediate
bryonjacobbryonjacob

installing-git-hooks

Install git hooks to run format, lint, typecheck, and tests via justfile commands.

Community
Advanced
TuiennTuienn

react-eslint

Lint and format React projects with ESLint and Prettier.

Community
Intermediate