🐕 Sniff CLI

Static frontend smell detector — Find performance issues before they ship

Sniff analyzes your React/JSX codebase and highlights structural issues that could hurt performance or maintainability. Like ESLint, but focused on frontend weight & complexity.

 
███████╗███╗   ██╗██╗███████╗███████╗
██╔════╝████╗  ██║██║██╔════╝██╔════╝
███████╗██╔██╗ ██║██║█████╗  █████╗  
╚════██║██║╚██╗██║██║██╔══╝  ██╔══╝  
███████║██║ ╚████║██║██║     ██║     
╚══════╝╚═╝  ╚═══╝╚═╝╚═╝     ╚═╝     

        CLI — Code Sniffer

✨ Features

• 🎯 Precise diagnostics - Shows exact metrics, not vague warnings
• 📦 Bundle size analysis - Detects heavy imports with size impact
• ⚡ Performance patterns - Finds excessive inline handlers
• 🏗️ Structural issues - Spots large files, deep nesting, hook overuse
• 🎨 Beautiful output - Gradient styling with clear recommendations
• 🚀 Zero config - Just run sniff analyze

📦 Installation

Global (recommended)

npm install -g sniff-cli

Local (per project)

npm install --save-dev sniff-cli

🚀 Usage

Navigate to your project root and run:

sniff analyze

Sniff will scan your src/ directory and show:

Frontend Health: 92 / 100 (Smooth)

📦 Dashboard.jsx

⚠️  Full import of lodash (~70KB)
   → Importing entire library instead of specific functions
   → Fix: import { debounce } from 'lodash/debounce'
   → Impact: Reduces bundle size significantly

📊 Quick summary
• Files scanned: 12
• Heavy components: 2
• Risky imports: 1

🔍 What Sniff Detects

Heavy Imports

• Full library imports (lodash, moment, date-fns, rxjs)
• Shows bundle size impact
• Provides exact fix syntax

Large Components

• Warning: Files over 250 lines
• Serious: Files over 500 lines
• Suggests splitting into smaller components

Deep JSX Nesting

• Warning: Nesting deeper than 8 levels
• Serious: Nesting deeper than 10 levels
• Recommends extracting sub-components

Excessive Hooks

• Warning: More than 8 hooks in one component
• Serious: More than 12 hooks in one component
• Suggests custom hooks or component splitting

Inline Handlers

• 3 or more inline arrow functions in JSX
• Explains re-render performance impact

Component Density

• 3+ components in a single file
• Recommends one component per file

Note: Thresholds are based on industry best practices and React community standards.

🎯 Philosophy

Sniff is NOT:

• ❌ A runtime profiler
• ❌ A magic speed booster
• ❌ A guarantee of performance

Sniff IS:

• ✅ A static code analyzer
• ✅ An early warning system
• ✅ A code review assistant

Promise: "Here are the parts that smell heavy, with exact fixes."

📊 Health Score

Sniff calculates a health score (10-100) based on:

Warnings (-5 points each):

• Import issues
• Inline handlers
• Component density

Component Complexity (tiered penalties):

• Files: 250-500 lines (-8), 500+ lines (-15)
• JSX Depth: 8-10 levels (-6), 10+ levels (-12)
• Hooks: 8-12 hooks (-5), 12+ hooks (-10)

Scoring:

• 80-100: 🟢 Smooth
• 60-79: 🟡 Could be better
• 10-59: 🔴 Needs love

Note: Score never goes below 10 - even problematic code has structure. Penalties are tiered to reflect severity.

🛠️ Requirements

• Node.js 14+
• Project with src/ directory
• React/JSX files (.jsx, .js)

📝 Example Output

Clean Project

Frontend Health: 95 / 100 (Smooth)

Looks decent… just a few smells.

📊 Quick summary
• Files scanned: 8
• Heavy components: 0
• Risky imports: 0

Project with Issues

Frontend Health: 68 / 100 (Could be better)

🚨 Dashboard.jsx needs attention

📏 Size: 287 lines (threshold: 250)
   → This component is handling too many responsibilities
   → Consider: Split into smaller, focused components

🪝 Hooks: 8 hooks (threshold: 6)
   → Too much state logic in one place
   → Consider: Extract custom hooks or split component

📦 UserProfile.jsx

⚠️  Full import of moment (~290KB)
   → Importing entire library instead of specific functions
   → Fix: import { format } from 'date-fns/format'
   → Impact: Reduces bundle size significantly

🚧 Roadmap

• v0.1 (Current) - Static smell detection with diagnostics
• v0.2 - Detailed fix explanations
• v0.3 - Code patch suggestions
• v1.0 - Automated fixes

🤝 Contributing

Issues and PRs welcome! This is v0 — help make it better.

📄 License

MIT © Souvik Rahut

🙏 Acknowledgments

Built with:

• @babel/parser - AST parsing
• chalk - Terminal styling
• gradient-string - Beautiful gradients
• ora - Elegant spinners

Made with ❤️ for developers who care about frontend performance