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
安装前可以查看交给 AI 代理的指令内容。
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还没有评价。欢迎分享你的使用感受。
无需登录即可发表。欢迎分享使用感受、提问，或说明在哪些环境下无法运行。
还没有评论。来写第一条吧。
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.
中文简介正在准备中。当前显示英语简介。