open-index/open-npm huggingface dataset:
npm package: @neupauer/tailwindcss-plugin-aspect-ratio
Description: A Tailwind CSS plugin for aspect ratio.
Author: Peter Neupauer
Latest version: 0.1.4

<p align="center">
  <img src="assets/logo.png" alt="Tailwind CSS Plugin – Aspect Ratio" height="100" />
</p>

# Tailwind CSS Plugin – Aspect Ratio

<p align="center">
  <img src="assets/screenshot.png" alt="Screenshot" />
</p>

## Install

1. Install the plugin:

```bash
# Using npm
npm install @neupauer/tailwindcss-plugin-aspect-ratio --save-dev

# Using Yarn
yarn add @neupauer/tailwindcss-plugin-aspect-ratio -D
```

2. Add it to your `tailwind.config.js` file:

```js
// tailwind.config.js
module.exports = {
  // ...
  plugins: [require("@neupauer/tailwindcss-plugin-aspect-ratio")],
};
```

## Configuration

By default, some common aspect ratios are provided, but you can override or extend them with the `aspectRatio` key in your `tailwind.config.js` file.

```js
// tailwind.config.js
module.exports = {
  theme: {
    // default
    aspectRatio: {
      // Square
      "1:1": 1,
      // Landscape
      "2:1": 2 / 1,
      "3:1": 3 / 1,
      "3:2": 3 / 2,
      "4:1": 4 / 1,
      "4:3": 4 / 3,
      "5:4": 5 / 4,
      "16:9": 16 / 9,
      "16:10": 16 / 10,
      "19:10": 19 / 10,
      "21:9": 21 / 9,
      // Portrait
      "1:2": 1 / 2,
      "1:3": 1 / 3,
      "2:3": 2 / 3,
      "1:4": 1 / 4,
      "3:4": 3 / 4,
      "4:5": 4 / 5,
      "9:16": 9 / 16,
      "10:16": 10 / 16,
      "10:19": 10 / 19,
      "9:21": 9 / 21,
    },
  },
  variants: {
    // default
    aspectRatio: ["responsive"],
  },
};
```

## Usage

> The target element can only contain one child, the others will be hidden. If you need to add more child, wrap them within another element e.g., `<div>`

```html
<div class="aspect-ratio-16:9">
  <img src="image.jpg" class="object-cover" />
</div>

<div class="aspect-ratio-16:9">
  <div class="text-white bg-blue-500">Aspect Ratio</div>
</div>
```

```html
<!-- OK -->
<div class="aspect-ratio-16:9">
  <div>
    <p>Aspect</p>
    <p>Ratio</p>
  </div>
</div>

<!-- NOOK -->
<div class="aspect-ratio-16:9">
  <img src="image1.jpg" class="object-cover" />
  <!-- visible-->
  <img src="image2.jpg" class="object-cover" />
  <!-- hidden-->
  <img src="image3.jpg" class="object-cover" />
  <!-- hidden-->
</div>
```

### Min-Aspect Ratio

```html
<div class="min-aspect-ratio-16:9">
  <p>Aspect Ratio</p>
</div>

<div class="min-aspect-ratio-16:9">
  <p>
    Aspect Ratio. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    Eius ullam iste distinctio nobis ipsum soluta dolorem esse omnis! Architecto
    impedit odio magni non repudiandae vitae veniam id dolorum sint eum. Lorem
    ipsum dolor sit amet, consectetur adipisicing elit. Eius ullam iste
    distinctio nobis ipsum soluta dolorem esse omnis! Architecto impedit odio
    magni non repudiandae vitae veniam id dolorum sint eum.
  </p>
</div>
```
npm package: @neupauer/tailwindcss-plugin-bg-spinner
Description: A Tailwind CSS plugin for background spinner.
Author: Peter Neupauer
Latest version: 1.0.1

# Tailwind CSS Plugin – Background Spinner

A Tailwind CSS plugin for background spinner.

