From devloop
Provides idiomatic React/TypeScript patterns for hooks, components, custom hooks, state management, performance optimization, Next.js, and JSX/TSX UI components.
npx claudepluginhub zate/cc-plugins --plugin devloopThis skill uses the workspace's default tool permissions.
Idiomatic React/TypeScript patterns.
Provides modern React patterns for component design, hooks, composition, state management, performance, error handling, TypeScript, and React 19 features. Useful for production-ready apps.
Provides modern React patterns for component design, hooks, composition, state management, performance, error handling, and TypeScript best practices. Useful for production-ready apps.
Guides implementation of modern React patterns: hooks, component composition, state management, performance optimizations, concurrent features. Use for building or refactoring components.
Share bugs, ideas, or general feedback.
Idiomatic React/TypeScript patterns.
Tip: For high-quality UI design beyond code patterns, consider the
frontend-designplugin if installed (/frontend-design).
interface Props {
name: string;
onClick: () => void;
}
const Button: React.FC<Props> = ({ name, onClick }) => (
<button onClick={onClick}>{name}</button>
);
// State
const [count, setCount] = useState(0);
// Effect with cleanup
useEffect(() => {
const timer = setInterval(() => tick(), 1000);
return () => clearInterval(timer);
}, []);
// Memoization
const expensive = useMemo(() => compute(data), [data]);
const handler = useCallback(() => doThing(id), [id]);
function useLocalStorage<T>(key: string, initial: T) {
const [value, setValue] = useState<T>(() => {
const stored = localStorage.getItem(key);
return stored ? JSON.parse(stored) : initial;
});
useEffect(() => {
localStorage.setItem(key, JSON.stringify(value));
}, [key, value]);
return [value, setValue] as const;
}
React.memo for expensive componentskey prop correctly in lists