📖 Introduction

@skelon/core is the framework-agnostic heart of the Skelon ecosystem. It provides the heavy-lifting logic for structural UI analysis, semantic classification, and skeleton shape synthesis.

Whether you are building a custom adapter or using Skelon in a vanilla environment, the Core engine provides the 10-stage geometry pipeline required to transform real layouts into beautiful, shimmering placeholders.

🚀 Installation

pnpm add @skelon/core
# or
npm install @skelon/core

⚡ Quick Example

import { SkelonEngine } from '@skelon/core';

// 1. Initialize the engine
const engine = new SkelonEngine();

// 2. Analyze a raw layout tree (Geometry + Metadata)
const layoutTree = engine.analyze(rootNode);

// 3. Synthesize the skeleton representation
const skeletonData = engine.synthesize(layoutTree);

console.log(skeletonData.shapes); // [{ type: 'avatar', x: 10, y: 10, radius: 25 }, ...]

✨ Features

• Geometric Precision: Calculates absolute and relative coordinates to ensure zero layout shift.
• Semantic Heuristics: Automatically distinguishes between text lines, avatars, buttons, and block images.
• Layout Clustering: Detects repeating patterns in lists and grids for optimized rendering.
• Highly Extensible: Easily define custom classification rules for proprietary UI components.

📦 Skelon Ecosystem

| Package | Role | | :--- | :--- | | @skelon/react | Official React & Next.js Adapter | | @skelon/react-native | Official React Native & Expo Adapter | | @skelon/cli | Static analysis and preset generation tool |

🔗 Links

• Documentation: skelon.js.org
• Repository: github.com/ingointo/skelon
• Issues: Report a Bug

📄 License

MIT © ingointo