Salt Inspector Prompt

A dev-only tool for visually inspecting UI elements, attaching prompts, and triggering AI-assisted fixes via Claude Code CLI.

Quick Start

npx create-salt-inspector

What It Does

Salt Inspector enables a visual workflow for marking UI issues in your browser and having Claude fix them:

1. Inspect elements in browser with overlay
2. Add prompts describing what needs to change
3. Save structured context to .salt-inspector/session.json
4. Run claude "fix salt-inspector" to apply fixes

Demo

Installation

The CLI installer will:

• Detect your framework (Vite, Next.js, Angular, etc.)
• Install required packages
• Configure the Vite plugin
• Create the .salt-inspector/ directory
• Add <DevInspector /> to your entry file

Manual Installation

If you prefer manual setup:

React

# Install packages
npm install salt-inspector-react
npm install -D salt-inspector-vite

# Add to vite.config.ts
import reactInspector from 'salt-inspector-vite'

export default defineConfig({
  plugins: [react(), reactInspector()]
})

# Add to your app (main.tsx or App.tsx)
import { DevInspector } from 'salt-inspector-react'

function App() {
  return (
    <>
      {import.meta.env.DEV && <DevInspector enabled={false} />}
      {/* Your app */}
    </>
  )
}

Angular

# Install package
npm install salt-inspector-angular

# For Standalone Apps (app.config.ts):
import { InspectorPrompt } from 'salt-inspector-angular'

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    InspectorPrompt,
  ]
}

# Add to app.component.html:
<inspector-prompt></inspector-prompt>

# For Module-based Apps (app.module.ts):
import { InspectorPromptModule } from 'salt-inspector-angular'

@NgModule({
  imports: [BrowserModule, InspectorPromptModule],
  // ...
})
export class AppModule { }

Usage

1. Start dev server and look for the 🔍 button in bottom-right

2. Click the inspector button to enable, then hover over elements

3. Click an element to open the prompt modal

4. Describe the issue and save

5. Run Claude:

   claude "fix salt-inspector"

Features

• Interactive Toggle Menu - Toggle inspector, view issues panel, copy issues
• Component Detection - Shows React/Angular component names
• DOM Path Generation - Stable CSS selectors
• Issues Panel - View all saved issues in a scrollable list
• Session Persistence - Auto-saves to .salt-inspector/session.json
• Dev-Only - Tree-shaken in production, never shipped to users

CLI Options

npx create-salt-inspector [path] [options]

# Options:
  -d, --debug    Enable debug output
  --yes          Skip prompts and use defaults

Session Schema

Issues are saved to .salt-inspector/session.json:

{
  "version": "1.0.0",
  "project": "my-app",
  "issues": [
    {
      "id": "uuid",
      "timestamp": 1709000000000,
      "url": "http://localhost:5173",
      "viewport": { "width": 1920, "height": 1080 },
      "element": {
        "tag": "button",
        "classList": ["primary"],
        "domPath": "#root > button.primary",
        "componentName": "SubmitButton"
      },
      "prompt": "Make this button larger"
    }
  ]
}

Packages

• salt-inspector-core - Shared utilities, DOM helpers, session I/O
• salt-inspector-react - DevInspector React component & overlay UI
• salt-inspector-angular - Angular 17+ inspector component
• salt-inspector-vite - Vite plugin for dev middleware
• create-salt-inspector - CLI installer (this package)

Requirements

React:

• React 18+ or React 19
• Vite 5+ (for plugin functionality)

Angular:

• Angular 17+ (Angular 18+ recommended)
• TypeScript 5+

General:

• Node.js 18+
• pnpm 8+ (for development)

Development

# Clone repo
git clone https://github.com/rickovirnanda/salt-inspector-prompt.git
cd salt-inspector-prompt

# Install dependencies
pnpm install

# Build all packages
pnpm build

# Run tests
pnpm test

Security

• Dev-only: All components are tree-shaken in production
• Local-only: Data never leaves your machine
• Vite middleware: Only active in dev mode, rejects production requests

License

MIT

Contributing

Contributions welcome! This is an open-source project for improving the developer workflow.

Built with ❤️ for the Salt + Claude ecosystem