## Install

1. Install the plugin:

```bash
# Using npm
npm install @neupauer/tailwindcss-plugin-bg-spinner

# Using Yarn
yarn add @neupauer/tailwindcss-plugin-bg-spinner
```

2. Add it to your `tailwind.config.js` file:

```js
// tailwind.config.js
module.exports = {
  // ...
  plugins: [require("@neupauer/tailwindcss-plugin-bg-spinner")],
};

// With Optional Config
module.exports = {
  // ...
  plugins: [
    require("@neupauer/tailwindcss-plugin-bg-spinner")({
      svg: (color) => `<svg>...${color}...</svg>`,
    }),
  ],
};
```

## Usage

```html
<div class="bg-spinner-blue-500/50"></div>
```
npm package: @neupauer/tailwindcss-plugin-colors
Description: A Tailwind CSS plugin for extracting theme colors as global variables.
Author: Peter Neupauer
Latest version: 1.0.1

# Tailwind CSS Plugin – Colors

Plugin for extracting theme colors as global variables.

## Install

1. Install the plugin:

```bash
# Using npm
npm install @neupauer/tailwindcss-plugin-colors

# Using Yarn
yarn add @neupauer/tailwindcss-plugin-colors
```

2. Add it to your `tailwind.config.js` file:

```js
// tailwind.config.js
module.exports = {
  // ...
  plugins: [require("@neupauer/tailwindcss-plugin-colors")],
};

// With Optional Config
module.exports = {
  // ...
  plugins: [
    require("@neupauer/tailwindcss-plugin-colors")({
      // prefix: "",          // No Prefix       --blue-500
      // prefix: "tw-color",  // Default Prefix  --tw-color-blue-500
      prefix: "my-prefix",    // Custom Prefix   --my-prefix-blue-500
    }),
  ],
};
```

## Usage

```html
<div style="color: var(--tw-color-blue-500)"></div>
```
npm package: @neupauer/tailwindcss-plugin-filter
Description: A Tailwind CSS plugin for controlling filter & backdrop-filter behaviour.
Author: Peter Neupauer
Latest version: 1.0.2

# Tailwind CSS Plugin – Filter & Backdrop Filter

Utilities for controlling filter & backdrop-filter behaviour.

## Install

1. Install the plugin:

```bash
# Using npm
npm install @neupauer/tailwindcss-plugin-filter

# Using Yarn
yarn add @neupauer/tailwindcss-plugin-filter
```

2. Add it to your `tailwind.config.js` file:

```js
// tailwind.config.js
module.exports = {
  // ...
  plugins: [require("@neupauer/tailwindcss-plugin-filter")],
};
```

## Configuration

```js
// tailwind.config.js
module.exports = {
  theme: {
    // default
    filterFunctions: {
      blur: {},
      brightness: {},
      contrast: {},
      dropShadow: {},
      grayscale: {},
      hueRotate: {},
      invert: {},
      saturate: {},
      sepia: {},
    },
  },
  variants: {
    // default
    filterFunctions: ["responsive", "hover"],
  },
};
```

## Usage

### Filter & Backdrop Filter

To enable filters you have to add the `.filter` or `.backdrop` utility. _(Similar to the native Tailwind `transform` utility)_

### None

If you want to disable filters, then you can use the `.filter-none` or `.backdrop-none` utility.

### Responsive

To enable or disable filters at a specific breakpoint, add a `{screen}:` prefix to any of the filter utilities. For example, use `md:filter` or `md:backdrop` to apply the `filter` or `backdrop` utility at only medium screen sizes and above.

### Available Filter Functions

> By default, no values are provided for any filter

- `.blur-{value}`
- `.brightness-{value}`
- `.contrast-{value}`
- `.drop-shadow-{value}`
- `.grayscale-{value}`
- `.hue-rotate-{value}`
- `.invert-{value}`
- `.saturate-{value}`
- `.sepia-{value}`

