instaskeleton 0.1.0 → 0.1.2

package/README.md

@@ -1,28 +1,50 @@
 # instaskeleton
 
-[![npm version](https://img.shields.io/npm/v/instaskeleton.svg)](https://www.npmjs.com/package/instaskeleton)
-[![bundle size](https://img.shields.io/bundlephobia/minzip/instaskeleton)](https://bundlephobia.com/package/instaskeleton)
-[![license](https://img.shields.io/npm/l/instaskeleton.svg)](https://github.com/LittleBoy9/instaskeleton/blob/main/LICENSE)
+> Ultra-light React skeleton loader with zero DOM scanning — the fastest way to add loading states to your React app
 
-Ultra-light React skeleton loader with **zero DOM scanning**, **zero layout measurement**, and **zero lag**.
+[![npm version](https://img.shields.io/npm/v/instaskeleton.svg?style=flat-square)](https://www.npmjs.com/package/instaskeleton)
+[![bundle size](https://img.shields.io/bundlephobia/minzip/instaskeleton?style=flat-square)](https://bundlephobia.com/package/instaskeleton)
+[![npm downloads](https://img.shields.io/npm/dm/instaskeleton.svg?style=flat-square)](https://www.npmjs.com/package/instaskeleton)
+[![license](https://img.shields.io/npm/l/instaskeleton.svg?style=flat-square)](https://github.com/LittleBoy9/instaskeleton/blob/main/LICENSE)
+[![TypeScript](https://img.shields.io/badge/TypeScript-Ready-blue?style=flat-square)](https://www.typescriptlang.org/)
+
+**instaskeleton** is the lightest React skeleton loading library that doesn't scan your DOM. Perfect for building fast, responsive loading states in React applications with shimmer animations, pulse effects, and automatic JSX inference.
 
 ```
-~1.2 KB gzipped (JS) + ~0.45 KB (CSS) = ~1.65 KB total
+~1.2 KB JS + ~0.45 KB CSS = ~1.65 KB gzipped (total)
 ```
 
+## Table of Contents
+
+- [Features](#why-instaskeleton)
+- [Installation](#install)
+- [Quick Start](#quick-start)
+- [Manual Schema](#manual-schema)
+- [HOC Pattern](#hoc-pattern)
+- [API Reference](#api-reference)
+- [Performance](#performance)
+- [Browser Support](#browser-support)
+- [License](#license)
+
 ## Why instaskeleton?
 
-Most skeleton libraries either:
-- Require separate skeleton components for every UI element
-- Scan the DOM at runtime to generate placeholders (slow, causes layout shifts)
+**The problem with other React skeleton loaders:**
+- They require separate skeleton components for every UI element (tedious)
+- They scan the DOM at runtime to generate placeholders (slow, causes layout shifts)
+- They bloat your bundle with unnecessary dependencies
+
+**instaskeleton solves this differently:**
 
-**instaskeleton** takes a different approach:
-- **Zero DOM scanning** — no runtime layout measurement
-- **Zero work when not loading** — early exit skips all computation
-- **Infer from JSX** — automatic skeleton generation from your React tree
-- **Manual schema** — pixel-perfect control when you need it
-- **LRU cache** — repeated renders are instant (100-entry limit prevents memory leaks)
-- **Reduced motion support** — respects `prefers-reduced-motion`
+| Feature | Benefit |
+|---------|----------|
+| ⚡ **Zero DOM scanning** | No runtime layout measurement, no CLS issues |
+| 🚀 **Zero work when not loading** | Early exit skips all computation |
+| 🎯 **Automatic JSX inference** | Skeleton shapes generated from your React component tree |
+| 📐 **Manual schema mode** | Pixel-perfect control when you need exact layouts |
+| 💾 **Smart LRU caching** | Repeated renders are instant (100-entry limit) |
+| 🎨 **Multiple animations** | Shimmer, pulse, or none — GPU accelerated |
+| ♿ **Accessibility first** | Respects `prefers-reduced-motion` automatically |
+| 📦 **Tiny bundle** | Only ~1.65KB gzipped total |
 
 ## Install
 
@@ -247,38 +269,12 @@ Animations are disabled automatically when `prefers-reduced-motion: reduce` is s
 | Lists with repeated items | `infer` + `cacheKey` | Cached after first render |
 | Complex nested structures | `infer` + `inferOptions` | Tune depth/node limits |
 
-## Example App
-
-The local example app is a comprehensive visual reference covering:
-
-- Profile cards, product grids, social feeds
-- Tables, file lists, pricing cards
-- Settings forms with mixed controls
-- Chat threads, deeply nested comment threads
-- Dashboard layouts with nested cards
-- E-commerce product detail pages
-- Multi-level navigation structures
-- Mixed media galleries
-- Complex forms with validation states
-- Manual schema mirrors showing exact structure
-- HOC usage patterns
-- All primitive node types
-- Animation comparison (shimmer, pulse, none)
-
-Run it from the repo root:
-
-```bash
-npm run example:install
-npm run example:dev
-```
-
 ## Development
 
 ```bash
 npm run build        # Build the library
 npm run typecheck    # Run TypeScript checks
 npm run dev          # Watch mode
-npm run example:dev  # Run example app
 ```
 
 ## Browser Support
@@ -287,10 +283,18 @@ npm run example:dev  # Run example app
 - Firefox 78+
 - Safari 14+
 
+## Keywords
+
+react skeleton, skeleton loader, react loading, loading placeholder, shimmer animation, react placeholder, skeleton screen, loading state, react ui components, typescript skeleton, lightweight skeleton loader, zero dom scanning, jsx inference
+
 ## License
 
 MIT © [LittleBoy9](https://github.com/LittleBoy9)
 
+---
+
+**Found this useful?** Give it a ⭐ on [GitHub](https://github.com/LittleBoy9/instaskeleton)!
+
 ## Notes
 
 - Inference walks the React element tree, not the rendered DOM.

package/package.json

@@ -1,9 +1,12 @@
 {
   "name": "instaskeleton",
-  "version": "0.1.0",
-  "description": "Ultra-light React skeleton generator with zero DOM scanning",
+  "version": "0.1.2",
+  "description": "Ultra-light React skeleton loader with zero DOM scanning. Automatic JSX inference, manual schema support, shimmer & pulse animations. Only ~1.65KB gzipped.",
   "license": "MIT",
-  "author": "Sounak Das",
+  "author": {
+    "name": "Sounak Das",
+    "url": "https://github.com/LittleBoy9"
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/LittleBoy9/instaskeleton.git"
@@ -11,7 +14,11 @@
   "bugs": {
     "url": "https://github.com/LittleBoy9/instaskeleton/issues"
   },
-  "homepage": "https://github.com/LittleBoy9/instaskeleton#readme",
+  "homepage": "https://littleboy9.github.io/instaskeleton/",
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/LittleBoy9"
+  },
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
@@ -40,10 +47,28 @@
   },
   "keywords": [
     "skeleton",
+    "skeleton-loader",
+    "skeleton-loading",
+    "skeleton-screen",
     "react",
+    "react-skeleton",
+    "react-loading",
+    "react-placeholder",
     "loading",
+    "loading-state",
+    "loading-indicator",
     "placeholder",
-    "ui"
+    "shimmer",
+    "shimmer-effect",
+    "pulse",
+    "animation",
+    "ui",
+    "component",
+    "typescript",
+    "zero-dom-scan",
+    "lightweight",
+    "performance",
+    "jsx-inference"
   ],
   "peerDependencies": {
     "react": ">=18"