Precise UI

A Chrome extension that helps you capture and organize React components using react-grab, making it easy to provide context to AI assistants like Claude.

✨ Features

• Auto-Capture Components: Automatically captures React component contexts when you copy them with Ctrl+C (or Cmd+C on Mac)
• Side Panel Interface: Opens as a convenient Chrome side panel for easy access while browsing
• Component Organization: Store and manage multiple component contexts in one place
• Edit & Delete: Easily modify or remove saved components
• Instructions for Claude: Add custom instructions to send along with your component contexts
• One-Click Copy: Format and copy all components with instructions for seamless AI interaction
• Persistent Storage: Your components and instructions are saved between sessions

📦 Installation

Prerequisites

• Google Chrome browser
• A React application with react-grab installed

Installing the Extension

1. Clone this repository

   git clone https://github.com/svsairevanth12/PreciseUI.git

2. Open Chrome Extensions

   • Navigate to chrome://extensions/ in Chrome
   • Enable Developer mode using the toggle in the top right corner

3. Load the Extension

   • Click Load unpacked
   • Select the react-grab-helper-extension folder from the cloned repository

4. Pin the Extension (optional)

   • Click the puzzle piece icon in Chrome toolbar
   • Pin "Precise UI" for easy access

🚀 Usage

Capturing Components

1. Set up react-grab in your React application (see react-grab documentation)

2. Open your React app in Chrome

3. Hover over any element in your app and press Ctrl+C (or Cmd+C on Mac)

   • The extension will automatically detect react-grab contexts

4. The side panel opens automatically when a component is captured

   • You can also click the Precise UI icon to open the side panel

Managing Components

• Add Component Manually: Click "Add Component" or press Ctrl+N
• Expand/Collapse: Click on a component card to expand and view full context
• Edit: Click the pencil icon to modify a component's name or context
• Copy Individual: Click the copy icon to copy just one component's context
• Delete: Click the trash icon to remove a component

Creating Instructions for Claude

1. Add your captured components
2. In the "Instructions for Claude" textarea, describe what you want to do with the components
3. Click Copy All to copy everything formatted for Claude
4. Paste into Claude and get AI-powered assistance!

⌨️ Keyboard Shortcuts

Shortcut	Action
Ctrl/Cmd + N	Add new component
Ctrl/Cmd + Enter	Copy all components and instructions
Escape	Close modal
Ctrl + Enter (in modal)	Save component

📁 Project Structure

PreciseUI/
├── README.md                          # This file
└── react-grab-helper-extension/       # Chrome extension
    ├── manifest.json                  # Extension manifest (v3)
    ├── background.js                  # Service worker for side panel handling
    ├── content.js                     # Content script for detecting react-grab
    ├── popup.html                     # Side panel HTML
    ├── popup.js                       # Side panel logic
    ├── styles.css                     # Extension styling
    ├── icon16.png                     # Extension icons
    ├── icon48.png
    ├── icon128.png
    └── README.md                      # Extension-specific readme

🎨 How It Works

1. Content Script (content.js) runs on all web pages and listens for copy events
2. When a react-grab context is detected (contains component file paths like .tsx, .jsx), it notifies the background script
3. Background Script (background.js) opens the side panel and passes the captured context
4. Side Panel (popup.js) displays and manages all captured components
5. Components are stored in Chrome's local storage for persistence

🛠️ Development

Making Changes

1. Modify the extension files in react-grab-helper-extension/
2. Go to chrome://extensions/
3. Click the refresh icon on the Precise UI extension card
4. Test your changes

Generating Icons

Icons can be regenerated using the included generate-icons.py script or by opening generate-icons.html in a browser.

📝 License

This project is open source. See the repository for license details.

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📧 Support

If you encounter any issues or have questions, please open an issue.