npm 主页
小橘集览· 面向前端开发的开源工具集

让前端开发少一点重复。

从 YApi 接口协作、CSS Modules 迁移，到工程脚手架、组件库构建、TypeScript 转换与智能体浏览器连接。6 个 npm 包，覆盖常见前端开发与 AI 协作环节。

前端开发场景
TS主要语言
  1. 01 智能体 × 浏览器
    Chrome 116+
    thisme.top已连接
    目标元素
    DSH 插件 Bridge connectedChrome 扩展

    Dsh Harness

    让智能体，接管你的浏览器。

    连接 DSH Harness 与正在使用的 Chrome，让智能体直接读取页面、定位并操作元素，完成导航、交互与截图。

    DSH HarnessChromeBrowser Automation
    • 管理标签页与页面导航
    • 读取页面结构和可见正文
    • 点击、填写、选择、按键与滚动
    • 高亮元素并保存页面截图

    运行前提DSH Harness · Chrome 116+ · macOS / Windows

    dsh plugin --profile <profile> add dsh-harness-browser-connector
    查看安装与配对说明
    v1.0.0
  2. 02 前端 × 接口

    Model Context Protocol

    把接口文档，放进 AI 的上下文。

    服务于前端项目的接口协作，把 YApi 接口定义接入 AI 工作流，按需查询接口数据。

    MCPYApiTypeScript
    npx yapi-mcp-interface
    阅读完整文档
    AIDev tool
    MCP
    YYApi
    Interface ready

    Agent quick start

    三步接入 MCP Agent。

    1. 01

      准备环境确认 Node.js 版本不低于 18。

    2. 02

      获取凭据在 YApi 项目设置中复制项目 Token。

    3. 03

      添加配置将右侧配置加入 Agent 的 MCP 设置并重启。

    接入后可以问“获取一下当前 YApi 配置信息”或“获取 YApi 接口 ID 为 1234 的详情”。

    {
  "mcpServers": {
    "yapi-mcp-interface": {
      "command": "npx",
      "args": ["-y", "yapi-mcp-interface"],
      "env": {
        "YAPI_URL": "https://example.com",
        "YAPI_PROJECT_TOKEN": "your_yapi_project_token"
      }
    }
  }
}

    替换两项：YAPI_URL 为 YApi 地址，YAPI_PROJECT_TOKEN 为项目 Token。

    v1.1.2
  3. 03 迁移友好
    vite.config.ts
    plugins: [
  settingCssModule({
    include: /\.scss$/,
    exclude: /global/
  })
]
    style.scss→styles.button

    Vite plugin

    迁移旧样式，不必重命名一切。

    为 Vite 前端项目提供灵活的 CSS Modules 规则，帮助旧项目平滑迁移样式体系。

    ViteCSS ModulesReact
    npm i vite-plugin-setting-css-module -D
    查看配置方法
    v1.1.4
  4. 04 快速开始

    Project scaffolding

    从一个命令，到可运行的项目。

    面向前端开发的 Vue 与 React 工程脚手架，减少重复的项目初始化工作。

    CLIVueReact
    npx create-rv-cli
    了解脚手架
    new-project

    ➜ npx create-rv-cli

    ? Select a framework

    ◆ React

    ◇ Vue

    ✓ Project created in 1.2s

    v1.0.3
  5. 05 组件库模式
    01Component.tsx
    02Bundlewebpack
    03Packagenpm

    Component library

    把组件源码，构建成可复用的库。

    辅助前端组件库开发，基于 Webpack 库模式构建 React 组件与可复用模块。

    WebpackLibraryReact
    npm i wb-lib-tool -D
    查看构建说明
    v0.0.1-beta.6
  6. 06 产物转换

    TypeScript to JavaScript

    把 TypeScript，转换为可交付 JavaScript。

    辅助前端构建流程，将 TypeScript 转换为 JavaScript，适用于 ESM 等产物处理场景。

    TypeScriptJavaScriptRollup
    npm i @wz-libs/ts-to-js -D
    查看转换工具
    source.tsinterface Tool {
      name: string;
    }

    export const kit: Tool
    BUILD
    index.jsexport const kit = {
      name: 'toolkit'
    };
    v1.1.0

持续创造

让每个前端开发环节，都有顺手的工具。

这些工具分别服务于接口协作、浏览器自动化、样式处理、工程初始化和构建发布。完整说明、依赖与最新版本，请以 npm 页面为准。

查看 thisme 的 npm 包