> Utility for **filter: opacity()** or **backdrop-filter: opacity()** is not provided because [according to MDN](<https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/opacity()>) this function is similar to the more established **opacity** property. The difference is that with filters, some browsers provide hardware acceleration for better performance.
>
> So, you can use [Tailwind's native `opacity` utility](https://tailwindcss.com/docs/opacity).

### Example Usage

```js
// tailwind.config.js
module.exports = {
  theme: {
    filterFunctions: {
      blur: {
        1: "1px",
        2: "2px",
        3: "3px",
      },
      saturate: {
        40: "40%",
      },
    },
  },
};
```

```html
<!-- filter: blur(2px) saturate(40%); -->
<div class="filter blur-2 saturate-40"></div>

<!-- backdrop-filter: blur(2px) saturate(40%); -->
<div class="backdrop blur-2 saturate-40"></div>

<!--
  filter: blur(2px) saturate(40%);
  backdrop-filter: blur(2px) saturate(40%);
-->
<div class="filter backdrop blur-2 saturate-40"></div>

<!-- filter: none; -->
<div class="filter-none"></div>

<!-- backdrop-filter: none; -->
<div class="backdrop-none"></div>
```
npm package: @neupauer/tailwindcss-plugin-line-clamp
Description: A Tailwind CSS plugin for line clamp.
Author: Peter Neupauer
Latest version: 0.1.1

# Tailwind CSS Plugin – Line Clamp

## Install

1. Install the plugin:

```bash
# Using npm
npm install @neupauer/tailwindcss-plugin-line-clamp --save-dev

# Using Yarn
yarn add @neupauer/tailwindcss-plugin-line-clamp -D
```

2. Add it to your `tailwind.config.js` file:

```js
// tailwind.config.js
module.exports = {
  // ...
  plugins: [require("@neupauer/tailwindcss-plugin-line-clamp")],
};
```

## Configuration

By default, some line clamps are provided, but you can override or extend them with the `lineClamp` key in your `tailwind.config.js` file.

```js
// tailwind.config.js
module.exports = {
  theme: {
    // default
    lineClamp: [1, 2, 3, 4, 5, 6, 7, 8, 9],
  },
  variants: {
    // default
    lineClamp: ["responsive"],
  },
};
```

## Usage

```html
<p class="line-clamp-2">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas in purus mi.
  Sed pulvinar lobortis scelerisque. Ut a lectus metus. Morbi quam est,
  dignissim nec egestas quis, lacinia sit amet turpis.
</p>

<p class="line-clamp-3">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas in purus mi.
  Sed pulvinar lobortis scelerisque. Ut a lectus metus. Morbi quam est,
  dignissim nec egestas quis, lacinia sit amet turpis.
</p>

<p class="line-clamp-4">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas in purus mi.
  Sed pulvinar lobortis scelerisque. Ut a lectus metus. Morbi quam est,
  dignissim nec egestas quis, lacinia sit amet turpis.
</p>
```
npm package: @neupauer/tailwindcss-plugin-marker
Description: A Tailwind CSS plugin for marker box.
Author: Peter Neupauer
Latest version: 0.0.1

# Tailwind CSS Plugin – Marker

This plugin allows you to customize the list marker box.

## Install

1. Install the plugin:

```bash
# Using npm
npm install @neupauer/tailwindcss-plugin-marker --save-dev

# Using Yarn
yarn add @neupauer/tailwindcss-plugin-marker -D
```

2. Add it to your `tailwind.config.js` file:

```js
// tailwind.config.js
module.exports = {
  // ...
  plugins: [require("@neupauer/tailwindcss-plugin-marker")],
};
```

## Configuration

By default, no variation is added, so you must enable it yourself.

E.g, enable variations for text color (`marker:text-red-500`) and list style type (`marker:list-disc`)

```js
// tailwind.config.js
module.exports = {
  variants: {
    textColor: [/** ... */, "marker"],
    listStyleType: [/** ... */, "marker"],
  },
};
```

## Usage

> You must first add the "activator" class `.marker` and then you can use the enabled variants

```html
<ul class="marker marker:list-disc marker:text-red-500">
  <li>Hello</li>
  <li>World</li>
</ul>

<!-- With prefix `tw-` -->
<ul class="tw-marker marker:tw-list-disc marker:tw-text-red-500">
  <li>Hello</li>
  <li>World</li>
</ul>

<!-- With responsive variant -->
<ul class="marker marker:list-disc marker:text-red-500 sm:marker:text-blue-500">
  <li>Hello</li>
  <li>World</li>
</ul>
```
npm package: @neupauer/tailwindcss-plugin-separated
Description: A Tailwind CSS plugin for adding separators between items.
Author: Peter Neupauer
Latest version: 1.0.1

# Tailwind CSS Plugin – Separated

Utilities for adding separators between items.

## Install

1. Install the plugin:

```bash
# Using npm
npm install @neupauer/tailwindcss-plugin-separated

# Using Yarn
yarn add @neupauer/tailwindcss-plugin-separated
```

2. Add it to your `tailwind.config.js` file:

```js
// tailwind.config.js
module.exports = {
  // ...
  plugins: [require("@neupauer/tailwindcss-plugin-separated")],
};
```

## Configuration

```js
// tailwind.config.js
module.exports = {
  theme: {
    // default
    separated: {
      comma: ", ",
    },
  },
  variants: {
    // default
    separated: [],
  },
};
```

## Usage

### Example Config

```js
// tailwind.config.js
module.exports = {
  theme: {
    separated: {
      comma: ", ",
      // Custom separator string
      bullet: " • ",
      // Custom separator object
      funny: {
        content: "' • '", // do not forget double quotes !
        backgroundColor: "pink",
      },
    },
  },
};
```

Syntax `.separated-{key}` e.g. `.separated-comma`, `.separated-bullet`

```html
<ul>
  <li class="inline separated-comma">milk</li>
  <li class="inline separated-comma">eggs</li>
  <!-- empty item will be ignored -->
  <li class="inline separated-comma"></li>
  <li class="inline separated-comma">bread</li>
</ul>

<!-- milk, eggs, bread -->
```

```html
<ul>
  <li class="inline separated-comma">
    <a href="#milk">milk</a>
  </li>
  <li class="inline separated-comma">
    <a href="#eggs">eggs</a>
  </li>
  <li class="inline separated-comma">
    <a href="#bread">bread</a>
  </li>
</ul>

<!-- <a>milk</a>, <a>eggs</a>, <a>bread</a> -->
```
npm package: @neuqb/cus-v-button
Description: a custom button
Author: baiyx@neuqsoft
Latest version: 1.1.1

# cus-v-button

- 根据`elementui`改造


## 实现功能
- 按钮点击事件防抖

## 使用方式

### 引入方式
``` javascript
import Vue from 'vue';
import ElButton from '@neuqb/cus-v-button';

Vue.use(ElButton);
```
或者
``` javascript
import Vue from 'vue';
import ElButton from '@neuqb/cus-v-datepicker';

Vue.component(ElButton.name, ElButton);
```
或者
``` javascript
import Vue from 'vue';
import ElButton from '@neuqb/cus-v-datepicker';

export default {
  components: {
    [ElButton.name]: ElButton
  }
}
```

### 使用方式
- 参照：`elementui`
- [elementui/datetime-picker](https://element.eleme.cn/#/zh-CN/component/button)

### 防抖参数
- 默认开启 300ms
- 组件参数优先级高于全局参数
- 全局参数开启
``` javascript
 vue.prototype.$BUTTON_DEBOUNCE_TIME = 500
 ```
- 全局参数关闭
``` javascript
 vue.prototype.$BUTTON_DEBOUNCE_TIME = false
 ```
- 组件参数开启防抖
``` vue
<el-button @click="handleClick" :debounce="500">按钮</el-button>
```
- 组件参数关闭防抖
``` vue
<el-button @click="handleClick" :debounce="false">按钮</el-button>
```

## 注意事项
- 全局引入`elementui`样式
npm package: @neuqb/cus-v-datepicker
Description: a custom datepicker
Author: baiyx@neuqsoft
Latest version: 1.3.0

# cus-v-datepicker

- 根据`elementui`改造
- 根据`v-mask`、`text-mask-core`改造

## 实现功能
- 输入框加入掩码功能，能自动按照掩码格式填充掩码

## 使用方式

### 引入方式
``` javascript
import Vue from 'vue';
import '@neuqb/cus-v-datepicker/lib/style.css';
import ElDatePicker from '@neuqb/cus-v-datepicker';

Vue.use(ElDatePicker);
```
或者
``` javascript
import Vue from 'vue';
import '@neuqb/cus-v-datepicker/lib/style.css';
import ElDatePicker from '@neuqb/cus-v-datepicker';

Vue.component(ElDatePicker.name, ElDatePicker);
```
或者
``` javascript
import Vue from 'vue';
import '@neuqb/cus-v-datepicker/lib/style.css';
import ElDatePicker from '@neuqb/cus-v-datepicker';

export default {
  components: {
    [ElDatePicker.name]: ElDatePicker
  }
}
```

### 使用方式
- 参照：`elementui`
- [elementui/datetime-picker](https://element.eleme.cn/#/zh-CN/component/datetime-picker)
- [elementui/date-picker](https://element.eleme.cn/#/zh-CN/component/date-picker)

## 注意事项
- 已经全局引入`elementui`样式的或样式冲突的不需要引入`@neuqb/cus-v-datepicker/lib/style.css`
npm package: @neuqb/cus-v-table
Description: a virtual table component
Author: baiyx@neuqsoft
Latest version: 1.1.1

# cus-v-table

- 根据 [vxe-pc-ui](https://github.com/x-extends/vxe-pc-ui)
- 根据 [vxe-table](https://github.com/x-extends/vxe-table)

- 主要功能：复刻并打包
- 解决问题：低版本项目依赖冲突
npm package: @neuqsoft/media-player
Description: Audio and video playback library that supports vue2 and vue3.
Author: baiyx@neuqsoft
Latest version: 1.0.0-alpha.8

# @neuqsoft/media-player
- 媒体播放器开发, 包含视频播放器与音频播放器
- 主工程 `packages/media-player` 以`vue@2.7.14`开发
- 使用pnpm管理仓库
- 发布版本号`package.version`与根仓库版本一致

## 使用文档详见 [docs](./docs) 或 [doc](http://172.30.3.75/docs/media-player/)
npm package: @neuqsoft/pdf-viewer
Description: This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
Latest version: 1.0.0

# Vue 3 + TypeScript + Vite

This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.

## Recommended IDE Setup

- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).

## Type Support For `.vue` Imports in TS

TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.

If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:

1. Disable the built-in TypeScript Extension
   1. Run `Extensions: Show Built-in Extensions` from VSCode's command palette
   2. Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
npm package: @neur0tx/fig-mcp-server
Description: MCP server for reading local Figma .fig files from mockups/
Latest version: 0.0.5

# @neur0tx/fig-mcp-server

Local MCP server that reads Figma `.fig` archives from `mockups/` and exposes them as MCP resources plus extraction tools.

## Features

- Stdio MCP server (`node index.js`)
- Auto-discovers every `*.fig` file in `mockups/`
- Exposes each file as a resource URI: `fig://<fileName>.fig`
- Resource reads return full structured JSON context:
  - metadata, node tree, components/component sets, styles, variables, image manifest, indexes

## Usage

Put your `*.fig` files into a local directory (for example `mockups/`) and configure Codex to run this MCP.

### Codex Configuration

Add this MCP server to `~/.codex/config.toml` (replace `/path/to/mockups` with your directory):

```toml
[mcp_servers.fig_mcp]
command = "npx"
args = [
  "-y",
  "@neur0tx/fig-mcp-server@latest",
  "--mockups-dir",
  "/path/to/mockups"
]
```

### Mockups directory

Can be anything that's accessible by MCP server (it's probably running inside sandbox). Put all `.fig` files under that directory:

```text
mockups/
```

Example:

```text
mockups/mockup.fig
mockups/settings-screen.fig
```

Server should be pointed to the mockups directory just like in the Codex config above. The parameter itself works like this:

- `--mockups-dir <path>`: explicit directory with `.fig` files.
  - If set and invalid/unreadable, server exits immediately with an error.
  - If set and valid/readable, server uses it even if empty.
  - If not set, server resolves directory automatically:
    1. `<script_dir>/mockups` is used only when it is non-empty (ignoring `.gitkeep`).
    2. Otherwise it tries `<cwd>/mockups`.

It's not necessary to restart the server after adding a new file.

## Notes and limitations

This is essentially a glorified `.fig`-file parser and it's mostly vibe-coded too. Information about some of the mockup
contents is best-effort and may be partially inaccurate or incomplete. Notable examples of that:

- `download_figma_images` and `get_screenshot` prefer archive `imageRef` bytes when available. If they're missing, the server
  performs a best-effort node render fallback via third-party renderer which may produce borked screenshots or use incorrect font typefaces.
- For opaque binary payloads, this implementation returns metadata and warnings unless payload is JSON-compatible.
- Component libraries / UI Kits won't be available, only the data from source files will be.

In other words, your mileage may vary. My experience shows that this MCP provides enough data for the agent to construct something
that looks like the mockup itself but not quite the same. Don't hesitate to just screenshot things from Figma itself because
official Figma MCP does that too (they also have `get_screenshot` tool).

## Other documents

- [MCP API description](./API.md)
npm package: @neuradex/sao
Description: Stateful Agent Orchestration - methodology and library for AI agent state management
Author: neuradex
Latest version: 0.1.3

# SAO - Stateful Agent Orchestration

**A methodology for overcoming AI agent context limitations and enabling continuous execution of large-scale projects**

## What is SAO?

AI agents lose memory between sessions:

```
Traditional: Session 1 → [Work] → Session ends → Memory lost → Session 2 → [Start over]

SAO:         Session 1 → [Work] → Save state to documents → Session 2 → Restore state → [Continue]
```

SAO solves this problem through **document-based state persistence**.

## Documentation

| Document | Description |
|----------|-------------|
| [concepts/README.md](./concepts/README.md) | SAO methodology overview |
| [concepts/templates/](./concepts/templates/) | Project templates |

### Template List

| Template | Purpose |
|----------|---------|
| [project-readme.md](./concepts/templates/project-readme.md) | Project entry point & progress overview |
| [design.md](./concepts/templates/design.md) | Vision, design philosophy & phase design |
| [phase-readme.md](./concepts/templates/phase-readme.md) | Phase progress & checklist |
| [implementation-plan.md](./concepts/templates/implementation-plan.md) | Detailed implementation steps |

## Core Concepts

```
Project (entire project)
  ├── Phase 1 (major work unit)
  │     ├── Step 1 (concrete task)
  │     ├── Step 2
  │     └── Step 3
  ├── Phase 2
  └── Phase N
```

### State Transitions

```
Not Started ──→ In Progress ──→ Completed
                    │
                    ↓
                 Blocked
```

## Consumers

Configuration files for tools that use SAO:

| Consumer | Files |
|----------|-------|
| Claude Code | [consumers/claude/](./consumers/claude/) |

## Quick Start

### Install

```bash
npx init-sao-claude
```

This sets up `.claude/sao/concepts/` and `.claude/commands/` in your project.

### Update

```bash
npx init-sao-claude --update
```

Updates SAO core files and commands while preserving your projects in `.claude/sao/projects/`.

## License

MIT