chore: use ts files instead of json files

Author: numandev1

.github/ISSUE_TEMPLATE/config.yml

@@ -1,8 +1,8 @@
 blank_issues_enabled: false
 contact_links:
   - name: Feature Request 💡
-    url: https://github.com/shobbak/react-native-auto-skeleton/discussions/new?category=ideas
+    url: https://github.com/numandev1/react-native-auto-skeleton/discussions/new?category=ideas
     about: If you have a feature request, please create a new discussion on GitHub.
   - name: Discussions on GitHub 💬
-    url: https://github.com/shobbak/react-native-auto-skeleton/discussions
+    url: https://github.com/numandev1/react-native-auto-skeleton/discussions
     about: If this library works as promised but you need help, please ask questions there.

README.md

@@ -71,6 +71,12 @@ Building skeleton screens is tedious. You eyeball pixel values, hardcode widths,
 
 ![Skeleton Inspector live capture](media/simulator_with_debugger.png)
 
+<div align="center">
+
+*Live capture —> simulator on the right, Skeleton Inspector DevTools panel on the left*
+
+</div>
+
 <br/>
 
 ```
@@ -101,20 +107,12 @@ Your app (simulator / device)                React Native DevTools
 
 1. Wrap your component with `<SkeletonCapture name="card">`
 2. Open Skeleton Inspector in React Native DevTools
-3. Click **Capture** — real skeleton geometry is measured instantly
+3. Click **⬡ Capture** — real skeleton geometry is measured instantly
 4. Remove any unwanted skeletons by clicking the trash icon
-5. Click **Save** — `card.skeletons.json` is written to your project
-6. Import the JSON and pass it to `<Skeleton initialSkeletons={…}>`
+5. Click **↓ Save .ts (Responsive)** for a TypeScript file that scales on every device, or **↓ Save skeletons.json** for a static JSON snapshot
+6. The inspector shows the exact import + `<Skeleton>` snippet — copy and paste it
 7. Ship. Done.
 
-<div align="center">
-
-![Skeleton Inspector live capture](media/simulator_with_debugger.png)
-
-*Live capture — simulator on the left, Skeleton Inspector DevTools panel on the right*
-
-</div>
-
 ---
 
 ## Installation
@@ -129,13 +127,98 @@ yarn add react-native-auto-shimmer
 
 ---
 
+## Two approaches to skeleton data
+
+There are two ways to provide skeleton data to `<Skeleton>`. Choose based on your needs:
+
+| | **TypeScript `.ts`** ⭐ | **JSON `.json`** |
+|---|---|---|
+| How | Inspector auto-generates a `.ts` file with live measurements | Inspector saves raw captured data as `.json` |
+| Horizontal | ✅ `x`/`w` stored as percentages → scale to any screen width | ⚠️ All values are dp — may shift on different device widths |
+| Vertical | ✅ `y`/`h` are exact dp from live layout | ✅ `y`/`h` are exact dp from live layout |
+| Editable | ✅ Plain TypeScript — add breakpoints, conditions, comments | ❌ Static data — requires re-capture to change |
+| Auto-generate | ✅ Click **Save .ts** in the inspector | ✅ Click **Save .json** in the inspector |
+| Prop | `initialSkeletons={data}` | `initialSkeletons={data}` |
+
+**Use `.ts`** when you target multiple screen sizes or want easy future refinement — **recommended**.  
+**Use `.json`** when you want the fastest possible save-and-ship flow on a single target device.
+
+---
+
 ## Quick start
 
-### 1. Wrap your screen
+### Option A — TypeScript `.ts` ⭐ (recommended, responsive)
+
+In the inspector, click **↓ Save .ts (Responsive)** after capturing. The inspector writes a ready-to-use `.ts` file like this to your `src/skeletons/` folder:
+
+```ts
+// card.skeletons.ts — auto-generated by Skeleton Inspector
+import type { ResponsiveSkeletons } from 'react-native-auto-shimmer';
+
+/**
+ * Auto-generated by Skeleton Inspector — 2025-01-15
+ * Component : card
+ * Captured  : 390dp wide · 280dp tall · 6 pieces
+ *
+ * ✅ Pixel-perfect: x/w are percentages so widths scale on any screen.
+ *    y/h are exact dp values measured from the live layout.
+ *
+ * 💡 Add more breakpoints (capture on other devices) for more precision,
+ *    or refine values manually in this file.
+ */
+const cardSkeletons: ResponsiveSkeletons = {
+  breakpoints: {
+    390: {
+      name: 'card',
+      viewportWidth: 390,
+      width: 390,
+      height: 280,
+      skeletons: [
+        // piece 0 — hero image / banner
+        { x: 0, y: 0, w: 100, h: 180, r: 0 },
+        // piece 1 — text line (full width)
+        { x: 4.1, y: 196, w: 91.8, h: 22, r: 6 },
+        // piece 2 — text line
+        { x: 4.1, y: 226, w: 61.5, h: 16, r: 6 },
+        // piece 3 — avatar circle
+        { x: 4.1, y: 252, w: 8.2, h: 32, r: '50%' },
+        // piece 4 — text line
+        { x: 14.4, y: 258, w: 35.9, h: 18, r: 6 },
+      ],
+    },
+  },
+};
+
+export default cardSkeletons;
+```
+
+Then import and use it — same `initialSkeletons` prop as JSON:
+
+```tsx
+// ArticleScreen.tsx
+import { Skeleton } from 'react-native-auto-shimmer';
+import cardSkeletons from './skeletons/card.skeletons';
+
+export function ArticleScreen() {
+  const [loading, setLoading] = useState(true);
+
+  return (
+    <Skeleton loading={loading} initialSkeletons={cardSkeletons} style={styles.card}>
+      <ArticleCard />
+    </Skeleton>
+  );
+}
+```
+
+> **Why `.ts` over `.json`?** The `x`/`w` values are percentages of the container width, so the skeleton automatically scales to the right proportions on any device. `y`/`h` are exact dp from the live layout measurement. Capture once on any device — it looks right everywhere.
+
+### Option B — JSON `.json` (quickest, single device)
+
+Run the [Skeleton Inspector](#capturing-skeletons-with-skeleton-inspector), click **↓ Save skeletons.json**, then use the generated file:
 
 ```tsx
 import { Skeleton } from 'react-native-auto-shimmer';
