The Key Difference
ESLint asks: "Is this valid JavaScript?"
Buoy asks: "Does this follow your design system?"
Feature Comparison
Feature
ESLint
Buoy
Primary Use
Code quality & syntax
Design system drift
Context Awareness
Code patterns only
Understands design tokens
Hardcoded Colors
No detection
Full detection + suggestions
Duplicate Components
No detection
Semantic duplicate finding
Design Tokens
No understanding
Maps to your tokens
Adoption Metrics
None
Full coverage stats
Configuration
Complex rule setup
Works out of the box
Use Together?
—
Yes! Complementary tools
What ESLint Can't Catch
Hardcoded Colors
// ESLint: ✓ Valid JavaScript
// Buoy: ⚠️ Hardcoded color, use var(--primary)
<div style={{ color: '#3b82f6' }} />Duplicate Components
// ESLint: ✓ Valid exports
// Buoy: ⚠️ 4 Button implementations found
export { Button } from './Button'
export { ButtonNew } from './ButtonNew'
export { MyButton } from './MyButton'Token Usage
// ESLint: ✓ Valid CSS
// Buoy: ⚠️ Using 16px instead of --spacing-md
padding: 16px;Use Both Together
ESLint and Buoy are complementary. ESLint catches code quality issues. Buoy catches design system drift. Run both in your CI pipeline.
# .github/workflows/ci.yml
- name: Lint
run: npm run lint # ESLint
- name: Design Drift Check
run: npx @buoy-design/cli drift check # Buoy