# Frontend Quality Linting

> Standardized guidelines and patterns for Frontend Quality Linting.

- Skill: `valec3/frontend-quality-linting` (Agent Skill)
- Install (CLI): `npx skillmds add valec3/frontend-quality-linting`
- Raw SKILL.md: https://api.skillmd.com/api/skills/valec3/frontend-quality-linting/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: valec3 (https://skillmd.com/u/valec3)
- Updated: 2026-09-10
- Page: https://skillmd.com/skills/valec3/frontend-quality-linting

---


# Frontend Quality Linting

## When to use this skill
- Setting up ESLint
- Enforcing code quality
- Catching bugs early

## Workflow
- [ ] Install ESLint
- [ ] Configure for TypeScript/React
- [ ] Add plugins (react-hooks, etc.)
- [ ] Set up pre-commit hooks
- [ ] Run in CI/CD

## Instructions

### Installation
```bash
npm install -D eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin
npm install -D eslint-plugin-react eslint-plugin-react-hooks
```

### Config
```javascript
// .eslintrc.js
module.exports = {
  parser: '@typescript-eslint/parser',
  plugins: ['@typescript-eslint', 'react', 'react-hooks'],
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:react/recommended',
    'plugin:react-hooks/recommended'
  ],
  rules: {
    'react-hooks/rules-of-hooks': 'error',
    'react-hooks/exhaustive-deps': 'warn'
  }
};
```

## Resources
- Enable react-hooks rules
- Add to pre-commit with husky
- Auto-fix on save in editor