@loke/design-system/dist/hooks/AGENTS.js

A design system with individually importable components

module.exports=`<h1>hooks</h1>
<!-- Parent: ../CLAUDE.md -->
<!-- Generated: 2026-04-07 | Updated: 2026-04-07 -->
<h2>Purpose</h2>
<p>Custom React hooks for the design system. These hooks are shared utilities used in 2+ places across components and applications.</p>
<h2>For AI Agents</h2>
<h3>Hook Organization</h3>
<p>Hooks are organized in subdirectories by purpose, one hook per directory:</p>
<pre><code>hooks/
├── use-mobile/
│   ├── index.ts           (export)
│   └── useMobile.ts       (implementation)
└── AGENTS.md
</code></pre>
<h3>Creating a New Hook</h3>
<ol>
<li>Create a new subdirectory: <code>hooks/use-name/</code></li>
<li>Implement in <code>useName.ts</code></li>
<li>Export from <code>index.ts</code></li>
<li>Add types and documentation</li>
</ol>
<p>Example:</p>
<pre><code class="language-ts">// hooks/use-name/useName.ts
export function useName(): ReturnType {
  // Implementation
}

// hooks/use-name/index.ts
export { useName } from &quot;./useName&quot;;
</code></pre>
<h2>Existing Hooks</h2>
<h3>useIsMobile</h3>
<p>Detects if the viewport is mobile (&lt; 768px width) using the MediaQueryList API.</p>
<p><strong>Location</strong>: <code>use-mobile/</code></p>
<p><strong>Usage</strong>:</p>
<pre><code class="language-ts">import { useIsMobile } from &quot;@loke/design-system/use-mobile&quot;;

function MyComponent() {
  const isMobile = useIsMobile();
  return &lt;div&gt;{isMobile ? &quot;Mobile&quot; : &quot;Desktop&quot;}&lt;/div&gt;;
}
</code></pre>
<p><strong>Behavior</strong>:</p>
<ul>
<li>Returns <code>boolean</code> (initial: <code>false</code>, updates on viewport change)</li>
<li>Uses <code>window.matchMedia(&quot;(max-width: 767px)&quot;)</code> to detect breakpoint changes</li>
<li>Updates state on <code>change</code> event</li>
<li>Breakpoint: 768px (Tailwind's <code>md</code> breakpoint)</li>
</ul>
<p><strong>Implementation Notes</strong>:</p>
<ul>
<li>Initializes state as <code>undefined</code>, returns <code>!!isMobile</code> (converts to boolean)</li>
<li>Listener cleanup on unmount</li>
<li>No dependencies</li>
</ul>
<h2>MANUAL</h2>
<p><strong>Design System Hook Patterns</strong></p>
<ul>
<li>Hooks deduplicate complexity used in 2+ places</li>
<li>One-off hooks should live in the component using them (not here)</li>
<li>All hooks are exported from design system subpaths (e.g., <code>@loke/design-system/use-mobile</code>)</li>
<li>Add types, JSDoc comments, and implementation notes for future maintainers</li>
</ul>
<p><strong>Export entries</strong> for hooks are defined in <code>packages/design-system/package.json</code> <code>exports</code>.</p>
`;