open-index/open-npm huggingface dataset:
npm package: @lbsa71/granules
Description: Minimal multi-agent orchestrator using MCP
Latest version: 1.0.21

# GRANULES

Minimal multi-agent orchestrator. An MCP server holds work items (granules). Claude Code CLI instances act as workers that claim and complete granules.

## Design Principles

- **Self-building**: GRANULES bootstraps itself - the first worker plans, subsequent workers implement
- **Atomic claims**: Only one worker can claim a granule; claim fails if already taken
- **Summaries enable coordination**: Completed granules include summaries so workers can understand prior work

## Architecture

```
┌─────────────┐      ┌─────────────┐
│ Orchestrator│──────│ MCP Server  │
│   (loop)    │      │ (in-memory) │
└──────┬──────┘      └──────┬──────┘
       │                    │
       │ spawns             │ tools
       ▼                    ▼
┌─────────────┐      ┌─────────────┐
│  Worker W-1 │─────▶│  Worker W-2 │ ...
│ (claude cli)│      │ (claude cli)│
└─────────────┘      └─────────────┘
```

## Granule Classes

| Class | Purpose |
|-------|---------|
| `explore` | Understand codebase/context |
| `plan` | Design implementation approach |
| `implement` | Write/modify code (artifacts) |
| `test` | Write or run tests |
| `review` | Critique another worker's output |
| `consolidate` | Merge work from multiple workers |
| `audit` | Deferred architectural review |

## Quick Start

```bash
# Initialize project (creates .granules.json, mcp-config.json, logs/)
npx @lbsa71/granules --init

# Run with npx (no installation)
npx @lbsa71/granules

# Or with a specific task
npx @lbsa71/granules -p "Add dark mode support"

# Or with a specific model
npx @lbsa71/granules --model sonnet
```

## Project Structure

```
granules/
├── src/
│   ├── index.ts         # Entry point
│   ├── orchestrator.ts  # Main loop, worker spawning
│   ├── server.ts        # MCP server setup
│   ├── store.ts         # In-memory granule store
│   ├── types.ts         # Type definitions
│   ├── worker.ts        # Worker spawning, CLASS_PROMPTS
│   ├── ui.ts            # Terminal UI
│   ├── session-log.ts   # Session logging
│   ├── tools/           # MCP tool implementations
│   └── *.test.ts        # Tests
├── docs/                # Detailed documentation
├── logs/                # Worker output logs
└── mcp-config.json      # MCP server config
```

## Documentation

- [Granule Flow](docs/granule-flow.md) - State diagram and session examples
- [MCP Tools Reference](docs/mcp-tools.md)
- [Worker Prompt System](docs/worker-prompts.md)
- [Configuration](docs/configuration.md)
- [Architecture](ARCHITECTURE.md)
- [Contributing](CONTRIBUTING.md)

## CI/CD

- **CI**: Tests and build run automatically on all pull requests and pushes to `main`
- **Publish**: The package `@lbsa71/granules` is automatically published to npm on every push to `main`. Add `NPM_TOKEN` secret to GitHub repository settings.
npm package: @lbsonley/react-cosha
Description: Colorful shadows for your images in React
Author: Ben Sonley
Latest version: 0.1.3

<p align="center">
  <img src="sample.png" width="600">
</p>

# react-cosha

