open-index/open-npm huggingface dataset:
npm package: @skein.ca/web-components
Description: Skein Web Components
Author: Skein Team
Latest version: 0.0.5

# Skein Web Components

Speed up web development with Skein Web Components

Easy-to-use components built with StencilJS using plain HTML, CSS, and JS.
Compatible with your favorite framework.

## Get Started

Install the latest version from NPM:

```bash
# npm
npm install @skein.ca/web-components --save

#yarn
yarn add @skein.ca/web-components
```

### Using with HTML

In your HTML file's `<head>`, add the following lines before the closing tag:

```html
    <!-- rest of head -->
    <script type="module" src="https://unpkg.com/@skein.ca/web-components/dist/skein-wc/skein-wc.esm.js" async></script>
    <link rel="stylesheet" href="https://unpkg.com/@skein.ca/web-components/dist/skein-wc/skein-wc.css">
  </head>
```

### Changelog

See [changelog.md](./changelog.md)
npm package: @skeinteam/wait-for
Description: Use waitFor to delay the execution of a piece of code until a dependency is loaded.
Latest version: 0.0.22

# waitFor

Use waitFor to delay the execution of a piece of code until a dependency is loaded. 

## Installation

`npm install --save @skeinteam/wait-for`

## Usage

For example, if waiting for jQuery to be loaded:

```
waitFor('jQuery')
  .then(() => {
    console.log('jQuery is loaded');
  })
  .catch(error => console.log(error));
```
npm package: @skel-ui/react
Description: Lightweight and powerful skeleton library for React.
Author: https://github.com/sudoaugustin
Latest version: 1.1.1

Skel UI resolves the challenges of implementing skeletons by eliminating the need to create dedicated loading screens and providing an easier way to manage skeleton states using React Context.

