scale-stack 0.0.1-alpha.2 → 0.0.2

package/templates/utility-libs/usehooks.SKILL.md.ejs

@@ -0,0 +1,38 @@
+---
+name: usehooks
+description: Use @uidotdev/usehooks for common React hooks in this project. Use when adding client-side hooks for browser state, media queries, local storage, timers, events, clipboard, network state, or DOM measurements.
+---
+
+# useHooks
+
+## Instructions
+
+- Import hooks from `@uidotdev/usehooks`.
+- Use these hooks only from Client Components or other client-only hooks. Add `"use client"` where the component uses browser APIs.
+- Prefer existing useHooks utilities before writing one-off hooks for common browser behavior.
+- Keep server data fetching out of these hooks. Use framework data-fetching patterns for server data and useHooks for client/browser state.
+- Check SSR behavior before use. For browser-only values, handle the initial render state deliberately.
+
+## Common Patterns
+
+```tsx
+"use client";
+
+import { useMediaQuery } from "@uidotdev/usehooks";
+
+export function ResponsiveSidebar() {
+  const isDesktop = useMediaQuery("(min-width: 1024px)");
+  return isDesktop ? <aside /> : null;
+}
+```
+
+```tsx
+"use client";
+
+import { useLocalStorage } from "@uidotdev/usehooks";
+
+export function ThemeToggle() {
+  const [theme, setTheme] = useLocalStorage("theme", "system");
+  return <button onClick={() => setTheme("dark")}>{theme}</button>;
+}
+```