Template

Files

lmiranda 2d51df7a42 feat(marketplace): command consolidation + 8 new plugins (v8.1.0 → v9.0.0) [BREAKING]

Phase 1b: Rename all ~94 commands across 12 plugins to /<noun> <action>
sub-command pattern. Git-flow consolidated from 8→5 commands (commit
variants absorbed into --push/--merge/--sync flags). Dispatch files,
name: frontmatter, and cross-reference updates for all plugins.

Phase 2: Design documents for 8 new plugins in docs/designs/.

Phase 3: Scaffold 8 new plugins — saas-api-platform, saas-db-migrate,
saas-react-platform, saas-test-pilot, data-seed, ops-release-manager,
ops-deploy-pipeline, debug-mcp. Each with plugin.json, commands, agents,
skills, README, and claude-md-integration. Marketplace grows from 12→20.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

2026-02-06 14:52:11 -05:00

4.5 KiB

Raw Blame History

name

name
react lint

/react lint - Component Tree Analysis

Skills to Load

skills/component-patterns.md
skills/typescript-patterns.md
skills/visual-header.md

Visual Output

Display header: REACT-PLATFORM - Lint

Usage

/react lint [path] [--fix] [--strict]

Workflow

1. Scan Target

Default path: project root (all .tsx, .ts, .jsx, .js files)
If specific path provided, scan only that directory/file
Exclude: node_modules/, dist/, build/, .next/, coverage/

2. Component Structure Analysis

Check each component file for:

Check	Severity	Description
Missing prop types	FAIL	Components without TypeScript interface or PropTypes
Unused props	WARN	Props declared in interface but never used in JSX
Missing display name	INFO	Components without `displayName` (matters for DevTools)
Inline function props	WARN	Functions defined inline in JSX (`onClick={() => ...}`)
Missing key prop	FAIL	List rendering without `key` prop
Index as key	WARN	Using array index as `key` in dynamic lists
Large component	WARN	Component exceeds 200 lines (suggest splitting)
Mixed concerns	WARN	Data fetching + rendering in same component
Missing error boundary	INFO	Page components without error boundary

3. Hook Analysis

Check custom hooks for:

Check	Severity	Description
Missing cleanup	WARN	`useEffect` with subscription/listener but no cleanup return
Stale closure	WARN	State variables used in effect without being in dependency array
Conditional hook call	FAIL	Hook called inside condition, loop, or after early return
Missing dependency	WARN	Values used in effect but missing from dependency array

4. State Management Analysis

Check state patterns for:

Check	Severity	Description
Prop drilling	WARN	Same prop passed through 3+ component levels
Unnecessary state	INFO	State that could be derived from existing state or props
Multiple setState calls	INFO	Sequential `setState` calls that could be a single update
Context overuse	WARN	Context provider wrapping entire app for localized state

5. TypeScript Analysis (--strict mode)

Additional checks when --strict enabled:

Check	Severity	Description
`any` type usage	WARN	Explicit or implicit `any` in component code
Missing return type	INFO	Components without explicit return type
Non-null assertion	WARN	Use of `!` operator instead of proper null checking
Type assertion overuse	WARN	Frequent `as` casts suggesting type design issues

6. Report

+----------------------------------------------------------------------+
|  REACT-PLATFORM - Lint                                               |
|  /src/components                                                     |
+----------------------------------------------------------------------+

Files Scanned: 24
Components Analyzed: 18
Hooks Analyzed: 6

FAIL (2)
  1. [src/components/UserList.tsx:45] Missing key prop
     Found: <UserCard user={user} /> inside .map()
     Fix: Add key={user.id} to <UserCard>

  2. [src/hooks/useData.ts:12] Conditional hook call
     Found: if (enabled) { useState(...) }
     Fix: Move hook before condition, use enabled as guard inside

WARN (3)
  1. [src/components/Dashboard.tsx] Large component (287 lines)
     Suggestion: Extract chart section into DashboardCharts component

  2. [src/components/Form.tsx:23] Inline function prop
     Found: onChange={() => setValue(e.target.value)}
     Suggestion: Extract to named handler function

  3. [src/hooks/useWebSocket.ts:18] Missing cleanup
     Found: useEffect with addEventListener but no removeEventListener
     Fix: Return cleanup function from useEffect

INFO (1)
  1. [src/components/Card.tsx] Missing displayName
     Suggestion: Add Card.displayName = 'Card'

SUMMARY
  Components: 16 clean, 2 with issues
  Hooks: 5 clean, 1 with issues
  Anti-patterns: 0 FAIL, 3 WARN, 1 INFO

VERDICT: FAIL (2 blocking issues)

Examples

/react lint                              # Lint entire project
/react lint src/components/              # Lint specific directory
/react lint src/components/Form.tsx      # Lint single file
/react lint --strict                     # Include TypeScript checks
/react lint --fix                        # Auto-fix where possible

4.5 KiB Raw Blame History