---
name: strongtie-style-consistency
description: "Ensure code style consistency using Ultracite and @strongtie linting packages. Handles setup if not installed, then runs checks and fixes. Use when: (1) Setting up linting in a project, (2) Running lint checks, (3) Fixing lint errors."
---

# Style Consistency Skill

Ensure code style consistency using Ultracite and @strongtie linting packages.

## When to Use This Skill

- Setting up linting in a new project
- Running lint checks before commit
- Fixing lint errors
- Troubleshooting linting issues

## Workflow Overview

1. **Check Installation Status** - Look for existing configuration
2. **If NOT Installed** - Run full setup
3. **If ALREADY Installed** - Run checks and fixes

## Step 1: Check Installation Status

Look for these indicators that linting is already configured:

- `eslint.config.mjs` exists
- `ultracite` in package.json devDependencies
- `@strongtie/eslint` in package.json devDependencies

## Step 2a: If NOT Installed - Setup

### Prerequisites

- Node.js >= 20.0.0
- TypeScript project with `tsconfig.json`

### Configure Azure Artifacts (.npmrc)

```bash
@strongtie:registry=https://pkgs.dev.azure.com/StrongTie/_packaging/Simpson/npm/registry/
@strongtie:always-auth=true
registry=https://registry.npmjs.org/
```

### Install Core Dependencies

```bash
npm install -D ultracite@^7.2.4 eslint@^9 prettier@^3 stylelint@^17
```

**CRITICAL**: Use ESLint 9.x (`^9`), NOT ESLint 10. `eslint-plugin-react` does not support ESLint 10.

### Install @strongtie Packages

```bash
npm install -D @strongtie/eslint @strongtie/prettier @strongtie/stylelint
```

### Install ESLint Peer Dependencies

```bash
npm install -D \
  @typescript-eslint/eslint-plugin@^8 \
  @typescript-eslint/parser@^8 \
  eslint-config-prettier@^10 \
  eslint-import-resolver-typescript@^4 \
  eslint-plugin-compat@^7 \
  eslint-plugin-github@^6 \
  eslint-plugin-html@^8 \
  eslint-plugin-import@^2 \
  eslint-plugin-jsx-a11y@^6 \
  eslint-plugin-n@^17 \
  eslint-plugin-prettier@^5 \
  eslint-plugin-promise@^7 \
  eslint-plugin-react@^7 \
  eslint-plugin-react-hooks@^7 \
  eslint-plugin-sonarjs@^4 \
  eslint-plugin-unicorn@^63 \
  eslint-plugin-unused-imports@^4 \
  globals@^17
```

### Install Stylelint Peer Dependencies

```bash
npm install -D \
  stylelint-config-standard@^37 \
  stylelint-config-idiomatic-order@^10 \
  stylelint-prettier@^5
```

### Create Configuration Files

**eslint.config.mjs:**

```javascript
import base from "@strongtie/eslint/base"
import react from "@strongtie/eslint/react"
import { defineConfig } from "eslint/config"

export default defineConfig([
  {
    ignores: [
      "**/dist/", "**/build/", "**/.next/", "**/.turbo/",
      "**/node_modules/", "**/*.config.ts", "**/*.config.mjs",
      "**/*.d.ts", "**/*.json", "components/ui/**/*",
    ],
  },
  ...base(),
  ...react,
])
```

**prettier.config.mjs:**

```javascript
export { default } from "@strongtie/prettier"
```

**stylelint.config.mjs:**

```javascript
export { default } from "@strongtie/stylelint"
```

### Add Scripts to package.json

```json
{
  "scripts": {
    "check": "ultracite check",
    "fix": "ultracite fix",
    "lint": "eslint .",
    "lint:fix": "eslint --fix .",
    "lint:css": "stylelint '**/*.css'",
    "lint:css:fix": "stylelint '**/*.css' --fix",
    "format": "prettier --check .",
    "format:fix": "prettier --write ."
  }
}
```

## Step 2b: If ALREADY Installed - Run Checks

### Check for Issues (No Auto-Fix)

```bash
npm run check
# or directly:
npx ultracite check
```

### Auto-Fix Issues

```bash
npm run fix
# or directly:
npx ultracite fix
```

### Individual Tools

```bash
npm run lint        # ESLint only
npm run lint:css    # Stylelint only
npm run format      # Prettier check only
```

## Key Rules Enforced

### Custom @strongtie Rules

- `@strongtie/no-static-inline-style`: Use Tailwind/CSS modules, not static inline styles

### TypeScript (Relaxed for Practicality)

- `@typescript-eslint/no-unsafe-*`: off (too strict)
- `@typescript-eslint/no-floating-promises`: off (common in React Query)
- `@typescript-eslint/prefer-nullish-coalescing`: off (`||` often intentional)

### React

- `react/jsx-no-constructed-context-values`: off (React Compiler handles)
- `react-hooks/purity`: off (too strict)

### Code Style

- `no-console`: warn (allowed in development)
- `no-nested-ternary`: off (sometimes clearer)

## Troubleshooting

### ESLint 10 Error

```
TypeError: contextOrFilename.getFilename is not a function
```

**Fix**: `npm install -D eslint@^9`

### Missing Peer Dependencies

**Fix**: Install from the peer dependency lists above

### TypeScript Parser Errors

**Fix**: Ensure `tsconfig.json` includes all linted files

## Quick Commands

```bash
# Check everything
npm run check

# Fix everything
npm run fix

# Check specific file
npx eslint src/components/button.tsx

# Fix specific file
npx eslint --fix src/components/button.tsx
```

## Reference

- Full setup guide: https://design.strongtie.io/docs/getting-started/eslint-setup
- Package docs: packages/eslint/README.md
- Ultracite docs: https://ultracite.dev