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

@syzlm/fe-ai

v0.1.8

Published

面向前端项目的 AI 编码规范初始化工具

Readme

@syzlm/fe-ai

基于 Node.js + TypeScript 的 AI 编码规范初始化工具。执行 init 后, 会自动识别当前项目架构并生成 AGENTS、Claude、Cursor rules、Agent skills 以及隔离高噪声工作的 Subagent。

生成内容

目标项目/
├── .agents/
│   ├── rules/
│   │   └── 架构规则.md
│   ├── subagents/
│   │   ├── repo-explorer.md
│   │   ├── reviewer.md
│   │   └── verifier.md
│   └── skills/
│       └── develop-*/
│           ├── SKILL.md
│           └── agents/
│               └── openai.yaml
├── .claude/
│   ├── agents/
│   │   ├── repo-explorer.md
│   │   ├── reviewer.md
│   │   └── verifier.md
│   └── skills
├── .codex/
│   ├── agents/
│   │   ├── repo-explorer.toml
│   │   ├── reviewer.toml
│   │   └── verifier.toml
│   └── config.toml
├── .cursor/
│   ├── agents/
│   │   ├── repo-explorer.md
│   │   ├── reviewer.md
│   │   └── verifier.md
│   └── rules/
│       ├── git.mdc
│       ├── index.mdc
│       ├── project.mdc
│       ├── ts.mdc
│       └── 架构专属规则.mdc
├── CLAUDE.md
├── AI说明.md
├── skills-lock.json(仅 Vue3 架构)
└── AGENTS.md
  • AGENTS.md 使用对应架构模板生成。
  • AI说明.md 用大白话说明三端 Rule、Skill、Hook、Subagent 的用途、调用方式和业务扩展方法。
  • CLAUDE.md 使用 @AGENTS.md@.agents/rules/*.md 引用公共规则。
  • Vue3 架构额外生成 skills-lock.json,锁定 Pinia、pnpm、UnoCSS、 Vite、Vue、VueUse 及 Vue 最佳实践 skills。
  • “命令”区块读取目标项目 package.json 的全部 scripts
  • “目录结构”区块扫描目标项目,最多展示 5 层。
  • 目录树忽略 distdist-prod 等构建产物,重点为 src 及其子目录 追加用途注释。
  • .agents/rules 是规则正文的唯一维护位置。
  • .cursor/rules 只保留 Cursor frontmatter,并通过 @ 引用 .agents/rules
  • AGENTS.md 只保存规则路径和适用范围,供 ChatGPT/Codex 精确按需读取。
  • Claude Code、ChatGPT/Codex 和 Cursor 分别生成原生 Subagent 配置。
  • .agents/subagents 是 Subagent 角色指令的唯一维护位置,三端配置只引用它。
  • repo-explorer 外包大范围检索,verifier 压缩类型检查、测试和构建日志, reviewer 在实现完成后独立检查回归风险。
  • Subagent 只返回证据摘要且不修改业务源码,避免主会话被检索结果和原始日志占满。
  • .agents/skills 写入架构对应的标准 skill 目录。
  • .claude/skills 的 UTF-8 文本内容为 ../.agents/skills
  • AGENTS.md 已存在时必须确认覆盖,选择否不产生任何修改。
  • CLAUDE.md 每次初始化都会覆盖,确保内容固定。
  • 其他已有规则和 skill 文件默认跳过,使用 --force 才会全部覆盖。

当前支持架构

  • yudao-admin:芋道管理后台,Vue 3 + Element Plus
  • vue3-element-plus-vite:Vue 3 + Element Plus + Vite + Pinia
  • uni-app-uni-ui:uni-app + uni-ui 跨端项目
  • react-antd-redux:React + Ant Design + Redux Toolkit + Less
  • node-ts-tool:Node.js + TypeScript 工具或 CLI

扩展项目架构

架构由 AGENTS 模板、依赖识别条件、rules 清单和 skills 清单组成。 内置架构统一注册在 src/constants.ts。公共规则位于 templates/common/rules,架构模板位于 templates/<architecture-id>

作为库使用时,也可以通过导出的 registerArchitecture 注册架构。外部模板路径 需要使用绝对路径:

import { registerArchitecture } from "@syzlm/fe-ai/fe-ai-coding-rules";

registerArchitecture({
  id: "react-admin",
  label: "React 管理后台",
  agentsTemplate: "/absolute/templates/react-admin/AGENTS.md",
  dependencyGroups: [["react"], ["typescript"]],
  rules: [
    {
      source: "/absolute/templates/react-admin/rules/react.mdc",
      target: "react.mdc",
    },
  ],
  skills: [
    {
      sourceDirectory: "/absolute/templates/react-admin/skills/develop-react",
      targetDirectory: "develop-react",
    },
  ],
});

新增 skill 必须包含 SKILL.md,其 YAML frontmatter 只包含 namedescription。生成器会递归复制 skill 内的 agentsreferencesscriptsassets