npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

@kne/prompts-remote-components

v1.0.2

Published

前端组件库开发辅助提示词集合,包含 BizUnit 业务模块生成、RemoteLoader 远程加载、FormInfo 表单组件、国际化、文档生成、示例编写等任务的 AI 提示词模板

Downloads

18

Readme

Prompts 文档索引

本项目包含多个 AI prompts 文档,用于指导生成前端组件库相关的代码模块、文档和示例。

文档列表

1. BizUnit使用指南

功能: 生成基于 BizUnit 架构模式的完整前端业务模块

适用场景:

  • 需要生成包含完整 CRUD 功能的前端业务模块
  • 需要国际化支持和可复用组件结构
  • 生成符合规范的目录结构和文档示例

核心内容:

  • 模块目录结构规范(List、Detail、FormInner、TabDetail、Actions 等组件)
  • 核心组件实现规范(根组件、列表页、表单组件、详情页、Tab 详情页)
  • 国际化文件规范(中英文语言包)
  • API 集成规范
  • 文档示例规范

使用方式: 阅读 BizUnit使用指南 了解完整的模块生成规范


2. RemoteLoader使用指南

功能: 远程模块加载库的使用指南,基于 Webpack 5 Module Federation

适用场景:

  • 构建微前端架构
  • 需要在运行时动态加载远程模块
  • 多团队独立开发部署模块的场景

核心内容:

  • 四种使用方式:RemoteLoader 组件、withRemoteLoader HOC、useLoader Hook、createWithRemoteLoader
  • 模块标记格式详解
  • API 参考(preset、loadModule、safeLoadModule、parseToken 等)
  • 缓存机制
  • 错误处理和调试
  • 性能优化

使用方式: 阅读 RemoteLoader使用指南 了解完整的使用方法


3. FormInfo使用指南

功能: 基于 React 和 Ant Design 的企业级表单组件库

适用场景:

  • 构建复杂的表单页面
  • 需要表单验证、动态字段、弹窗/抽屉表单
  • 分步表单向导

核心内容:

  • 核心组件:Form、FormInfo、SubmitButton、CancelButton
  • 字段类型:Input、TextArea、Select、DatePicker、Upload 等
  • 校验规则配置
  • 列表组件:List(卡片式)、TableList(表格)
  • 弹窗与抽屉:FormModal、FormDrawer
  • 分步表单:FormSteps、FormStepModal
  • 表单 Hook:useFormModal、useFormDrawer、useFormStepModal
  • 国际化支持

使用方式: 阅读 FormInfo使用指南 了解完整的使用方法


4. 国际化

功能: 指导组件完成国际化改造

适用场景:

  • 需要为组件添加多语言支持
  • 创建语言包和国际化上下文
  • 修改组件以支持国际化

核心内容:

  • 国际化文件创建(withLocale.js、locale/zh-CN.js、locale/en-US.js)
  • 组件修改模式(主组件、FormInner、getColumns、Action)
  • useIntl Hook 和 withLocale HOC 使用方式
  • createWithRemoteLoader 组件的国际化包裹规范
  • 语言包 key 命名规范
  • 检查要点清单

使用方式: 阅读 国际化 了解国际化改造规范


5. 生成文档

功能: 根据代码实现自动生成项目文档(summary.md 和 api.md)

适用场景:

  • 需要为组件生成规范化的项目概述文档
  • 需要生成 API 属性表格文档
  • 组件开发完成后需要补充文档

核心内容:

  • 项目概述文档(doc/summary.md)格式规范
  • API 文档(doc/api.md)格式规范
  • 文档生成流程(分析代码结构、提取 API 信息)
  • 格式约束(标题级别、表格格式、无示例代码)

使用方式: 阅读 生成文档 了解文档生成规范


6. 组件示例编写提示词

功能: 指导编写规范的组件示例代码和配置

适用场景:

  • 为组件编写可运行的示例代码
  • 配置 example.json 示例配置文件
  • 编写覆盖 API 的完整示例

核心内容:

  • 文件结构规范(doc/ 目录、子组件示例规则)
  • example.json 配置结构
  • 示例代码规范(scope 依赖声明、导入方式)
  • 示例内容设计原则(API 覆盖率、真实业务场景、数据真实性)
  • FormInfo 组件示例特殊规则
  • 示例完整性检查清单

使用方式: 阅读 组件示例编写提示词 了解示例编写规范


如何选择

| 需求 | 使用文档 | |---------------------|------------------| | 生成完整的业务模块(列表+表单+详情) | BizUnit使用指南 | | 加载远程组件/微前端 | RemoteLoader使用指南 | | 构建表单页面(验证、动态字段、弹窗) | FormInfo使用指南 | | 为组件添加多语言支持 | 国际化 | | 为组件生成项目概述和 API 文档 | 生成文档 | | 编写组件示例代码和配置 | 组件示例编写提示词 |