See the comparision [here](https://skel-ui.augustin.zip/#comparision).

## Get Started

### Import CSS

Import the CSS file into the root of your application.

```ts
import "@skel-ui/react/styles.css";
```

### Implement Skel UI

Now it's time for you to craft your user interface to life!

```tsx
import * as Skel from "@skel-ui/react";
import Image from "@ui/image";

export default function PostCard() {
  const { post, isLoading } = usePost();

  return (
    <Skel.Root isLoading={isLoading}>
      <div className="group w-full max-w-80 p-2.5 bg-white border border-slate-200 rounded-lg overflow-hidden duration-300">
        <Skel.Item
          as={Image}
          src={post?.image}
          className="rounded aspect-[800/530] duration-150 loaded:group-hover:scale-110"
        />
        <Skel.h1 className="text-xl font-bold mt-4 loading:max-w-48">{post?.title}</Skel.h1>
        <Skel.p className="text-sm my-2 loading:h-[3.75rem]">{post?.description}</Skel.p>
      </div>
    </Skel.Root>
  );
}
```

Now, not only have you designed the skeleton, but you have also done the actual UI. Additionally, the skeleton state for the entire UI is handled in a single place at the `<Skel.Root>` .



For full documentation, visit [skel-ui.augustin.zip](https://skel-ui.augustin.zip/)
npm package: @skel-ui/react-native
Description: Lightweight and powerful skeleton library for React.
Author: https://github.com/sudoaugustin
Latest version: 1.1.1

Skel UI resolves the challenges of implementing skeletons by eliminating the need to create dedicated loading screens and providing an easier way to manage skeleton states using React Context.

See the comparision [here](https://skel-ui.augustin.zip/#comparision).

## Get Started

### Add Skel Provider

Wrap your application with Skel UI provider.


```tsx
import * as Skel from "@skel-ui/react-native";

export default function App() {
  return <Skel.Provider> ... </Skel.Provider>;
}
```

### Implement Skel UI

Now it's time for you to craft your user interface to life!

```tsx
import * as Skel from "@skel-ui/react-native";
import RN from "react-native";

export default function PostCard() {
  const { post, isLoading } = usePost();

  return (
    <Skel.Root isLoading={isLoading}>
      <RN.View style={styles.card}>
        <Skel.Image src={post?.image} style={styles.cardImage} />
        <Skel.Text sw="65%" style={styles.cardTitle}>
          {post?.title}
        </Skel.Text>
        <Skel.Text numberOfLines={3} style={styles.cardDescription}>
          {post?.description}
        </Skel.Text>
      </RN.View>
    </Skel.Root>
  );
}

const styles = RN.StyleSheet.create({
  card: {
    width: 320,
    padding: 10,
    marginHorizontal: "auto",
    borderWidth: 1,
    borderColor: "#e2e8f0",
    borderRadius: 8,
  },
  cardImage: {
    borderRadius: 4,
    aspectRatio: 800 / 530,
  },
  cardTitle: {
    marginTop: 16,
    marginBottom: 8,
    fontSize: 24,
    lineHeight: 28,
    fontWeight: 800,
  },
  cardDescription: {
    fontSize: 14,
    lineHeight: 20,
  },
});
```

Now, not only have you designed the skeleton, but you have also done the actual UI. Additionally, the skeleton state for the entire UI is handled in a single place at the `<Skel.Root>` .

For full documentation, visit [skel-ui.augustin.zip](https://skel-ui.augustin.zip/)
npm package: @skeleton-elements/core
Description: Skeleton elements (aka UI Skeletons, Skeleton Screens, Ghost Elements) are representations of UI that will be available (loaded) soon. They are designed to improve perceived performance.
Author: Vladimir Kharlampidi
Latest version: 2.0.0

# Skeleton Elements

Skeleton elements (aka UI Skeletons, Skeleton Screens, Ghost Elements) - UI for improved perceived performance

* [Documentation](#documentation)
* [Installation](#installation)
* [Styles](#styles)
* [Usage](#usage)
* [Contribution](#contribution)
* [Licence](#licence)

## Documentation

See the [documentation](https://skeleton-elements.dev/core/) with examples and API documentation.

## Installation

With npm:

```
npm i @skeleton-elements/core --save
```

## Styles

Skeleton Elements requires stylesheet to be included:

```
<link rel="stylesheet" href="path/to/skeleton-elements.css>
```

Wiht bunder (like webpack) you can import syles directly from JavaScript:

```
import '@skeleton-elements/core/skeleton-elements.css';
```

Or it can be included for each component separately:

* `@skeleton-elements/core/skeleton-block.css` - Block component
* `@skeleton-elements/core/skeleton-text.css` - Text component
* `@skeleton-elements/core/skeleton-effects.css` - Effects

### SCSS

`SCSS` styles are also included:

* `@skeleton-elements/core/skeleton-elements.scss` - All styles
* `@skeleton-elements/core/skeleton-block.scss` - Block component
* `@skeleton-elements/core/skeleton-text.scss` - Text component
* `@skeleton-elements/core/skeleton-effects.scss` - Effects

## Usage

See the [documentation]() for more examples and API documentation.

```html
<style>
  .user-avatar .skeleton-block {
    width: 120px;
    height: 120px;
    border-radius: 50%;
  }
</style>
<div id="app">
  ...
  <div class="user">
    <div class="user-avatar">
      <div class="skeleton-block skeleton-effect-fade"></div>
    </div>
    <div class="user-name">
      <span class="skeleton-text skeleton-effect-fade">John Doe</span>
    </div>
  </div>
  ...
</div>

```

## Contribution

Yes please! See the [contributing guidelines](https://github.com/nolimits4web/skeleton-elements/blob/master/CONTRIBUTING.md) for details.

## Licence

This project is licensed under the terms of the [MIT license](https://github.com/nolimits4web/skeleton-elements/blob/master/LICENSE).
npm package: @skeleton-elements/svelte
Description: Skeleton elements (aka UI Skeletons, Skeleton Screens, Ghost Elements) are representations of UI that will be available (loaded) soon. They are designed to improve perceived performance.
Author: Vladimir Kharlampidi
Latest version: 2.0.0

# Skeleton Elements Svelte

Skeleton elements (aka UI Skeletons, Skeleton Screens, Ghost Elements) - UI for improved perceived performance

* [Documentation](#documentation)
* [Installation](#installation)
* [Styles](#styles)
* [Components](#components)
* [Usage](#usage)
* [Contribution](#contribution)
* [Licence](#licence)

## Documentation

See the [documentation](https://skeleton-elements.dev/svelte/) with examples and API documentation.

## Installation

With npm:

```
npm i @skeleton-elements/svelte --save
```

## Styles

Skeleton Elements requires stylesheet to be included:

```
<link rel="stylesheet" href="path/to/skeleton-elements.css>
```

Wiht bunder (like webpack) you can import syles directly from JavaScript:

```
import '@skeleton-elements/svelte/skeleton-elements.css';
```

Or it can be included for each component separately:

* `@skeleton-elements/svelte/skeleton-avatar.css` - Avatar component
* `@skeleton-elements/svelte/skeleton-block.css` - Block component
* `@skeleton-elements/svelte/skeleton-image.css` - Image component
* `@skeleton-elements/svelte/skeleton-text.css` - Text component
* `@skeleton-elements/svelte/skeleton-effects.css` - Effects

### SCSS

`SCSS` styles are also included:

* `@skeleton-elements/svelte/skeleton-elements.scss` - All styles
* `@skeleton-elements/svelte/skeleton-avatar.scss` - Avatar component
* `@skeleton-elements/svelte/skeleton-block.scss` - Block component
* `@skeleton-elements/svelte/skeleton-image.scss` - Image component
* `@skeleton-elements/svelte/skeleton-text.scss` - Text component
* `@skeleton-elements/svelte/skeleton-effects.scss` - Effects

## Components

The following components are available:

* `SkeletonAvatar` - responsive avatar placeholder
* `SkeletonBlock` - block placeholder
* `SkeletonImage` - responsive image placeholder
* `SkeletonText` - skeleton text (uses custom Skeleton font)

## Usage

See the [documentation]() for more examples and API documentation.

```html
<div id="app">
  ...
  {#if loading}
    <div class="user">
      <div class="user-avatar">
        <SkeletonAvatar effect="fade" size={120} />
      </div>
      <div class="user-name">
        <SkeletonText effect="fade">John Doe</SkeletonText>
      </div>
    </div>
  {/if}
  ...
</div>
<script>
  // import Skeleton components
  import { SkeletonAvatar, SkeletonText } from '@skeleton-elements/svelte';

  // import Skeleton styles
  import '@skeleton-elements/svelte/skeleton-elements.css';

  let loading = true;
</script>
```

## Contribution

Yes please! See the [contributing guidelines](https://github.com/nolimits4web/skeleton-elements/blob/master/CONTRIBUTING.md) for details.

## Licence

This project is licensed under the terms of the [MIT license](https://github.com/nolimits4web/skeleton-elements/blob/master/LICENSE).
npm package: @skeleton-ui/core
Description: This project was bootstrapped with [TSDX](https://github.com/jaredpalmer/tsdx).
Author: Corey Bruyere
Latest version: 0.2.1-alpha.0

# TSDX Bootstrap

This project was bootstrapped with [TSDX](https://github.com/jaredpalmer/tsdx).

## Local Development

Below is a list of commands you will probably find useful.

### `npm start` or `yarn start`

Runs the project in development/watch mode. Your project will be rebuilt upon changes. TSDX has a special logger for you convenience. Error messages are pretty printed and formatted for compatibility VS Code's Problems tab.

<img src="https://user-images.githubusercontent.com/4060187/52168303-574d3a00-26f6-11e9-9f3b-71dbec9ebfcb.gif" width="600" />

Your library will be rebuilt if you make edits.

### `npm run build` or `yarn build`

Bundles the package to the `dist` folder.
The package is optimized and bundled with Rollup into multiple formats (CommonJS, UMD, and ES Module).

<img src="https://user-images.githubusercontent.com/4060187/52168322-a98e5b00-26f6-11e9-8cf6-222d716b75ef.gif" width="600" />

### `npm test` or `yarn test`

Runs the test watcher (Jest) in an interactive mode.
By default, runs tests related to files changed since the last commit.
npm package: @skeletor/css
Description: CSS generator
Author: Dan Morgan
Latest version: 0.17.1

# @skeletor/css

Atomic CSS generator for rapid prototyping.

## Installation

```bash
# npm
npm i --save-dev @skeletor/css
# Yarn
yarn add --dev @skeletor/css
```

## CLI

```
Usage
  $ skeletor

Options
  --config, -C     Specify config file/path
  --output, -O     Specify output folder/path
  --gzip           Produce gzipped outputs
  --no-json        Disable output of JSON object
  --no-sass        Disable output of Sass core
  --no-minify      Prefer compact to default compressed Sass outputStyle
  --no-sourcemap   Disable output of sourcemaps
  --vars-build     Produce a CSS custom properties build
  --core-build     Produce a core-only CSS build (debug flag, should be empty)

Examples
  $ skeletor --config config.yml --output dist
  Specify an alternate path to config file (default: ./skeletor.yml)
```

## Documentation

- [Config structure](https://github.com/xdmorgan/skeletor/tree/master/packages/css/docs/config-structure.md)
- [Generated proerty and class reference](https://github.com/xdmorgan/skeletor/tree/master/packages/css/docs/generated-properties.md)
- [Generated file structure](https://github.com/xdmorgan/skeletor/tree/master/packages/css/docs/index.md)
npm package: @skellla/lint-config
Description: Reusable eslint config with sane settings.
Author: SkeLLLa
Latest version: 3.0.0

# @skellla/lint-config

A comprehensive, opinionated ESLint configuration for TypeScript projects with Prettier integration.

## Features

- 🎯 **TypeScript-first**: Built with TypeScript projects in mind
- 🔧 **Strict rules**: Includes ESLint recommended + TypeScript strict configurations
- 🎨 **Prettier integration**: Automatic code formatting with conflict resolution
- 📦 **Import validation**: Smart import/export validation with TypeScript support
- 📚 **TSDoc support**: Validates TypeScript documentation comments
- ⚡ **Modern ESLint**: Uses the new flat config format (ESLint 9+)

## Installation

```bash
npm install --save-dev @skellla/lint-config eslint prettier typescript
# or
pnpm add -D @skellla/lint-config eslint prettier typescript
# or
yarn add -D @skellla/lint-config eslint prettier typescript
```

## Usage

### ESLint Configuration

Create an `eslint.config.js` file in your project root:

```javascript
// Option 1: Import the main config (default export)
import sharedConfig from '@skellla/lint-config';

export default [
  ...sharedConfig,
  // Add your custom rules here if needed
  {
    rules: {
      // Your project-specific overrides
    },
  },
];
```

```javascript
// Option 2: Import the eslint config explicitly
import eslintConfig from '@skellla/lint-config/eslint';

export default [
  ...eslintConfig,
  // Add your custom rules here if needed
  {
    rules: {
      // Your project-specific overrides
    },
  },
];
```

### Prettier Configuration

Create a `prettier.config.js` file in your project root:

```javascript
import prettierConfig from '@skellla/lint-config/prettier';

export default prettierConfig;
```

Or extend it with your own settings:

```javascript
import prettierConfig from '@skellla/lint-config/prettier';

export default {
  ...prettierConfig,
  // Your custom overrides
  printWidth: 100,
};
```

### With custom configurations

```javascript
import sharedConfig from '@skellla/lint-config';

export default [
  ...sharedConfig,
  {
    // Override for specific file patterns
    files: ['src/legacy/**/*.js'],
    rules: {
      '@typescript-eslint/no-explicit-any': 'warn',
    },
  },
  {
    // Additional ignores
    ignores: ['build/**', 'public/**'],
  },
];
```

## What's included

This configuration includes:

- **ESLint recommended rules**
- **TypeScript ESLint strict and stylistic rules**
- **Import/export validation** with TypeScript resolver
- **Prettier integration** with automatic formatting
- **TSDoc validation** for documentation comments
- **Sensible defaults** for Node.js environments

## Peer Dependencies

Make sure you have these installed in your project:

- `eslint` ^9.0.0
- `prettier` ^3.0.0
- `typescript` ^5.0.0

## License

MIT

## Contributing

Issues and pull requests are welcome on [GitHub](https://github.com/SkeLLLa/eslint-config).
npm package: @skelmen/nestjs-azure-service-bus-module
Description: Azure Service Bus module for Nest.js framework
Author: Artem Sydorenko
Latest version: 1.1.0

<p align="center">
<a href="https://docs.microsoft.com/en-us/azure/service-bus-messaging/service-bus-messaging-overview" target="_blank">Azure Service Bus</a> module for <a href="https://nestjs.com" target="_blank">Nest.js framework</a></p>
<p align="center">
<a href="https://www.npmjs.com/package/@skelmen/nestjs-azure-service-bus-module" target="_blank"><img src="https://img.shields.io/npm/v/@skelmen/nestjs-azure-service-bus-module.svg" alt="NPM Version" /></a>
<a href="https://www.npmjs.com/~skelmen" target="_blank"><img src="https://img.shields.io/npm/l/@skelmen/nestjs-azure-service-bus-module.svg" alt="Package License" /></a>
</p>

## Description

<a href="https://docs.microsoft.com/en-us/azure/service-bus-messaging/service-bus-messaging-overview" target="_blank">Azure Service Bus</a> is a cloud based message broker. You can use Azure Service Bus to send messages between applications or services. It supports AMQP / STOMP protocols, automatic scalability and disaster recovery.

Azure Service Bus module for Nest.js based on the @azure/service-bus package.

## Installation

```bash
$ npm i --save @skelmen/nestjs-azure-service-bus-module
```

## Usage

Recommended Nest.js version >=10.0.0

#### Import module

```ts
AzureServiceBusModule.forRootAsync([
  {
    name: 'provider_name_1',
    useFactory: (configService: ConfigService) => ({
      connectionString: configService.get('connectionString1'),
      options: {} // Azure service bus client options
    }),
    inject: [ConfigService],
  },
  {
    name: 'provider_name_2',
    useFactory: () => ({
      connectionString: 'azure_service_bus_connection_string',
      options: {} // Azure service bus client options
    }),
  },
]),
```

#### Service example

For messages scheduling pass `updateTime` param to `emit` method.

```ts
@Injectable()
export class AppService {

  constructor(
    @Inject('provider_name_1') private readonly serviceBusClient: AzureServiceBusClient,
  ) { }

  async getData(){
    const options = {}; // Azure options for configuring tracing and the abortSignal
    const payload = {
      body: {
        id: '39219'
      }
    };
    await this.serviceBusClient.emit({ payload, options });
  }

  async scheduleData(){
    const options = {};
    const payload = {
      body: {
        id: '39219'
      }
    };
    // (Optional) For scheduling messages
    const updateTime = new Date('2023-02-20 13:26:00+02');
    await this.serviceBusClient.emit({ payload, options, updateTime });
  }
}
```

#### Handle events

Add handler to your any service

```ts
@Subscribe('service-bus-queue-name') // Service bus queue name
async handler({ body }) {
  console.log(body);
}
```

## License
This project is licensed under the [MIT License](LICENSE.md)
npm package: @skelogh/muril
Description: muril — stream brown noise to your default audio output (more noise types planned)
Author: Aaron Gonzalez
Latest version: 0.1.0

# muril

**muril** (*murmur* + *‑il*) is a minimal CLI that plays **brown noise** through your default audio output. Stop with **Ctrl+C**.

## Requirements

- **Node.js 18+**
- **macOS** (x64 / arm64), **Windows** (x64 / arm64), or **Linux** (x64 / arm64) with a working default audio device

Audio output uses [`@echogarden/audio-io`](https://github.com/echogarden-project/audio-io) (prebuilt native addons, no compiler toolchain needed at install time).

## Install

The package is published on npm as **`@skelogh/muril`** (scoped name required by the registry). The CLI command is still **`muril`**.

```bash
npm install @skelogh/muril
```

## Run with npx

```bash
npx @skelogh/muril
```

That runs the `muril` binary from the package (no global install required).

**Options:** `--volume <0-1>` sets the starting level (default `1`). `-v` / `--version` prints the package version.

**Interactive (terminal only):** while running, **↑** / **↓** adjust volume in steps of 5%. **Ctrl+C** stops playback. If stdin isn’t a TTY (e.g. piped), only `--volume` applies and there are no key controls.

After a global install, you can run:

```bash
muril
```

## From source

```bash
git clone https://github.com/SkeloGH/muril.git
cd muril
npm install
npm run build
npm test
node dist/cli.js
```

To use the **`muril`** command name locally: `npm link` in this directory, then run `muril`.

## License

MIT
npm package: @skelon/cli
Description: CLI tool for Skelon to generate skeleton templates.
Latest version: 0.1.2

<div align="center">
  <h1>⚡ @skelon/cli</h1>
  <p><strong>Codebase analysis and static skeleton generation for enterprise apps.</strong></p>

  <p>
    <a href="https://www.npmjs.com/package/@skelon/cli"><img src="https://img.shields.io/npm/v/@skelon/cli.svg?style=for-the-badge&logo=npm&color=CB3837" alt="NPM Version" /></a>
    <a href="https://github.com/ingointo/skelon"><img src="https://img.shields.io/github/actions/workflow/status/ingointo/skelon/ci.yml?branch=main&style=for-the-badge&logo=github" alt="Build Status" /></a>
    <img src="https://img.shields.io/badge/License-MIT-gray.svg?style=for-the-badge" alt="License" />
  </p>
</div>

---

## 📖 Introduction

`@skelon/cli` is a powerful developer tool for high-performance applications. While Skelon can analyze layouts at runtime, the CLI allows you to scan your codebase, identify structural UI habits, and **pre-generate static skeleton presets**.

This is ideal for large-scale enterprise applications where you want to eliminate the runtime overhead of DOM/Native node measurement.

## 🚀 Installation

```bash
# Global installation
npm install -g @skelon/cli

# Or run via npx
npx @skelon/cli --help
```

## ⚡ Quick Usage

### Scan your components
Scan a directory to identify repeating layout patterns that could be converted into static skeletons.

```bash
skelon scan --dir ./src/components --output patterns.json
```

### Generate static presets
Create a reusable TypeScript preset file based on your UI structures.

```bash
skelon generate --preset patterns.json --out ./src/skeletons.ts
```

## ✨ Features

- **Static Analysis**: Identifies layout geometry without running the browser.
- **Enterprise Ready**: Perfect for large monorepos with hundreds of unique components.
- **Performance Boost**: Reduces runtime CPU usage by moving measurement logic to the build step.
- **CI/CD Integrated**: Automatically update your skeleton presets as part of your build pipeline.

## 📦 Skelon Ecosystem

| Package | Role |
| :--- | :--- |
| **@skelon/core** | The Inference Intelligence Engine |
| **@skelon/react** | Web / Next.js Rendering Adapter |
| **@skelon/react-native** | Mobile / Expo Rendering Adapter |

---

## 🔗 Links

- **Documentation**: [skelon.js.org/cli](https://skelon.js.org/cli)
- **Repository**: [github.com/ingointo/skelon](https://github.com/ingointo/skelon)
- **Contributing**: [Join the project](https://github.com/ingointo/skelon/blob/main/CONTRIBUTING.md)

## 📄 License

MIT © [ingointo](https://github.com/ingointo)
npm package: @skelon/core
Description: Framework-agnostic intelligent skeleton layout detection engine.
Latest version: 0.1.2

<div align="center">
  <h1>⚡ @skelon/core</h1>
  <p><strong>The Intelligent Layout Inference & Skeleton Generation Engine</strong></p>

  <p>
    <a href="https://www.npmjs.com/package/@skelon/core"><img src="https://img.shields.io/npm/v/@skelon/core.svg?style=for-the-badge&logo=npm&color=CB3837" alt="NPM Version" /></a>
    <a href="https://github.com/ingointo/skelon"><img src="https://img.shields.io/github/actions/workflow/status/ingointo/skelon/ci.yml?branch=main&style=for-the-badge&logo=github" alt="Build Status" /></a>
    <img src="https://img.shields.io/badge/License-MIT-gray.svg?style=for-the-badge" alt="License" />
  </p>
</div>

---

## 📖 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

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

## ⚡ Quick Example

```typescript
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](https://skelon.js.org)
- **Repository**: [github.com/ingointo/skelon](https://github.com/ingointo/skelon)
- **Issues**: [Report a Bug](https://github.com/ingointo/skelon/issues)

## 📄 License

MIT © [ingointo](https://github.com/ingointo)
npm package: @skelon/react
Description: React adapter for Skelon.
Latest version: 0.1.2

<div align="center">
  <h1>⚡ @skelon/react</h1>
  <p><strong>Pixel-perfect skeleton loaders for React, generated automatically.</strong></p>

  <p>
    <a href="https://www.npmjs.com/package/@skelon/react"><img src="https://img.shields.io/npm/v/@skelon/react.svg?style=for-the-badge&logo=react&color=61DAFB" alt="NPM Version" /></a>
    <a href="https://github.com/ingointo/skelon"><img src="https://img.shields.io/github/actions/workflow/status/ingointo/skelon/ci.yml?branch=main&style=for-the-badge&logo=github" alt="Build Status" /></a>
    <img src="https://img.shields.io/badge/License-MIT-gray.svg?style=for-the-badge" alt="License" />
  </p>
</div>

---

## 📖 Introduction

`@skelon/react` is the official React adapter for Skelon. It allows you to transform your existing functional and class components into beautiful skeletons with **zero manual CSS**.

Simply wrap your components in the `<Skelon>` provider, and the library will use the `@skelon/core` engine to measure and mask your UI while data is fetching.

## 🚀 Installation

```bash
pnpm add @skelon/core @skelon/react
# or
npm install @skelon/core @skelon/react
```

## ⚡ Quick Example

```tsx
import { Skelon } from '@skelon/react';

export const UserProfile = ({ user, isLoading }) => {
  return (
    <Skelon loading={isLoading}>
      <div className="flex gap-4 p-4">
        <img className="rounded-full w-12 h-12" src={user.avatar} />
        <div>
          <h2 className="text-lg font-bold">{user.name}</h2>
          <p className="text-sm text-gray-500">{user.email}</p>
        </div>
      </div>
    </Skelon>
  );
};
```

## ✨ Features

- **Zero Config**: No need to manually define widths and heights for your placeholders.
- **SSR Compatible**: Seamlessly works with Next.js (App Router) and standard SSR.
- **Layout Shift Protection**: Placeholders occupy the exact spatial coordinates of the final UI.
- **Custom Shimmers**: Fully customizable gradients and animation speeds via the `theme` prop.

## 📦 Skelon Ecosystem

| Package | Role |
| :--- | :--- |
| **@skelon/core** | Core Layout Inference Engine |
| **@skelon/react-native** | Official React Native Adapter |
| **@skelon/cli** | Codebase scanning and static presets |

---

## 🔗 Links

- **Documentation**: [skelon.js.org](https://skelon.js.org)
- **Repository**: [github.com/ingointo/skelon](https://github.com/ingointo/skelon)
- **Examples**: [React Web Demos](https://github.com/ingointo/skelon/tree/main/packages/example-react)

## 📄 License

MIT © [ingointo](https://github.com/ingointo)
npm package: @skelon/react-native
Description: React Native and Expo adapter for Skelon.
Latest version: 0.1.2

<div align="center">
  <h1>⚡ @skelon/react-native</h1>
  <p><strong>Automatic skeleton loading for React Native and Expo apps.</strong></p>

  <p>
    <a href="https://www.npmjs.com/package/@skelon/react-native"><img src="https://img.shields.io/npm/v/@skelon/react-native.svg?style=for-the-badge&logo=react&color=61DAFB" alt="NPM Version" /></a>
    <a href="https://github.com/ingointo/skelon"><img src="https://img.shields.io/github/actions/workflow/status/ingointo/skelon/ci.yml?branch=main&style=for-the-badge&logo=github" alt="Build Status" /></a>
    <img src="https://img.shields.io/badge/License-MIT-gray.svg?style=for-the-badge" alt="License" />
  </p>
</div>

---

## 📖 Introduction

`@skelon/react-native` brings the power of intelligent layout inference to mobile development. It automatically maps your `View`, `Text`, and `Image` components to high-performance native skeleton placeholders.

Powered by the `@skelon/core` engine, it ensures your mobile loading states match your design system perfectly without manual trial-and-error.

## 🚀 Installation

```bash
pnpm add @skelon/core @skelon/react-native
# or
npm install @skelon/core @skelon/react-native
```

## ⚡ Quick Example

```tsx
import { View, Text, Image } from 'react-native';
import { Skelon } from '@skelon/react-native';

export const MovieCard = ({ movie, isLoading }) => {
  return (
    <Skelon loading={isLoading}>
      <View style={{ padding: 16 }}>
        <Image source={{ uri: movie.poster }} style={{ width: 100, height: 150 }} />
        <Text style={{ fontSize: 18, fontWeight: 'bold' }}>{movie.title}</Text>
        <Text>{movie.year}</Text>
      </View>
    </Skelon>
  );
};
```

## ✨ Features

- **Native Performance**: Uses `Animated.View` for buttery smooth 60fps shimmer effects.
- **Expo Compatible**: Works out of the box with Expo projects without extra configuration.
- **Adaptive Sizing**: Skeletons automatically resize based on device screen dimensions and flexbox rules.
- **Complex UI Support**: Handles nested layouts, margins, and absolute positioning with ease.

## 📦 Skelon Ecosystem

| Package | Role |
| :--- | :--- |
| **@skelon/core** | Core Layout Inference Engine |
| **@skelon/react** | Official React (Web) Adapter |
| **@skelon/cli** | CLI tool for static layout generation |

---

## 🔗 Links

- **Documentation**: [skelon.js.org](https://skelon.js.org)
- **Repository**: [github.com/ingointo/skelon](https://github.com/ingointo/skelon)
- **Issues**: [Report a Bug](https://github.com/ingointo/skelon/issues)

## 📄 License

MIT © [ingointo](https://github.com/ingointo)
npm package: @skem9/bs5-datatables
Description: A simple datatables example for bootstrap 5.3.3 that included searching, searching by column, column sorting, loading from json, autobuilding the table, pagination, row editing, and more, with less than 600 lines of js.
Author: Yohn
Latest version: 0.1.0

# BS5-DataTables-without-jQuery
A simple datatables example for bootstrap 5.3.3 that included searching, searching by column, column sorting, loading from json, autobuilding the table, pagination, row editing, and more, with less than 600 lines of js.

## Install via npmjs
```bash
npm i --save @skem9/bs5-datatables
```

## Demo:
## [CodePen.io Demo](https://codepen.io/Yohn/pen/VwoJrOd)


> [!NOTE]
> This is a basic, good starting point, ready to be used and add onto without being all bloated with thousands of line of code. Just under 500 lines of javascript!
>
> I did include the [tkrotoff/bootstrap-floating-label](https://github.com/tkrotoff/bootstrap-floating-label) plugin cause, I just like his floating labels more than the default bootstrap floating labels.
npm package: @skema/basic
Description: Basic types for skema
Author: kaelzhang
Latest version: 1.0.40

# @skema/basic

[`skema`](https://github.com/kaelzhang/skema) type definitions for basic javascript types, including:

- `String` (`'string'`)
- `Number` (`'number'`)
- `Date` (`'date'`)
- `RegExp` (`'regexp'`)
- `Object` (`'object'`)
- `Function` (`'function'`)
- `Error` (`'error'`)
- `Symbol` (`'symbol'`)

## install

```sh
npm i @skema/basic
```

## `LOOSE`

The basic type definitions that it convert the properties of wrong values into the right ones if possible.

```js
import {defaults} from 'skema'
import {LOOSE} from '@skema/basic'

const {
  skema
} = defaults({
  types: LOOSE
})

const User = skema({
  id: Number,       // To use 'number' is also ok
  name: 'string'    // To use String is also ok
})

const user = User.from({
  id: '1',  // id will be converted to `1`
  name: 'Steve'
})

console.log(user)
// {
//   id: 1,
//   name: 'Steve'
// }

const Order = skema({
  id: String,
  createTime: Date
})

Order.from({
  id: '6352534847126241280',
  createTime: 'hahahaha'  // Oh, this date is gone too far!
})
// Error thrown
```

## `STRICT`

The very strict type definition, that it will throw if the given data doesn't match the type of the schema.

```js
import {defaults} from 'skema'
import {STRICT} from '@skema/basic'

const {
  skema
} = defaults({
  types: STRICT
})

const User = skema({
  id: Number,
  name: String
})

const user = User.from({
  // id must be a number
  id: '1',
  name: 'Steve'
})
// Error thrown
```
npm package: @skempisty/sk-ui
Description: Vite TypeScript library npm package template
Latest version: 1.0.2

# Vite TypeScript NPM Package

Scaffold TypeScript npm packages using this template to bootstrap your next library.

Versions of this template:
- [Vite TypeScript library npm package](https://github.com/jasonsturges/vite-typescript-npm-package)
- [Vite JavaScript library npm package](https://github.com/jasonsturges/vite-npm-package)
- [Rollup JavaScript library npm package](https://github.com/jasonsturges/npm-package-boilerplate)
- [Rollup TypeScript library npm package](https://github.com/jasonsturges/typescript-npm-package)


## Getting Started

Begin via any of the following:

- Press the "*Use this template*" button

- Use [degit](https://github.com/Rich-Harris/degit) to execute: 

    ```
    degit github:jasonsturges/vite-typescript-npm-package
    ```
    
- Use [GitHub CLI](https://cli.github.com/) to execute: 

    ```
    gh repo create <name> --template="https://github.com/jasonsturges/vite-typescript-npm-package"
    ```
    
- Simply `git clone`, delete the existing .git folder, and then:

    ```
    git init
    git add -A
    git commit -m "Initial commit"
    ````

Remember to use `npm search <term>` to avoid naming conflicts in the NPM Registery for your new package name.


## Usage

The following tasks are available for `npm run`:

- `start`: Run Vite in host mode for a local development environment (not included in production build)
- `watch`: Run Vite in watch mode to detect changes to files during development
- `build`: Run Vite to build a production release distributable


## Development

Vite features a host mode to enables development with real time HMR updates directly from the library via the `start` script.

To test your library from within an app:

- **From your library**: run `npm link` or `yarn link` command to register the package
- **From your app**: run `npm link "mylib"` or `yarn link "mylib"` command to use the library inside your app during development


## Development Cleanup

Once development completes, `unlink` both your library and test app projects.

- **From your app**: run `npm link "mylib"` or `yarn link "mylib"` command to use the library inside your app during development
- **From your library**: run `npm unlink` or `yarn unlink` command to register the package


## Release Publishing

Update your `package.json` to next version number, and remember to tag a release.

Once ready to submit your package to the NPM Registry, execute the following tasks via `npm` (or `yarn`):

- `npm run clean` &mdash; Assure a clean build
- `npm run build` &mdash; Build the package
- `npm run build:types` &mdash; Build API Extractor d.ts declaration

Assure the proper npm login:

```
npm login
```

Submit your package to the registry:

```
npm publish --access public
```
npm package: @skene/ai-skills
Description: 800+ AI skills for Claude and Cursor — PLG, marketing, security, DevEx, and more. One command to install.
Latest version: 0.1.0

# @skene/ai-skills

**800+ AI skills for Claude and Cursor** — PLG, marketing, security, DevEx, and more.

One command to install. No API keys. No setup.

## Install

```bash
npm install @skene/ai-skills
```

## Activate Skills

```bash
# Install to Cursor and Claude
npx skene-skills install --target all

# Cursor only
npx skene-skills install --target cursor

# Claude only
npx skene-skills install --target claude
```

## What's Included

| Category       | Skills | Description                          |
| -------------- | ------ | ------------------------------------ |
| Cursor Rules   | 241    | React, Next.js, Python, etc.        |
| Scientific     | 141    | Research, data science               |
| Marketing      | 73     | Content, SEO, campaigns              |
| PLG Frameworks | 43     | Product-led growth playbooks         |
| Customer Success | 28   | Health scoring, churn prevention     |
| RevOps         | 25     | Pipeline, forecasting                |
| ... and 19 more domains | | **Total: 800+ skills**          |

## How It Works

Skills are installed to:

- **Cursor:** `~/.cursor/skills/`
- **Claude:** `~/.claude/skills/`

Cursor and Claude automatically pick the right skill based on your prompt. No configuration needed.

## Commands

| Command                          | Description                |
| -------------------------------- | -------------------------- |
| `npx skene-skills install`      | Install to Cursor + Claude |
| `npx skene-skills stats`        | Show library statistics   |
| `npx skene-skills list --domain plg` | List skills by domain |
| `npx skene-skills uninstall`    | Remove installed skills    |

## Skill Sources

- Anthropic Official, Trail of Bits, obra/superpowers, K-Dense-AI, awesome-cursor-rules, Skene PLG

## License

MIT
npm package: @skenk_vela/demo-package
Description: Sample package: Node js for beginners
Author: skenk-vela
Latest version: 1.0.0

# Sample package: Node.js for beginners
This is a sample package to learn how to publish packages in npm.
## Installation
```bash
npm install @skenk_vela/demo-package


```
## Usage
```js
import { sum } from '@skenk_vela/demo-package'
console.log(sum(1, 2))
```
npm package: @skenk_vela/subtract-function
Description: Simple subtract function
Author: skenk_vela
Latest version: 1.0.0

# Sample package: subtract function

This is a sample package to learn how to publish packages in npm

## Installation
```bash
npm install @skenk_vela/subtract-function
```


## Usage
```js
import { subtract } from '@skenk_vela/subtract-function'
console.log(subtract(integerNumber1, integerNumber2))
```