[![latest version on npm](https://img.shields.io/npm/v/@lbsonley/react-cosha)](https://www.npmjs.com/package/@lbsonley/react-cosha) [![npm downloads a month](https://img.shields.io/npm/dm/@lbsonley/react-cosha)](https://www.npmjs.com/package/@lbsonley/react-cosha) [![required node version](https://img.shields.io/node/v/@lbsonley/react-cosha)](https://github.com/nodejs/Release) [![package license](https://img.shields.io/npm/l/@lbsonley/react-cosha)](license)

> Colorful shadows for your images in React. 🎨

***Port [cosha](https://npm.robinloeffel.ch/cosha) to React***

## How

```sh
yarn add @lbsonley/react-cosha
```

```jsx
import React from "react";
import Cosha from "react-cosha";

const Page = () => (
  <>
    <h1>Colorfully Shadowed Images</h1>
    {/* With a plain old image */}
    <Cosha>
      <img src="palm-tree.jpg" alt="nice vibes"/>    
    </Cosha>
    {/* With a picture tag */}
    <Cosha>
      <picture class="colorful-shadow">
        <source srcset="palm-tree-1200.jpg 1200w, palm-tree-800.jpg 800w, palm-tree-400.jpg 400w" type="image/jpeg">
        <source srcset="palm-tree-1200.webp 1200w, palm-tree-800.webp 800w, palm-tree-400.webp 400w" type="image/webp">
        <img src="palm-tree-400.jpg" alt="nice vibes"/>
      </picture>
    </Cosha>
  </>
);

export default Page;

```

## Customizing your shadow

`react-cosha` takes the follow props. Use them to customize the shadow attributes. Or just wrap your images in a `<Cosha>` tag and use the defaults.

| Name | Type | Required |Default | Description |
| --- | --- | --- | --- | --- |
| blur | string | no | "10px" | Shadow blur |
| brightness |  string | no | "125%" | Shadow brightness |
| saturation | string | no | "110%" | Shadow saturation |
| x | string | no | "2px" | Shadow horizontal offset |
| y | string | no | "6px" | Shadow vertical offset |

## Gotcha

It runs in every browser except Internet Explorer. This is because of missing support for [CSS `filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/filter#Browser_compatibility) properties. In case cosha detects it's running in a browser that doesn't have [`NodeList.prototype.forEach`](https://developer.mozilla.org/en-US/docs/Web/API/NodeList/forEach#Browser_Compatibility) available, which at this point is only IE &lt;= 11, it simply doesn't do anything.

## License

MIT

## Giving Credit Where Credit is Due

Big shoutout to [Robin Loeffel](http://robinloeffel.ch) for creating the vanilla JS package. This project here simply adapts the original concept to use React's DOM API.
npm package: @lbt/hb-crud
Description: A d2-projects project
Author: 刘伯韬
Latest version: 2.1.5
Deprecated: false

![](https://raw.githubusercontent.com/d2-projects/d2-crud/master/doc/image/banner.png)

![npm](https://img.shields.io/npm/v/@d2-projects/d2-crud.svg)
![npm](https://img.shields.io/npm/dt/@d2-projects/d2-crud.svg)
![GitHub license](https://img.shields.io/github/license/d2-projects/d2-crud.svg)


## 介绍
[D2-Crud](https://github.com/d2-projects/d2-crud)是一套基于[Vue.js 2.2.0+](https://cn.vuejs.org/)和[Element UI 2.0.0+](http://element-cn.eleme.io/#/zh-CN)的表格组件。`D2-Crud` 将 `Element` 的功能进行了封装，并增加了表格的增删改查、数据校验、表格内编辑等常用的功能。大部分功能可由配置 `json` 实现，在实现并扩展了 `Element` 表格组件功能的同时，降低了开发难度，减少了代码量，大大简化了开发流程。


## 文档和示例
文档：<https://doc.d2admin.fairyever.com/zh/ecosystem-d2-crud/>
示例：<https://d2admin.fairyever.com/#/demo/d2-crud/index>

## 功能
- 继承了 Element 中表格所有功能
- 新增表格数据
- 修改表格数据
- 删除表格数据
- 使用 Element 中的组件渲染表格内容和表单内容
- 表单校验
- 表格内编辑
- 渲染自定义组件

## 安装
使用npm
``` bash
npm i element-ui @lbt/hb-crud -S
```

使用yarn
``` bash
yarn add element-ui @lbt/hb-crud
```

## 在项目中使用
在`main.js`中写入以下内容：
``` js
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import D2Crud from '@d2-projects/d2-crud'

Vue.use(ElementUI)
Vue.use(D2Crud)

new Vue({
  el: '#app',
  render: h => h(App)
})
```

之后就可以在项目中使用`D2-Crud`了。
npm package: @lbtek/form-inputs-vue
Description: 🌙 A lightweight Vue 3 component library
Author: Luan Rafael Barbacovi Berto
Latest version: 1.0.1
Deprecated: outdated

# 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

- [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar)

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

Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can enable Volar's `.vue` type support plugin by running `Volar: Switch TS Plugin on/off` from VSCode command palette.
npm package: @lbwa/eslint-config
Description: An opinionated eslint config
Author: Liu Bowen
Latest version: 0.5.0

# @lbwa/eslint-config

An opinionated eslint config.

```js
// .eslintrc.js
module.exports = {
  extends: ['@lbwa']
}
```

- [@lbwa/eslint-config-react](https://github.com/lbwa/eslint-config/tree/main/packages/react)
- [@lbwa/eslint-config-typescript](https://github.com/lbwa/eslint-config/tree/main/packages/typescript)
- [@lbwa/eslint-config-universal](https://github.com/lbwa/eslint-config/tree/main/packages/universal)

## FAQ

- Q: How we use global variables with default [no-restricted-globals](https://eslint.org/docs/rules/no-restricted-globals) rule?

  A: To use them, explicitly reference them, e.g. `window.name` or `window.status`.<sup>[ref](https://github.com/facebook/create-react-app/blob/v4.0.3/packages/eslint-config-react-app/index.js#L19-L24)</sup>

## License

MIT © [Liu Bowen](https://github.com/lbwa)
npm package: @lbwa/eslint-config-react
Description: An opinionated eslint config.
Author: Liu Bowen
Latest version: 0.2.4

# @lbwa/eslint-config-react

An opinionated eslint config based on [eslint-config-react-app](https://github.com/facebook/create-react-app/tree/master/packages/eslint-config-react-app).

```js
// .eslintrc.js
module.exports = {
  extends: ['@lbwa/eslint-config-react']
}
```

## License

MIT © [Liu Bowen](https://github.com/lbwa)
npm package: @lbwa/eslint-config-typescript
Description: An opinionated eslint config
Author: Liu Bowen
Latest version: 0.6.0

# @lbwa/eslint-config-typescript

An opinionated eslint config.

## Installation

```bash
yarn add @lbwa/eslint-config-typescript@^0.3.0 \
  @typescript-eslint/eslint-plugin@^4.23.0 \
  @typescript-eslint/parser@^4.23.0
```

## Usage

```js
// .eslintrc.js
module.exports = {
  extends: ['@lbwa/eslint-config-typescript']
}
```

## License

MIT © [Liu Bowen](https://github.com/lbwa)
npm package: @lbwa/eslint-config-universal
Description: An opinionated eslint config
Author: Liu Bowen
Latest version: 0.4.0

# @lbwa/eslint-config-universal

An opinionated eslint config.

```js
// .eslintrc.js
module.exports = {
  extends: ['@lbwa/eslint-config-universal']
}
```

## License

MIT © [Liu Bowen](https://github.com/lbwa)
npm package: @lbwa/eslint-plugin
Description: An opinionated eslint plugin
Author: Liu Bowen
Latest version: 0.4.2

## @lbwa/eslint-plugin

An opinionated eslint plugin.

### Installation

```bash
pnpm i @lbwa/eslint-plugin eslint@^8.6.0 -D
```

### Usage

#### Recommended

```js
module.exports = {
  plugins: ['@lbwa'],
  extends: ['plugin:@lbwa/recommended']
}
```

#### Only JavaScript rules

```js
module.exports = {
  plugins: ['@lbwa'],
  extends: ['plugin:@lbwa/javascript']
}
```

#### TypeScript + JavaScript rules

Alternative to [recommended](#Recommended)

```js
module.exports = {
  plugins: ['@lbwa'],
  // ensure orders
  extends: ['plugin:@lbwa/javascript', 'plugin:@lbwa/typescript']
}
```

### License

[MIT](./LICENSE) © [Liu Bowen](https://github.com/lbwa)
npm package: @lbwa/prettier-config
Description: An opinionated prettier config
Author: Liu Bowen
Latest version: 0.1.0

# @lbwa/prettier-config

An opinionated prettier config.

## Install

```bash
npm i @lbwa/prettier-config -D
```

## Usage

add `prettier` field in `package.json`:

```json
{
  "prettier": "@lbwa/prettier-config"
}
```

## Reference

- [Prettier sharing configurations](https://prettier.io/docs/en/configuration.html#sharing-configurations)

## License

MIT © [Liu Bowen](https://github.com/lbwa)
npm package: @lbwa/tsconfig
Description: Shared TypesScript config
Author: Liu Bowen
Latest version: 1.2.1

# @lbwa/tsconfig

Shared TypeScript config.

## Installation

```bash
yarn add @lbwa/tsconfig typescript@^4.2.4 tslib@^2.2.0
# npm i @lbwa/tsconfig typescript@^4.2.4 tslib@^2.2.0
```

## Usage

In your project root `tsconfig.json`:

```json5
{
  extends: '@lbwa/tsconfig',
  compilerOptions: {
    outDir: 'dist' /* Redirect output structure to the directory. */,
    incremental: true,
    tsBuildInfoFile: 'dist/.tsbuildinfo'
  },
  exclude: ['dist', 'coverage']
}
```

Diagnosing the effective TypeScript configurations:

```bash
yarn tsc --showConfig
# npx tsc --showConfig
```

## License

[MIT](./LICENSE) © [Liu Bowen](https://github.com/lbwa)
npm package: @lc-cn/command
Description: 指令的定义与执行
Author: 凉菜
Latest version: 0.2.1
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# command
指令系统
## Usage
1.安装
```shell
npm install @lc-cn/command
```
2.样例
```typescript
import {defineCommand} from "@lc-cn/command";
function sleep(ms){
    return new Promise(resolve => {
        setTimeout(resolve,ms)
    })
}
const cmd=defineCommand('test <a> [b:number]')
    .option('hello','-h <who:number>')
    .option('world','-w')
    .action(async ({options},a,b)=>{
        console.log('我是传入的参数',[a,b])
        await sleep(3000)
        console.log('我3秒后返回')
        return options
    })
cmd.execute('test asdf 22 -h 你好 -w').then((res)=>{
    console.log(res)
}).catch(e=>{
    console.error(e.message)
})

```
npm package: @lc001/my-ts-component
Description: test-component
Author: lc001
Latest version: 1.0.0

# my-ts-component

一个简单且实用的TypeScript组件

## 安装

```bash
npm install my-ts-component
```

## 使用方法

```typescript
import { MyComponent } from 'my-ts-component';

const component = new MyComponent('世界');
console.log(component.sayHello()); // 输出: Hello, 世界!
```

## API文档

### MyComponent

主要组件类

#### 构造函数

```typescript
constructor(name: string)
```

参数:
- `name`: 用于打招呼的名称

#### 方法

##### sayHello()

返回一个包含问候语的字符串

返回值:
- `string`: 格式为 "Hello, {name}!"

## 开发

### 安装依赖
```bash
npm install
```

### 运行测试
```bash
npm test
```

### 构建
```bash
npm run build
```

## 许可证

MIT
npm package: @lca1512/loadme
Description: Displays a simple loading screen while your application loads
Author: lca1512
Latest version: 1.0.3

# loadme

A simple way to display a loading screen for your web application.

## Installation
### NPM
First install loadme with 
```npm install @lca1512/loadme```
Then link to ``loadme.min.js`` after the opening body tag.
```
<!DOCTYPE html>
<html>
<head>
</head>
<body>
	<script type="text/javascript" src="/node_modules/loadme.min.js"></script>
	<h1>Content</h1>
</body>
</html>
```
### CDN
Include ``<script src="https://unpkg.com/@lca1512/loadme/loadme.min.js"></script>`` after the opening body tag.
```
<!DOCTYPE html>
<html>
<head>
</head>
<body>
	<script src="https://unpkg.com/@lca1512/loadme/loadme.min.js"></script>
	<h1>Content</h1>
</body>
</html>
```
## Usage
Call ``loadme.load()`` as soon as possible after linking to ``loadme.min.js``.
``loadme.load()`` takes an optional HEX Code as an argument which is used to define the background colour of the loading screen. If no HEX Code is passed then the loading screen background colour will default to light blue (``#3498db``). 
When your application is loaded call ``loadme.loaded();`` to fade the loading screen out.
### Example
```
<!DOCTYPE html>
<html>
<head>
	<title>loadme</title>
</head>
<body>
    <!-- Link to loadme.min.js -->
	<script type="text/javascript" src="https://unpkg.com/@lca1512/loadme/loadme.min.js"></script>
	<script type="text/javascript">
	    // Call loadme.load(); with an optional HEX colour code as soon as possible after linking to loadme.min.js 
		loadme.load("#ff0098");
		
		
		setTimeout(() => {
		    // After the application has loaded called loadme.loaded();
			loadme.loaded();
		}, 3000);
	</script>
	<h1>Loaded!</h1>
</body>
</html>
```