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 Descriptor (.ts)** for a cross-platform `.ts` file, 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,85 @@ 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:
+
+| | **Descriptor** (TypeScript) ⭐ | **Capture** (Inspector → JSON) |
+|---|---|---|
+| How | Describe component structure in a `.ts` file | Inspector measures live layout, saves `.skeletons.json` |
+| Cross-platform | ✅ Perfect on every device & screen size | ⚠️ Vertical positions are device-specific |
+| Accuracy | Adapts at runtime to any container width | Pixel-perfect on the capture device |
+| Dynamic logic | ✅ `Platform.OS`, breakpoints, content length | ❌ Static JSON |
+| Auto-generate | ✅ Inspector generates a `.ts` starting point | ✅ Inspector saves directly |
+| Prop | `descriptor={myDescriptor}` | `initialSkeletons={data}` |
+
+**Use Descriptor** when you target multiple screen sizes, need Android precision, or want live adaptability — **recommended**.  
+**Use JSON Capture** when you want a quick pixel-perfect result on a single device or to verify layout visually.
+
+---
+
 ## Quick start
 
-### 1. Wrap your screen
+### Option A — Descriptor ⭐ (recommended, cross-platform)
+
+The inspector can **auto-generate** a `.ts` descriptor from your live layout. Click **Save Descriptor (.ts)** after capturing — it writes a starting-point `.ts` file you can refine. Or write one by hand:
+
+```tsx
+// card.skeletons.ts
+import type { SkeletonDescriptor } from 'react-native-auto-shimmer';
+
+const cardDescriptor: SkeletonDescriptor = {
+  display: 'flex',
+  flexDirection: 'column',
+  children: [
+    { aspectRatio: 16 / 9, borderRadius: 0 },          // hero image
+    {
+      display: 'flex', flexDirection: 'column',
+      padding: 16, gap: 8,
+      children: [
+        { text: 'Article Title Here', font: '700 18px Inter', lineHeight: 26 },
+        { text: 'Article body that may wrap across several lines of text.', font: '14px Inter', lineHeight: 20 },
+        {
+          display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 10,
+          children: [
+            { width: 32, height: 32, borderRadius: '50%' },        // avatar
+            { text: 'Author Name', font: '600 14px Inter', lineHeight: 20 },
+          ],
+        },
+      ],
+    },
+  ],
+};
+
+export default cardDescriptor;
+```
+
+```tsx
+// ArticleScreen.tsx
+import { Skeleton } from 'react-native-auto-shimmer';
+import cardDescriptor from './skeletons/card.skeletons';
+
+export function ArticleScreen() {
+  const [loading, setLoading] = useState(true);
+
+  return (
+    <Skeleton loading={loading} descriptor={cardDescriptor} style={styles.card}>
+      <ArticleCard />
+    </Skeleton>
+  );
+}
+```
+
+> `<Skeleton>` measures its own width via `onLayout` and runs `computeLayout()` automatically — no manual width tracking needed. Works identically on iOS and Android at any screen size.
+
+### Option B — JSON Capture (pixel-perfect on capture device)
+
+Run the [Skeleton Inspector](#capturing-skeletons-with-skeleton-inspector), click **Capture → 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 +218,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 a blank fallback. The next section walks through the inspector capture workflow.
 
 ---
 
@@ -246,12 +316,22 @@ 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 Descriptor (.ts)** ⭐ | `card.skeletons.ts` | Cross-platform, all Android sizes |
+| **↓ 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    ✓  ← descriptor (recommended)
+src/skeletons/card.skeletons.json  ✓  ← 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
@@ -558,7 +638,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;