You are an AI expert tasked with creating a single-page React application that serves as a comprehensive cheat sheet and management tool for the Claude AI conversational model. The application should be built using React, Tailwind CSS, and utilize local storage for managing user preferences and saved data.
PROJECT OVERVIEW:
The primary goal of this application is to provide developers and AI enthusiasts with a centralized, searchable, and easily navigable resource for all Claude AI commands, keyboard shortcuts, prefixes, and server configuration options. It aims to streamline the workflow for users who interact with Claude via its CLI or API, reducing the need to constantly refer to documentation. The core value proposition is increased productivity and a more intuitive understanding of Claude's extensive capabilities.
TECH STACK:
- Frontend Framework: React (using Vite for fast development setup)
- Styling: Tailwind CSS for utility-first styling and rapid UI development
- State Management: React Context API for global state, and `useState`/`useReducer` for local component state.
- Routing: React Router DOM for handling navigation within the single-page application.
- Local Storage: Browser's Local Storage API for persisting user preferences (like favorited items, theme settings).
- Icons: React Icons library for a wide range of icons.
- Search: A performant search function implemented client-side, potentially using a fuzzy search library like Fuse.js if needed for more advanced matching.
CORE FEATURES:
1. **Command & Shortcut Search:**
* User Flow: User lands on the homepage. A prominent search bar is visible at the top. User types a keyword (e.g., 'cancel', 'clear', 'server', 'branch'). As the user types, the application filters the list of commands/shortcuts in real-time.
* Implementation: A main search input component will capture user input. This input state will drive a filtering function that iterates over the `allCommands` data array.
2. **Categorized Browsing:**
* User Flow: Alongside the search bar, a sidebar or tabbed navigation allows users to browse commands by category (e.g., 'General Controls', 'Mode Switching', 'Input Prefixes', 'Slash Commands', 'MCP Servers', 'Scopes', 'Elicitation Servers'). Clicking a category filters the displayed list or navigates to a filtered view.
* Implementation: A `Sidebar` or `CategoryNav` component will display category links. Each link will trigger a route change or a state update to filter the main `CommandList` component.
3. **Detailed Command View:**
* User Flow: When a user clicks on a specific command or shortcut in the list, they are taken to a dedicated detail view (or a modal/drawer pops up) showing:
* The command/shortcut itself (e.g., `Ctrl+C`).
* A clear, concise description of its function.
* Usage examples, if applicable.
* Any relevant parameters or context (e.g., for server configuration).
* Related commands/shortcuts.
* Implementation: A `CommandDetail` component will be rendered, possibly via dynamic routing (e.g., `/command/:id`). It will receive the command ID as a parameter and fetch the corresponding data.
4. **Favorites Functionality:**
* User Flow: Each command/shortcut item in the list and detail view has a 'favorite' icon (e.g., a star or heart). Clicking this icon adds the item to the user's personal favorites list. A separate 'Favorites' section/view allows users to see and access only their favorited items.
* Implementation: A `FavoriteButton` component will manage the state of favorited items. A global state (Context API) will store the list of favorited command IDs. Local Storage will be used to persist this list across sessions.
5. **User Feedback Mechanism (Optional for MVP, good for future):**
* User Flow: A 'Feedback' button or link leads to a simple form where users can suggest new commands, report inaccuracies, or propose improvements. Submitted feedback could be logged to the console initially or sent to a simple backend endpoint in a later iteration.
* Implementation: A `FeedbackForm` component with input fields and a submit button. On submit, data is logged or sent via `fetch`.
UI/UX DESIGN:
- **Layout:** A clean, modern, and responsive layout. A primary header containing the app title and search bar. A main content area displaying the command list or details. A persistent sidebar or top navigation for categories. Mobile view should stack elements vertically, possibly using a bottom navigation or a hamburger menu for categories.
- **Color Palette:** A professional and accessible color scheme. Primary: A deep blue or dark grey. Secondary: A lighter accent color (e.g., teal, cyan, or a muted purple) for interactive elements and highlights. Use `darkMode` support via Tailwind's `dark:` variant, allowing users to toggle between light and dark themes.
- **Typography:** Use a clear, readable sans-serif font (e.g., Inter, Roboto, or system fonts). Ensure good contrast ratios for text readability.
- **Responsive Design:** Mobile-first approach. Components should adapt gracefully to different screen sizes. Use Tailwind's responsive prefixes (`sm:`, `md:`, `lg:`) extensively. Ensure touch targets are adequately sized on mobile.
COMPONENT BREAKDOWN:
- `App.jsx`: Root component, sets up routing and global context providers.
- `Header.jsx`: Contains the application title and the main search input. Manages search state and triggers search filtering.
- `SearchInput.jsx`: The actual input field for searching commands. Receives `onChange` handler from `Header`.
- `Sidebar.jsx` / `CategoryNav.jsx`: Displays categories. Manages active category state and navigation.
- `CommandList.jsx`: Renders the list of commands based on the current filter/category. Maps over the `filteredCommands` data.
- `CommandItem.jsx`: Represents a single command/shortcut in the list. Displays the name/shortcut and a favorite button. Handles click events to navigate to detail view.
- `FavoriteButton.jsx`: Icon button to toggle the favorite status of a command. Updates global favorite state and local storage.
- `CommandDetail.jsx`: Displays detailed information about a selected command. Fetches data based on URL parameter.
- `Footer.jsx`: Contains copyright info, links, and potentially the feedback trigger.
- `ThemeProvider.jsx`: Context provider for managing the light/dark theme.
- `FavoritesView.jsx`: A dedicated page/component to display the user's favorited commands.
DATA MODEL:
- **`allCommands` Array:** The primary data source. An array of objects, where each object represents a command/shortcut.
```javascript
[
{
id: 'ctrl_c',
name: 'Ctrl+C',
category: 'General Controls',
description: 'Cancel input/generation',
type: 'shortcut',
details: null // Optional additional details
},
{
id: 'ctrl_d',
name: 'Ctrl+D',
category: 'General Controls',
description: 'Exit session',
type: 'shortcut',
details: null
},
{
id: 'clear_screen',
name: 'Ctrl+L',
category: 'General Controls',
description: 'Clear screen',
type: 'shortcut',
details: null
},
{
id: 'toggle_verbose',
name: 'Ctrl+O',
category: 'General Controls',
description: 'Toggle verbose output',
type: 'shortcut',
details: null
},
{
id: 'reverse_search',
name: 'Ctrl+R',
category: 'General Controls',
description: 'Reverse search history',
type: 'shortcut',
details: null
},
{
id: 'open_editor',
name: 'Ctrl+G',
category: 'General Controls',
description: 'Open prompt in editor',
type: 'shortcut',
details: null
},
{
id: 'background_task',
name: 'Ctrl+B',
category: 'General Controls',
description: 'Background running task',
type: 'shortcut',
details: null
},
{
id: 'toggle_task_list',
name: 'Ctrl+T',
category: 'General Controls',
description: 'Toggle task list',
type: 'shortcut',
details: null
},
{
id: 'paste_image',
name: 'Ctrl+V',
category: 'General Controls',
description: 'Paste image',
type: 'shortcut',
details: 'Note: May require specific terminal/emulator support.'
},
{
id: 'kill_agents',
name: 'Esc Esc',
category: 'General Controls',
description: 'Kill background agents',
type: 'shortcut',
details: 'Double press Escape key.'
},
{
id: 'rewind_undo',
name: 'Esc Esc',
category: 'Mode Switching',
description: 'Rewind / undo',
type: 'shortcut',
details: 'Double press Escape key.'
},
{
id: 'switch_permission',
name: 'Shift+Tab',
category: 'Mode Switching',
description: 'Cycle permission modes',
type: 'shortcut',
details: null
},
{
id: 'switch_model',
name: 'Alt+P',
category: 'Mode Switching',
description: 'Switch model',
type: 'shortcut',
details: null
},
{
id: 'toggle_thinking',
name: 'Alt+T',
category: 'Mode Switching',
description: 'Toggle thinking',
type: 'shortcut',
details: null
},
{
id: 'enter_newline',
name: 'Enter',
category: 'Input',
description: 'Newline (quick)',
type: 'shortcut',
details: null
},
{
id: 'ctrl_j_newline',
name: 'Ctrl+J',
category: 'Input',
description: 'Newline (control seq)',
type: 'shortcut',
details: null
},
{
id: 'navigate_session',
name: '↑↓',
category: 'Session Picker',
description: 'Navigate session picker',
type: 'shortcut',
details: null
},
{
id: 'expand_collapse_session',
name: '←→',
category: 'Session Picker',
description: 'Expand/collapse session picker items',
type: 'shortcut',
details: null
},
{
id: 'preview_session',
name: 'P',
category: 'Session Picker',
description: 'Preview session item',
type: 'shortcut',
details: null
},
{
id: 'rename_search_session',
name: 'R',
category: 'Session Picker',
description: 'Rename / Search session item',
type: 'shortcut',
details: null
},
{
id: 'all_projects',
name: 'A',
category: 'Session Picker',
description: 'All projects in picker',
type: 'shortcut',
details: null
},
{
id: 'current_branch',
name: 'B',
category: 'Session Picker',
description: 'Current branch in picker',
type: 'shortcut',
details: null
},
{
id: 'add_servers',
name: 'claude mcp servers add',
category: 'MCP Servers',
description: 'Add new MCP servers',
type: 'command',
details: 'Usage: claude mcp servers add --transport <http|stdio|sse> <server_name>'
},
{
id: 'server_http',
name: '--transport http',
category: 'MCP Servers',
description: 'Use HTTP transport for server connection (recommended)',
type: 'command_option',
details: null
},
{
id: 'server_stdio',
name: '--transport stdio',
category: 'MCP Servers',
description: 'Use stdio transport for server connection (local process)',
type: 'command_option',
details: null
},
{
id: 'server_sse',
name: '--transport sse',
category: 'MCP Servers',
description: 'Use SSE transport for server connection (remote)',
type: 'command_option',
details: null
},
{
id: 'scope_local',
name: 'Local .claude.json',
category: 'Scopes',
description: 'Configuration scope: per project',
type: 'scope',
details: null
},
{
id: 'scope_project',
name: 'Project .mcp.json',
category: 'Scopes',
description: 'Configuration scope: shared across project/VCS',
type: 'scope',
details: null
},
{
id: 'scope_user',
name: 'User ~/.claude.json',
category: 'Scopes',
description: 'Configuration scope: global user settings',
type: 'scope',
details: null
},
{
id: 'mcp_interactive',
name: 'claude mcp',
category: 'Interactive UI',
description: 'Enter interactive MCP management mode',
type: 'command',
details: null
},
{
id: 'mcp_list',
name: 'claude mcp list',
category: 'Interactive UI',
description: 'List all configured MCP servers',
type: 'command',
details: null
},
{
id: 'mcp_serve',
name: 'claude mcp serve',
category: 'Interactive UI',
description: 'Serve Claude as an MCP server',
type: 'command',
details: null
},
{
id: 'request_input',
name: 'Elicitation Servers',
category: 'Elicitation Servers',
description: 'Request input mid-task NEW',
type: 'feature',
details: 'This indicates a capability of certain server configurations.'
},
{
id: 'slash_clear',
name: '/clear',
category: 'Slash Commands',
description: 'Clear current conversation history',
type: 'slash_command',
details: null
},
{
id: 'slash_compact',
name: '/compact [focus]',
category: 'Slash Commands',
description: 'Compact context, optionally focusing on a specific part',
type: 'slash_command',
details: 'Example: /compact summary'
},
{
id: 'slash_resume',
name: '/resume',
category: 'Slash Commands',
description: 'Resume or switch to a previous session',
type: 'slash_command',
details: null
},
{
id: 'slash_rename',
name: '/rename [name]',
category: 'Slash Commands',
description: 'Rename the current session',
type: 'slash_command',
details: 'Example: /rename Coding Assistant'
},
{
id: 'slash_branch',
name: '/branch [name]',
category: 'Slash Commands',
description: 'Branch the current conversation (alias: /fork)',
type: 'slash_command',
details: 'Example: /branch feature-implementation'
},
{
id: 'slash_cost',
name: '/cost',
category: 'Slash Commands',
description: 'Display token usage statistics for the current session',
type: 'slash_command',
details: null
},
{
id: 'slash_context',
name: '/context',
category: 'Slash Commands',
description: 'Visualize the current context, possibly in a grid format',
type: 'slash_command',
details: null
},
{
id: 'slash_diff',
name: '/diff',
category: 'Slash Commands',
description: 'Open an interactive diff viewer for comparing states',
type: 'slash_command',
details: null
},
{
id: 'slash_copy',
name: '/copy',
category: 'Slash Commands',
description: 'Copy the last response from Claude',
type: 'slash_command',
details: null
},
{
id: 'slash_export',
name: '/export',
category: 'Slash Commands',
description: 'Export the current conversation history',
type: 'slash_command',
details: null
},
{
id: 'config_settings',
name: '/config',
category: 'Config',
description: 'Open application settings/configuration',
type: 'slash_command',
details: null
},
{
id: 'config_model',
name: '/model [model]',
category: 'Config',
description: 'Switch the Claude model being used (e.g., - '+"'opus', 'sonnet', 'haiku'). Supports effort parameter (e.g. `←→`).',
type: 'slash_command',
details: 'Example: /model opus'
},
{
id: 'config_fast_mode',
name: '/fast [on|off]',
category: 'Config',
description: 'Toggle fast mode for quicker, potentially less thorough, responses',
type: 'slash_command',
details: 'Example: /fast on'
},
{
id: 'config_vim',
name: '/vim',
category: 'Config',
description: 'Toggle Vim keybinding mode for text input',
type: 'slash_command',
details: null
},
{
id: 'config_theme',
name: '/theme',
category: 'Config',
description: 'Change the application color theme (e.g., light/dark)',
type: 'slash_command',
details: null
}
]
```
- **`categories` Array:** A list of unique categories derived from `allCommands` for navigation.
- **`favorites` State:** An array of `id` strings representing favorited commands. Stored in Local Storage.
- **`searchQuery` State:** A string holding the current search input value.
- **`theme` State:** A string ('light' or 'dark') for the current theme.
ANIMATIONS & INTERACTIONS:
- **Hover Effects:** Subtle background color changes or slight scaling on command items when hovered.
- **Transition Animations:** Smooth transitions for sidebar opening/closing (if applicable), filtering of the command list, and modal pop-ups. Use Tailwind's transition utilities.
- **Loading States:** Display skeleton loaders or a simple loading indicator when fetching data (even if mock data, simulate initial load).
- **Micro-interactions:** Visual feedback when favoriting/unfavoriting an item (e.g., icon change animation).
- **Search Feedback:** Highlight matching search terms within the command list items.
EDGE CASES:
- **Empty State:** If no commands match the search query, display a clear message like "No commands found for '[query]'."
- **No Favorites:** When the favorites list is empty, display a "You haven't favorited any commands yet" message.
- **Error Handling:** While primarily client-side with mock data, consider potential errors if fetching from a real API in the future (e.g., network errors, invalid data format). Implement `try...catch` blocks.
- **Validation:** Basic input validation for search (e.g., trim whitespace). For future form inputs (like feedback), implement more robust validation.
- **Accessibility (a11y):** Use semantic HTML elements. Ensure proper ARIA attributes where necessary. Keyboard navigability for all interactive elements. Sufficient color contrast.
SAMPLE DATA:
(See `allCommands` array structure in the Data Model section above. Ensure at least 15-20 diverse entries covering all categories mentioned.)
DEPLOPLOYMENT NOTES:
- **Build Tool:** Vite is recommended for its speed. Run `npm run build` or `yarn build`.
- **Environment Variables:** Not strictly necessary for this MVP, but prepare for `NODE_ENV`. For future API integrations, use `.env` files.
- **Performance Optimizations:** Code splitting (if the app grows large), memoization (`React.memo`, `useMemo`) for expensive computations or frequently re-rendered components, efficient state management, and optimized image loading (if any images are added).
- **Hosting:** Static hosting platforms like Vercel, Netlify, or GitHub Pages are ideal for this SPA.
- **PWA Potential:** Consider adding a `manifest.json` and service worker for offline access and installability as a Progressive Web App in a future iteration.