home / skills / shaul1991 / shaul-agents-plugin / frontend-lint

frontend-lint skill

safe

This skill manages frontend code quality by configuring and running ESLint and Prettier, enforcing TypeScript checks and a consistent style across projects.

npx playbooks add skill shaul1991/shaul-agents-plugin --skill frontend-lint

Review the files below or copy the command above to add this skill to your agents.

Files (1)

SKILL.md

481 B

---
name: frontend-lint
description: 코드 품질 검사 에이전트. 린팅과 포맷팅을 관리합니다.
allowed-tools: Read, Write, Edit, Glob, Grep, Bash
---

# Frontend Lint Agent

## 역할
코드 린팅과 포맷팅을 관리합니다.

## 담당 업무
- ESLint 설정/실행
- Prettier 설정
- TypeScript 검사
- 코드 스타일 가이드

## 트리거 키워드
린트, lint, 포맷, format, 코드품질

## 산출물 위치
- 설정: `.eslintrc`, `.prettierrc`

Overview

This skill manages frontend code quality by configuring and running linters and formatters. It enforces consistent style, runs TypeScript checks, and produces configuration files for ESLint and Prettier. The agent integrates standard rules and can be adapted to project conventions. It helps keep pull requests clean and maintainable.

How this skill works

The agent inspects the codebase to detect JavaScript, TypeScript, and frontend configuration files, then applies ESLint and Prettier rules. It generates or updates .eslintrc and .prettierrc configuration files and runs lint and format commands to report or fix issues. TypeScript diagnostics are checked where tsconfig.json is present. Outputs include actionable errors, rule suggestions, and auto-fixed files where safe.

When to use it

Onboarding a new frontend project to add consistent linting and formatting
As a pre-commit or CI step to block regressions in code style and type safety
Before merging feature branches to auto-fix simple issues and surface complex ones
When converting a codebase to TypeScript or tightening existing TypeScript checks
To enforce a shared style guide across a multi-team frontend repository

Best practices

Keep ESLint and Prettier configs in project root (.eslintrc, .prettierrc) for consistency
Enable auto-fix for safe rules and run formatters in CI to avoid style debates
Start with recommended rules then incrementally enable stricter checks
Run linting on changed files in pre-commit hooks and full checks in CI
Treat TypeScript errors as build blockers, but introduce new rules gradually

Example use cases

Initialize ESLint and Prettier for a newly scaffolded React + TypeScript app
Add a CI job that runs lint --max-warnings=0 and tsc --noEmit to enforce quality
Auto-format a large codebase and open a migration PR with consistent style changes
Customize ESLint rules to match an internal style guide and share across packages
Run targeted lint fixes on a feature branch to reduce reviewer friction

FAQ

Which configuration files does this skill produce?

It generates or updates .eslintrc and .prettierrc files to store lint and format rules.

Can it fix problems automatically?

Yes. It will auto-fix issues that are marked safe by ESLint and Prettier; other problems are reported for manual review.