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

@vibecuting/component-project-helper

v1.0.11

Published

NPM 地址:

Readme

@vibecuting/component-project-helper

NPM 地址:

  • https://www.npmjs.com/package/@vibecuting/component-project-helper

组件工程辅助包。

职责:

  • 作为可发布的 npm 包承载组件工程辅助逻辑。
  • 提供组件注解、schema、发现器、元数据生成、技能说明生成和安装期生命周期逻辑。
  • 安装时会优先把当前工程识别为包含 src/components 或 src/video/chapters 的独立项目,再扫描 src/components/**/*.tsx、src/video/chapters/**/*.tsx 以及 node_modules/@vibecuting/*/src/**/*.tsx,把组件元数据生成到 .agents/skills/project-allow-component/components/。
  • 宿主工程的 update-component-skills 会基于 .vibecuting/video-resource-meta.generated.ts 生成技能说明,不再执行模板源码文件本身。
  • 宿主工程也可以直接运行 pnpm run update-component-skills 手动刷新同一套生成结果。
  • 作为主工程之外的独立 helper 包,避免把辅助逻辑重新塞回主站代码里。

目录结构:

  • src/decorators:注解定义和元数据读写
  • src/schemas:zod schema
  • src/discovery:组件发现与解析
  • src/meta:元数据和技能说明生成
  • src/runtime:安装根与输出路径解析
  • src/lifecycle:postinstall / preuninstall 生命周期逻辑

常用命令:

  • pnpm typecheck
  • pnpm test
  • pnpm update-component-skills

发布与安装:

  • 发布到 npmjs 公共 registry 时使用 @vibecuting/component-project-helper
  • 组件模板和主工程只依赖这个包的已发布版本,不依赖 workspace 软链接