---
name: valec3/frontend-quality-linting
source: https://app.decimal.ai/s/valec3-frontend-quality-linting@1/SKILL.md
source_sha256: cf769d31ff11
---

# 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