Build reusable React components that save settings in browser storage and support keyboard selection. The patterns cover settings dialogs and command palettes, with guidance on TypeScript types, storage keys, and managing keyboard focus.
Create React components with localStorage persistence and keyboard navigation support
Review the instructions the agent will receive before you install.
This skill guides you through creating reusable React components that:
// 1. Define localStorage hooks
const useLocalStorage = (key: string, initialValue: any) => {
const [value, setValue] = useState(() => {
const stored = localStorage.getItem(key);
return stored ? JSON.parse(stored) : initialValue;
});
useEffect(() => {
localStorage.setItem(key, JSON.stringify(value));
}, [key, value]);
return [value, setValue];
};
// 2. Implement keyboard navigation
const useKeyboardNav = (items: any[], onSelect: (item: any) => void) => {
const [selectedIndex, setSelectedIndex] = useState(0);
const handleKeyDown = (e: KeyboardEvent) => {
if (e.key === 'ArrowDown') {
setSelectedIndex(prev => Math.min(prev + 1, items.length - 1));
} else if (e.key === 'ArrowUp') {
setSelectedIndex(prev => Math.max(prev - 1, 0));
} else if (e.key === 'Enter') {
onSelect(items[selectedIndex]);
}
};
useEffect(() => {
window.addEventListener('keydown', handleKeyDown);
return () => window.removeEventListener('keydown', handleKeyDown);
}, [selectedIndex, items]);
return { selectedIndex };
};
Create Component Scaffolding
mkdir -p src/components/{Modal,CommandPalette}
touch src/components/Modal/SettingsModal.tsx
touch src/components/CommandPalette/CommandPalette.tsx
Implement localStorage Persistence
// SettingsModal.tsx
const SettingsModal = () => {
const [settings, setSettings] = useLocalStorage('app-settings', DEFAULT_SETTINGS);
// ... modal implementation
};
Add Keyboard Navigation
// CommandPalette.tsx
const CommandPalette = ({ commands }) => {
const { selectedIndex } = useKeyboardNav(commands, (cmd) => cmd.action());
// ... render commands with highlighted selectedIndex
};
Export Components
// src/components/index.ts
export * from './Modal/SettingsModal';
export * from './CommandPalette/CommandPalette';
settings-keys.ts file to manage localStorage keysNo reviews yet. Tell others what you thought.
No login needed. Share how it worked for you, ask a question, or note where it did not run.
No comments yet. Be the first to write one.
Prepare audio stems, the separate parts of a track, for mixing by matching their durations with silence, loops, or crossfades. Verify each generated and processed file before moving to the next production step.
Produce audio in separate stems, meaning individual instrument tracks, and verify each output as you go. Align track lengths with silence, loops, or crossfades, then apply effects, mix a master, and package the files.
Build serverless endpoints that relay external API requests for a dashboard while keeping API keys on the server. Includes Vercel examples for input checks, caching, cross-origin access, and consistent JSON responses.
Produce a master track and separate audio parts through a structured Python workflow. Apply filters and reverb, export WAV files with consistent settings, package them in a ZIP archive, and check that the deliverables meet the requested specifications.
Keep document creation moving when web searches and page retrieval repeatedly fail. The skill preserves the original task, uses the model’s existing knowledge, and clearly identifies information that could not be checked against external sources.
When Python execution repeatedly fails in execute_code_sandbox, use a file-based alternative: save the script, run it through the shell, and capture results or errors. The guidance covers paths, imports, timeouts, structured output, and optional cleanup.