Initial commit

skills/preloading-resources/SKILL.md

@@ -0,0 +1,88 @@
+---
+name: preloading-resources
+description: Teaches resource preloading APIs in React 19 including prefetchDNS, preconnect, preload, and preinit. Use when optimizing initial load or navigation performance.
+allowed-tools: Read, Write, Edit
+version: 1.0.0
+---
+
+# Resource Preloading APIs
+
+React 19 adds functions for optimizing resource loading.
+
+## Available Functions
+
+```javascript
+import { prefetchDNS, preconnect, preload, preinit } from 'react-dom';
+```
+
+### prefetchDNS
+
+Perform DNS resolution early:
+
+```javascript
+function App() {
+  prefetchDNS('https://api.example.com');
+  prefetchDNS('https://cdn.example.com');
+
+  return <div>App content</div>;
+}
+```
+
+### preconnect
+
+Establish connection before needed:
+
+```javascript
+function App() {
+  preconnect('https://api.example.com');
+
+  return <div>App content</div>;
+}
+```
+
+### preload
+
+Preload resources without executing:
+
+```javascript
+function App() {
+  preload('/font.woff2', { as: 'font', type: 'font/woff2', crossOrigin: 'anonymous' });
+  preload('/hero-image.jpg', { as: 'image' });
+  preload('/critical.css', { as: 'style' });
+
+  return <div>App content</div>;
+}
+```
+
+### preinit
+
+Preload and execute resource:
+
+```javascript
+function App() {
+  preinit('/critical.js', { as: 'script' });
+  preinit('/critical.css', { as: 'style', precedence: 'high' });
+
+  return <div>App content</div>;
+}
+```
+
+## Use Cases
+
+**On Route Hover:**
+```javascript
+function NavLink({ to, children }) {
+  const handleMouseEnter = () => {
+    preload(`/api/data${to}`, { as: 'fetch' });
+    preinit(`/routes${to}.js`, { as: 'script' });
+  };
+
+  return (
+    <Link to={to} onMouseEnter={handleMouseEnter}>
+      {children}
+    </Link>
+  );
+}
+```
+
+For comprehensive preloading documentation, see: `research/react-19-comprehensive.md` lines 811-834.