with one click
react-localstorage-keyboard-nav
Create React components with localStorage persistence and keyboard navigation support
Menu
Create React components with localStorage persistence and keyboard navigation support
Delegate tasks to OpenSpace — a full-stack autonomous worker for coding, DevOps, web research, and desktop automation, backed by an extensive MCP tool and skill library. Skills auto-improve through use, reducing token consumption over time. A cloud community lets agents share and collectively evolve reusable skills.
Incremental audio production with duration mismatch handling, adaptive stem extension, and pre-mix alignment verification
Audio production with diagnostic analysis, timecode parsing from documents, and verified export workflow
Incremental audio production with duration alignment handling, per-stem verification, and adaptive extension strategies
Step-by-step audio production with per-stem verification, timing alignment, and incremental quality gates
End-to-end audio production workflow with stems, effects, archiving, and verification
| name | react-localstorage-keyboard-nav |
| description | Create React components with localStorage persistence and keyboard navigation support |
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 keys