open-index/open-npm huggingface dataset:
npm package: @kakaopay-develop/mcp
Description: KakaoPay MCP server
Author: KakaoPay
Latest version: 0.1.2

# KakaoPay Model Context Protocol (MCP)

카카오페이 [Model Context Protocol](https://modelcontextprotocol.com/) 서버는 함수 호출(Function Calling) 방식으로 카카오페이 오픈 API를 연동할 수 있도록 지원합니다. 결제 및 정기결제 등 다양한 카카오페이 기능을 MCP 호스트(Claude, Cursor 등)에서 사용할 수 있습니다.

## 준비하기

자세한 준비 사항은 [카카오페이 개발자 문서 - AI 연동 - 사전 준비사항](https://developers.kakaopay.com/docs/payment/online/ai#payment-ai-intro-prepare)를 참조하세요.

## 시작하기

### 실행 예시

```bash
# 모든 도구 활성화
npx -y @kakaopay-develop/mcp --tools=all --secret-key=YOUR_KAKAOPAY_SECRET_KEY --cid=TC0ONETIME

# 특정 도구만 활성화
npx -y @kakaopay-develop/mcp --tools=payment.demo,payment.ready --secret-key=YOUR_KAKAOPAY_SECRET_KEY --cid=TC0ONETIME
```

- `YOUR_KAKAOPAY_SECRET_KEY`는 실제 카카오페이 오픈 API 시크릿 키로 교체하세요.
- 시크릿 키는 명령행 인수(`--secret-key`) 또는 환경 변수(`KAKAOPAY_SECRET_KEY`)로 설정할 수 있습니다.
- `cid`는 가맹점 코드로, 명령행 인수(`--cid`)로 설정합니다 (테스트용: TC0ONETIME).

## MCP 호스트(Claude, Cursor 등) 연동 예시

`claude_desktop_config.json` 예시:

```json
{
  "mcpServers": {
    "kakaopay": {
      "command": "npx",
      "args": [
        "-y",
        "@kakaopay-develop/mcp",
        "--tools=all",
        "--cid=TC0ONETIME"
      ],
      "env": {
        "KAKAOPAY_SECRET_KEY": "YOUR_KAKAOPAY_SECRET_KEY"
      }
    }
  }
}
```

## 환경 변수

- `KAKAOPAY_SECRET_KEY`: 카카오페이 오픈 API 시크릿 키

## 명령행 인수

- `--secret-key`: 카카오페이 오픈 API 시크릿 키
- `--cid`: 가맹점 코드 (테스트용: TC0ONETIME)
- `--tools`: 활성화할 도구 목록

## 지원 도구

### 결제 관련 도구

- `payment.demo`: 데모 결제 링크 생성
- `payment.ready`: 결제 준비 요청
- `payment.approve`: 결제 승인 처리
- `payment.cancel`: 결제 취소 처리
- `payment.get`: 결제 상태 조회

### 정기결제 관련 도구

- `subscription.request`: 정기결제 요청
- `subscription.inactive`: 정기결제 비활성화
- `subscription.get`: 정기결제 상태 조회

## 디버깅 및 테스트

[MCP Inspector](https://modelcontextprotocol.io/docs/tools/inspector)를 활용해 서버를 디버깅할 수 있습니다.

```bash
npx @modelcontextprotocol/inspector node dist/index.js --tools=all --secret-key=YOUR_KAKAOPAY_SECRET_KEY --cid=TC0ONETIME
```

1. `YOUR_KAKAOPAY_SECRET_KEY`를 실제 값으로 교체하세요.
2. `--cid` 인수로 가맹점 코드를 설정하세요 (테스트용: TC0ONETIME).
3. MCP Inspector UI에서 Connect를 눌러 서버를 시작할 수 있습니다.
4. 선택한 도구 목록을 확인하고 각 도구를 테스트할 수 있습니다.

## Best Practice

시크릿 키는 외부에 노출되지 않도록 안전하게 관리하세요.

## Disclaimer

`@kakaopay-develop/mcp`는 AI 기반 자동화 도구로, 결과의 정확성이나 완전성을 보장하지 않습니다. 실제 결제 등 중요한 작업 전에는 반드시 별도의 검증을 거치시기 바랍니다. 카카오페이는 본 도구의 사용 결과에 대해 책임지지 않습니다.
npm package: @kakarot2905/quizzie-module
Description: Quizzie embeddable quiz module as a Web Component
Latest version: 0.1.1

# Quizzie Module

Embeddable Quizzie module distributed as a Web Component.

## Install

```bash
npm install @kakarot2905/quizzie-module
```

## Usage in any web app

Render directly in plain HTML with an ES module script:

```html
<div id="quiz-root"></div>
<script type="module">
  import { loadQuizzieModule, elementTag } from "@kakarot2905/quizzie-module";

  await loadQuizzieModule();

  const host = document.getElementById("quiz-root");
  host.innerHTML = `<${elementTag}></${elementTag}>`;
</script>
```

## Usage in React

1. Install the package:

```bash
npm install @kakarot2905/quizzie-module
```

2. Load and render the custom element in a React component:

```jsx
import { useEffect, useRef } from "react";
import { loadQuizzieModule, elementTag } from "@kakarot2905/quizzie-module";

export default function QuizzieEmbed() {
  const hostRef = useRef(null);

  useEffect(() => {
    (async () => {
      await loadQuizzieModule();
      const host = hostRef.current;
      if (!host) return;

      const quizElement = document.createElement(elementTag);
      host.replaceChildren(quizElement);
    })();
  }, []);

  return <div ref={hostRef} />;
}
```

3. (Optional) If your React app is TypeScript, add this to avoid JSX type errors for custom elements:

```ts
// src/custom-elements.d.ts
import type React from "react";

declare namespace JSX {
  interface IntrinsicElements {
    "quizzie-module": React.DetailedHTMLProps<
      React.HTMLAttributes<HTMLElement>,
      HTMLElement
    >;
  }
}
```

Then you can render it directly:

```tsx
import { useEffect } from "react";
import { loadQuizzieModule } from "@kakarot2905/quizzie-module";

export default function QuizzieEmbed() {
  useEffect(() => {
    loadQuizzieModule();
  }, []);

  return <quizzie-module />;
}
```

### Using local build in a React demo app

If you are testing locally before publishing:

From `frontend` in this repository:

```bash
npm run prepare:npm-lib
```

From your React/Vite demo app:

```bash
npm install "C:/Users/sudha/Desktop/Myself/programing/git/Quizzie/frontend/dist/npm-lib"
```

## Optional: Load from CDN

```html
<script type="module">
  import { loadQuizzieModule, elementTag } from "https://unpkg.com/@kakarot2905/quizzie-module/loader.js";

  await loadQuizzieModule();
  document.body.innerHTML += `<${elementTag}></${elementTag}>`;
</script>
```

## Build and pack locally

From the frontend project root:

```bash
npm run pack:npm-lib
```

This creates a `.tgz` package in the current directory.

## Publish

1. Update package name and version in `npm-lib/package.json`.
2. Login to npm: `npm login`.
3. Publish:

```bash
npm run publish:npm-lib
```
npm package: @kakarott/shadcn-ui
Description: UI component library based on ShadcnUI
Author: kakarott
Latest version: 0.3.3

## 使用方法

首先安装库：

```bash
npm install shadcn-ui
```

### 注意事项

- **避免样式冲突**：如果担心样式冲突，可以在 `tailwind.config.js` 中使用 `prefix` 选项，为您的 TailwindCSS 类添加前缀。

---

## 问题 2：`tailwind.config.js` 文件在打包时怎么处理？

`tailwind.config.js` 是 TailwindCSS 的配置文件，用于定义主题、插件等。在构建您的库时，这个配置文件用于生成最终的 CSS。但在发布您的库时，**不需要**将 `tailwind.config.js` 包含在内。

### 解决方案

- **构建时使用**：在构建过程中，您的 `tailwind.config.js` 会被 PostCSS 使用，以生成最终的 CSS 文件。

- **发布时排除**：在发布到 npm 时，不需要包含 `tailwind.config.js`，因为使用您的库的项目不需要这个配置文件。

### 实施步骤

- **确保 `package.json` 的 `files` 字段不包含 `tailwind.config.js`**。

- **在 `.npmignore` 或 `.gitignore` 中添加 `tailwind.config.js`**（如果必要）。
npm package: @kakarotto-china/vue-components
Description: Extended Vue tag
Author: yuehao@921025live.com
Latest version: 1.0.9

# vue-components

> Vue UI 库

# 开发步骤
> 第一步：使用 vue init webpack-simple yyl-npm-practice   初始化项目

# Build Setup

``` bash
# 安装dependencies
npm install

# 本地热加载模式调试 at localhost:8080
npm run dev

# 构建可用的js文件
npm run build
```

# 本地测试

> 修改src/main.js文件，导入example文件夹下的demo即可

For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).

# 发布
## 发布前准备
> 改写package.json中的private为false，加入"main": "dist/ldc-ui.js", 其他的自定义 -> 新建.npmignore文件忽略不需要上传的文件如.* *.md *.yml build/ node_modules/ src/ test/
## 步骤
> npm run build 打包 -> 注册npm账号 -> npm login 登录 -> npm publish 发布

> 每次发布的时候packa.json 里面的 version不能一样，不然不能发布出去，手动改下版本就行
npm package: @kakedashi/md-to-article-mcp
Description: MCP tool to convert Markdown files to rich text and copy to clipboard for X Article editor
Author: kakedashi
Latest version: 1.0.10

# @kakedashi/md-to-article-mcp

Markdown ファイルを X Article エディタにペースト可能なリッチテキストとしてクリップボードにコピーする CLI / MCP ツール。

## インストール不要で使える（初回は自動ダウンロード）

```bash
npx @kakedashi/md-to-article-mcp /絶対パス/draft.md
```

## Claude Desktop（MCP）として使う

`claude_desktop_config.json` に追記：

```json
{
  "mcpServers": {
    "md-to-article": {
      "command": "npx",
      "args": ["-y", "@kakedashi/md-to-article-mcp"]
    }
  }
}
```

config の場所：
- macOS: `~/Library/Application Support/Claude/claude_desktop_config.json`
- Windows: `%APPDATA%\Claude\claude_desktop_config.json`

Claude Desktop を完全終了してから再起動（メニューバーから Quit）後、チャットで話しかける：

```
/Users/あなたのユーザー名/Downloads/draft.md を X Article 用にクリップボードにコピーして
```

※ `~` は展開されないため絶対パスで指定してください。
ユーザー名の確認: `echo $HOME`

## 使い方

1. npx でクリップボードにコピー
2. X の Article エディタを Chrome で開く
3. 本文エリアで Cmd+V

## 対応要素

| 要素               | 対応                                    |
| ------------------ | --------------------------------------- |
| 見出し h1 / h2     | ✅                                      |
| 太字 / イタリック  | ✅                                      |
| 箇条書き / 番号付きリスト | ✅                                 |
| リンク             | ✅                                      |
| 引用               | ✅                                      |
| コードブロック     | ⚠️ プレーンテキストで挿入・手動で再設定が必要 |
| テーブル           | ❌ X Article 非対応                     |
| 画像               | ❌ alt テキストのみ残る                 |

## 対応 OS

| OS      | 方法                        |
| ------- | --------------------------- |
| macOS   | osascript（AppleScript）    |
| Windows | PowerShell Set-Clipboard    |
| Linux   | xclip                       |

## 動作環境

| 環境    | バージョン |
| ------- | ---------- |
| Node.js | >= 18      |
| npm     | >= 9       |

## Claude Code との連携

プロジェクトの `CLAUDE.md` に以下を追記すると「x用にコピー」の一言で実行できる：

```markdown
## X Article へのコピー
「x用にコピー」「article にして」などのプロンプトがあった場合は、
現在作業中の .md ファイルを特定して以下を実行してください：
npx @kakedashi/md-to-article-mcp {絶対パスに解決したファイル名}.md
```

追記後、Claude Code で以下のように話しかけるだけで動く：

- 「x用にコピー」
- 「draft.md を article にして」
- 「これをX記事用にコピーして」
npm package: @kakekomu/react-modal
Description: React-Modal hook
Author: Gergely Szabo
Latest version: 1.1.0

# React Modal hook

A simple React hook for modals.

### About this package

It is common practice, to use boolean flags like `isOpen` to decide whether the modal is displayed or not.
Also, the data of the modal might come from a global state. However, when juggling with many modals, this can be a confusing, and can cause errors, like displaying multiple modals at the same time.

This package uses a key for every modal to switch between them. With a `openModal` function, you can open a modal, and pass it props.

I recommend to hook it up only once, in your root level component, so there is one source of truth for the realm of modals.

### Example

```ts
import { useModal } from "@kakekomu/react-modal"

const App = () => {
  const [activeModal, modalHandlers] = useModal({
    myModal: Modal,
  })
  return (
    <div>
      {activeModal}
      <h1>React Modal example</h1>
      <a href="index.tsx">Source code</a>

      <button
        onClick={() =>
          modalHandlers.toggleModal("myModal", {
            message: "This custom message is passed as a prop.",
            onClose: modalHandlers.closeModal,
          })
        }
      >
        Toggle Modal
      </button>

      <button
        onClick={() =>
          modalHandlers.openModal("myModal", {
            message: "The message can be different.",
            onClose: modalHandlers.closeModal,
          })
        }
      >
        Open Modal
      </button>
    </div>
  )
}

interface Props {
  message: string
  onClose: () => void
}

const Modal: React.FunctionComponent<Props> = ({ message, onClose }) => (
  <div
    style={{
      position: "fixed",
      left: "50%",
      padding: "10px",
      border: "1px solid gray",
      width: "300px",
      height: "200px",
    }}
  >
    <h1>This is a Modal</h1>
    <p>{message}</p>
    <button onClick={onClose}>Close</button>
  </div>
)
```