-import cardSkeletons from './skeletons/card.skeletons.json'; // added after first capture
+import cardSkeletons from './skeletons/card.skeletons.json'; // generated by inspector
 
 export function ArticleScreen() {
   const [loading, setLoading] = useState(true);
@@ -148,7 +231,7 @@ export function ArticleScreen() {
 }
 ```
 
-Before you've captured skeletons, `<Skeleton>` shows a blank fallback. The next section walks through capturing the real geometry.
+Before you've set up skeleton data, `<Skeleton>` shows its children without a skeleton overlay. The next section walks through the inspector capture workflow.
 
 ---
 
@@ -246,18 +329,40 @@ The panel draws every skeleton with a numbered colour overlay and a data table b
 
 ### Step 9 — Save
 
-Click **↓ Save skeleton.json**. The file lands in the Output Directory shown in the sidebar (default `src/skeletons`):
+Two buttons appear after capture:
+
+| Button | Output | Best for |
+|---|---|---|
+| **↓ Save .ts (Responsive)** ⭐ | `card.skeletons.ts` | Every device — x/w scale as percentages |
+| **↓ Save skeletons.json** | `card.skeletons.json` | Quick snapshot, single device |
+
+Files land in the Output Directory shown in the sidebar (default `src/skeletons`):
 
 ```
-src/skeletons/card.skeletons.json   ✓
+src/skeletons/card.skeletons.ts    ✓  ← responsive TypeScript (recommended)
+src/skeletons/card.skeletons.json  ✓  ← static JSON snapshot
 ```
 
+After saving, the inspector shows a **ready-to-paste code snippet** with the exact import line and `<Skeleton>` usage — just copy and drop it into your screen file.
+
 ---
 
 ## Using saved skeletons
 
 ### Import directly
 
+**From the auto-generated `.ts` file (recommended):**
+
+```tsx
+import cardSkeletons from './skeletons/card.skeletons';  // ← .ts, no extension needed
+
+<Skeleton loading={loading} initialSkeletons={cardSkeletons} style={styles.card}>
+  <ArticleCard />
+</Skeleton>
+```
+
+**Or from a JSON snapshot:**
+
 ```tsx
 import cardSkeletons from './skeletons/card.skeletons.json';
 
@@ -273,9 +378,9 @@ Register all your skeletons at app startup so every `<Skeleton>` can reference t
 ```ts
 // App.tsx
 import { registerSkeletons } from 'react-native-auto-shimmer';
-import cardSkeletons      from './skeletons/card.skeletons.json';
-import profileSkeletons   from './skeletons/profile.skeletons.json';
-import feedPostSkeletons  from './skeletons/feedPost.skeletons.json';
+import cardSkeletons      from './skeletons/card.skeletons';      // .ts (responsive)
+import profileSkeletons   from './skeletons/profile.skeletons';   // .ts (responsive)
+import feedPostSkeletons  from './skeletons/feedPost.skeletons.json'; // .json also works
 
 registerSkeletons({
   card:     cardSkeletons,
@@ -558,7 +663,7 @@ We welcome contributions of all sizes — bug fixes, new features, docs improvem
 
 ## License
 
-MIT © [Numan](https://github.com/shobbak)
+MIT © [Numan](https://github.com/numandev1)
 
 ---
 

example/metro.config.js

@@ -36,7 +36,7 @@ function skeletonSaveMiddleware(middleware) {
       req.on('data', (chunk) => (body += chunk));
       req.on('end', () => {
         try {
-          const { name, outDir, viewportWidth, height, skeletons } = JSON.parse(body);
+          const { name, outDir, viewportWidth, height, skeletons, asDescriptor, descriptorSource } = JSON.parse(body);
 
           if (!name || !Array.isArray(skeletons) || !viewportWidth || !outDir) {
             res.writeHead(400);
@@ -49,30 +49,40 @@ function skeletonSaveMiddleware(middleware) {
             : path.resolve(__dirname, outDir);
           fs.mkdirSync(absOut, { recursive: true });
 
-          const jsonFile = path.join(absOut, `${name}.skeletons.json`);
-
-          let existing = { breakpoints: {} };
-          if (fs.existsSync(jsonFile)) {
-            try { existing = JSON.parse(fs.readFileSync(jsonFile, 'utf8')); }
-            catch { existing = { breakpoints: {} }; }
+          if (asDescriptor && descriptorSource) {
+            // ── Save as .ts (ResponsiveSkeletons) ──────────────────────────
+            const tsFile = path.join(absOut, `${name}.skeletons.ts`);
+            fs.writeFileSync(tsFile, descriptorSource, 'utf8');
+            const relFile = path.relative(__dirname, tsFile);
+            console.log(`\n  [Skeleton Inspector] ✓  ${name}  →  ${skeletons.length} skeletons  →  ${relFile}\n`);
+            res.writeHead(200);
+            res.end(JSON.stringify({ ok: true, file: relFile, skeletons: skeletons.length }));
+          } else {
+            // ── Save as .json (raw breakpoints) ────────────────────────────
+            const jsonFile = path.join(absOut, `${name}.skeletons.json`);
+
+            let existing = { breakpoints: {} };
+            if (fs.existsSync(jsonFile)) {
+              try { existing = JSON.parse(fs.readFileSync(jsonFile, 'utf8')); }
+              catch { existing = { breakpoints: {} }; }
+            }
+
+            const key = String(Math.round(viewportWidth));
+            existing.breakpoints[key] = {
+              name,
+              viewportWidth: Math.round(viewportWidth),
+              width: Math.round(viewportWidth),
+              height: Math.round(height || 0),
+              skeletons,
+            };
+
+            fs.writeFileSync(jsonFile, JSON.stringify(existing, null, 2) + '\n');
+
+            const relFile = path.relative(__dirname, jsonFile);
+            console.log(`\n  [Skeleton Inspector] ✓  ${name}  →  ${skeletons.length} skeletons  →  ${relFile}\n`);
+            res.writeHead(200);
+            res.end(JSON.stringify({ ok: true, file: relFile, skeletons: skeletons.length }));
           }
-
-          const key = String(Math.round(viewportWidth));
-          existing.breakpoints[key] = {
-            name,
-            viewportWidth: Math.round(viewportWidth),
-            width: Math.round(viewportWidth),
-            height: Math.round(height || 0),
-            skeletons,
-          };
-
-          fs.writeFileSync(jsonFile, JSON.stringify(existing, null, 2) + '\n');
-
-          const relFile = path.relative(__dirname, jsonFile);
-          console.log(`\n  [Skeleton Inspector] ✓  ${name}  →  ${skeletons.length} skeletons  →  ${relFile}\n`);
-
-          res.writeHead(200);
-          res.end(JSON.stringify({ ok: true, file: relFile, skeletons: skeletons.length }));
         } catch (e) {
           console.error('[skeleton-save] Error:', e.message);
           res.writeHead(500);

example/src/screens/CardScreen.tsx

@@ -14,7 +14,7 @@ import {
   type AnimationStyle,
 } from 'react-native-auto-shimmer';
 import { ScreenShell } from '../navigation';
-import cardSkeletons from '../skeletons/card.skeletons.json';
+import cardSkeletons from '../skeletons/card.skeletons';
 
 const PAD = 16;
 

example/src/screens/FeedScreen.tsx

@@ -14,8 +14,8 @@ import {
   type AnimationStyle,
 } from 'react-native-auto-shimmer';
 import { ScreenShell } from '../navigation';
-import feedPostSkeletons from '../skeletons/feedPost.skeletons.json';
-import feedPostTextSkeletons from '../skeletons/feedPostText.skeletons.json';
+import feedPostSkeletons from '../skeletons/feedPost.skeletons';
+import feedPostTextSkeletons from '../skeletons/feedPostText.skeletons';
 
 const PAD = 16;
 

example/src/screens/KitchenSinkScreen.tsx

@@ -23,13 +23,13 @@ import {
 } from 'react-native-auto-shimmer';
 import { ScreenShell } from '../navigation';
 
-// ── Skeletons ──────────────────────────────────────────────────────────────────────
-import cardSkeletons from '../skeletons/card.skeletons.json';
-import feedPostSkeletons from '../skeletons/feedPost.skeletons.json';
-import feedPostTextSkeletons from '../skeletons/feedPostText.skeletons.json';
-import profileSkeletons from '../skeletons/profile.skeletons.json';
-import productItemSkeletons from '../skeletons/productItem.skeletons.json';
-import notificationSkeletons from '../skeletons/notification.skeletons.json';
+// ── Skeletons (descriptor-driven — responsive on every device) ─────────────────────
+import cardSkeletons from '../skeletons/card.skeletons';
+import feedPostSkeletons from '../skeletons/feedPost.skeletons';
+import feedPostTextSkeletons from '../skeletons/feedPostText.skeletons';
+import profileSkeletons from '../skeletons/profile.skeletons';
+import productItemSkeletons from '../skeletons/productItem.skeletons';
+import notificationSkeletons from '../skeletons/notification.skeletons';
 
 // ── Layout constants ───────────────────────────────────────────────────────────
 const { width: SCREEN_W } = Dimensions.get('window');

example/src/screens/NotificationsScreen.tsx

@@ -13,7 +13,7 @@ import {
   type AnimationStyle,
 } from 'react-native-auto-shimmer';
 import { ScreenShell } from '../navigation';
-import notificationSkeletons from '../skeletons/notification.skeletons.json';
+import notificationSkeletons from '../skeletons/notification.skeletons';
 
 const PAD = 16;
 

example/src/screens/ProductGridScreen.tsx

@@ -15,7 +15,7 @@ import {
   type AnimationStyle,
 } from 'react-native-auto-shimmer';
 import { ScreenShell } from '../navigation';
-import productItemSkeletons from '../skeletons/productItem.skeletons.json';
+import productItemSkeletons from '../skeletons/productItem.skeletons';
 
 const W = Dimensions.get('window').width;
 const PAD = 16;

example/src/screens/ProfileScreen.tsx

@@ -14,7 +14,7 @@ import {
   type AnimationStyle,
 } from 'react-native-auto-shimmer';
 import { ScreenShell } from '../navigation';
-import profileSkeletons from '../skeletons/profile.skeletons.json';
+import profileSkeletons from '../skeletons/profile.skeletons';
 
 const PAD = 16;