# @codesudee/web-skills 中文文档

规范地址：https://npmcn.com/package/%40codesudee/web-skills/

版本：0\.6\.2
npm 元数据更新时间：2026-10-30T16:30:29.625Z
中文译文更新时间：2026-11-10T08:58:50.015Z
软件包许可：SEE LICENSE IN LICENSE

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40codesudee/web-skills
原文对照：https://npmcn.com/package/%40codesudee/web-skills/?lang=original
项目主页：https://pagenue.com/

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：22.7 kB，4 个文件
- 模块格式：ES Module
- TypeScript 类型：未声明
- Node.js 要求：\>=18
- 运行依赖：0 个
- 首次发布：2026-10-26T04:14:45.643Z
- 最新版本发布：2026-10-30T16:30:29.449Z
- 近 30 天下载量：1935（2026-10-10 至 2026-11-08，npm 官方下载统计）
- 已发布版本数：11（近 12 个月 11 个）

## 中文简介

Pagenue技能的安装者:用于建立看起来好,感觉好,以及转换的网站的代理技能. (原始内容存档于2018-10-21). Free accounts at pagenue.com.

## 安装

```sh
npm install @codesudee/web-skills
```

也可以使用：`pnpm add @codesudee/web-skills`、`yarn add @codesudee/web-skills`、`bun add @codesudee/web-skills`

## README

# 页面nue

建立网站的代理技能,这些网站看起来很好,感觉很好,而且可以转换.

[![Open the live demos at pagenue.com](https://img.shields.io/badge/%E2%96%B6%20Open%20the%20live%20demos-pagenue.com-3d5afe?style=for-the-badge&labelColor=0b0d11)](https://pagenue.com/)

[https://github.com/user-attachments/assets/ba919b7d-9a4e-4d11-9344-017b0e244f07 互联网档案馆的存檔,存档日期2013-12-02](https://github.com/user-attachments/assets/ba919b7d-9a4e-4d11-9344-017b0e244f07)

[![npm version](https://img.shields.io/npm/v/@codesudee/web-skills?color=3d5afe)](https://www.npmjs.com/package/@codesudee/web-skills) [![Free account](https://img.shields.io/badge/4%20free-with%20an%20account-3d5afe)](https://pagenue.com/account/) [![Support on Ko-fi](https://img.shields.io/badge/%E2%99%A5%20support-Ko--fi-3d5afe)](https://ko-fi.com/sudeeptojh)

[**网站**](https://pagenue.com/) • 妇女 [技能](https://npmcn.com/package/%40codesudee/web-skills/#readme-skills) • 妇女 [安装](https://npmcn.com/package/%40codesudee/web-skills/#readme-install) • 妇女 [支助](https://npmcn.com/package/%40codesudee/web-skills/#readme-support)

* * *

技能 **用什么来建造**, (中文(简体) ), **它应该如何移动**, (中文(简体) ), **为什么人们会回应**,以及 **如何发现它**与克洛德·克罗德和任何代理商合作 `SKILL.md` 文档.

```bash
npx @codesudee/web-skills
```

第一个运行要求您的电子邮件将您注册到一个免费的 Pagenue 账户 。 然后它问您想要哪些技能( 或者按 Enter for all) 并安装到 `~/.claude/skills`。见 [安装](https://npmcn.com/package/%40codesudee/web-skills/#readme-install) 选项.

> **在安装前试试.** 这个 [网站](https://pagenue.com/) 将每个技能显示为您可以打开的文件夹,并使用交互式演示.

## 为什么会这样

一个AI代理公司要求"一个登陆页"将愉快地产生一个通用的:默认字体,一个手卷式的淡入,一个空白的签入表. 其结果是有效的,但却是忘不了的,对它为之建造的人没有任何好处.

有两样东西可以解决,它们就是这批货所持有的:

1.  **一叠.** 一旦决定要联系到哪个库(动画,卷轴,组件,框架,质量栏),那么每个构建都从好的默认开始,而不是即兴.
2.  **心理学.** 出售或收集签名的页面在人类行为上成败,而不是在代码上. 6个经过研究的原则,写成一个代理人可以遵循的指示.

## 技能

| 技能 | 它会做什么 | 用它当 |
| --- | --- | --- |
| [`particle-globe-hero`](https://npmcn.com/package/%40codesudee/web-skills/skills/particle-globe-hero/SKILL.md) | 一个WebGL粒子地球英雄(没有3.js,约10 KB),在负载上聚集,光标周围的部件并用卷轴飞过相机,并有回放,Astro和香草接线 | 您想要互动的 三维英雄或滚动的飞过瞬间 |
| [`light-rays-background`](https://npmcn.com/package/%40codesudee/web-skills/skills/light-rays-background/SKILL.md) | 一整行的发光线 紧紧地接住英雄 沿着每一节后面的页面 消失在文字后面 一个无依赖文件, 包含 React、 Astro 和 不建接线 | 你想要流出光线,发光线或背景,在滚动时不断移动 |
| [`product-demo-video`](https://npmcn.com/package/%40codesudee/web-skills/skills/product-demo-video/SKILL.md) | 记录一个带有 Playwright 的网站,并在 Remotion 中编辑它: 动能类型,一个跟随光标的相机,被击打的切口,一个准备好的音箱和一个音乐床 | 您想要网站或网络应用的发布、宣传或README视频 |
| [`launch-workshop-video`](https://npmcn.com/package/%40codesudee/web-skills/skills/launch-workshop-video/SKILL.md) | 出自一出出品链接的40秒出品电影:有五个可爱角色将出品建在一个小舞台上(crane-hoisted logo,头条在一幅横幅上,真实的截图被固定了起来,"如何工作"的箱子,一个事实检查员在每份申报上盖上印章,在URL上被遮住. 3名原创剧组看起来被重新涂上品牌,合成了beat-synced音乐和声音,帧-精确4K或1080p MP4,任意语言 | 您想要一个产品、应用或网站的发布、公告或宣传视频 |
| [`ios-feel-motion`](https://npmcn.com/package/%40codesudee/web-skills/skills/ios-feel-motion/SKILL.md) | 橡胶波段翻转、弹簧预设、可中断动画和闪烁投影,具有真实的iOS值 | 构建可感受到本地感的滚动、拖放、工作表或动画 |
| [`conversion-ux-psychology`](https://npmcn.com/package/%40codesudee/web-skills/skills/conversion-ux-psychology/SKILL.md) | 6项UX心理学原则,包括实践/避免指导以及道德保障 | 页面会出售某物或要求用户签名 |
| [`apple-minimal-landing`](https://npmcn.com/package/%40codesudee/web-skills/skills/apple-minimal-landing/SKILL.md) | 平和而类似苹果的登陆页外观:瑞士的地沟口味有斜纹塞里夫口音,两通小写头条,软灰色卡片,一通暖口音,以及静静地运动(分形-相片字旋转器,模糊显示,滑动的分页药丸),有精确的道具和Tailwind/Framer Motion配方 | 你想要一个登陆页 或产品站点 看起来很少, 优等和溢价 |
| [`website-build-stack`](https://npmcn.com/package/%40codesudee/web-skills/skills/website-build-stack/SKILL.md) | 命名一个站点构建的默认库和引用, 以及何时使用每个库 | 启动任何网站、登陆页或前端构建 |
| [`seo-toolkit`](https://npmcn.com/package/%40codesudee/web-skills/skills/seo-toolkit/SKILL.md) | 路由器,将SEO的工作送到Claude-seo-claude、Geo-seo-claude和营销技能组合中,并对其进行验证 | 编写或审计任何网站的标准作业程序 |

它们被设计成一起使用:由堆栈决定工具,由心理学决定内容和流量.

## 堆着什么

| 需求 | 默认 | 为什么 |
| --- | --- | --- |
| 动画 | [目标](https://github.com/greensock/gsap-skills) | 时间线和ScrollTrigger 处理几乎每一个运动需要,它是免费的 |
| 平滑滚动 | [列尼斯语Name](https://github.com/darkroomengineering/lenis) | 保持原生感觉的卷轴 `sticky` 和锚工作 |
| 动画反射组件 | [反应比特](https://github.com/DavidHDev/react-bits) | 215+ 已准备好的组件, 所以你不手卷常见效果 |
| 质量栏 | [Vercel 网络接口准则](https://github.com/vercel-labs/web-interface-guidelines) + 键 [设计.md](https://getdesign.md/) | 装运前对照审查的清单 |
| 尾风 v4 | [尾风- 特工技能](https://github.com/Lombiq/Tailwind-Agent-Skills) | 停止代理写 v3 时代的课和配置 |
| 框架 | [天体](https://astro.build/) | 默认为零联署材料,以岛屿作为互动部分 |

这些是默认的,不是规则。 现有工程的堆栈,或者你命名的堆栈,总是取胜.

## 心理学里有什么

| 原则 | 单行 | 示例 |
| --- | --- | --- |
| 智能默认 | 人们很少改变默认,所以选择好 | 预选最佳计划 |
| 目标梯度 | 努力接近尾声,不要从零开始 | 上岗时间为20% |
| 对等性 | 先给,后给 | 注册前的自由部分结果 |
| 宜家效应 | 我们珍视我们建造的东西 | 先个性化;按钮表示"继续" |
| 厌恶损失 | 损失是收益的两倍 | "你会失去这3个项目" |
| 对比效应 | 价格是根据以前的情况来判断的 | 先显示溢价等级 |

每一个都写在技巧上,用推理,做什么,以及回避. 技能还包括护栏: **没有假的紧迫性、稀缺性、进展或审查.** 原则应该使一页更清楚,而不是欺骗任何人.

## 不错

-   登陆页、定价页、登入和注册流程
-   营销和内容网站(Astro)和动画React/Next.js网站
-   使代理商在项目中具有一致的房屋风格

## 不是因为

-   内部工具、仪表板和文件。 心理学技能被限定为只有转换页面.
-   有固定堆栈的项目。 技艺告诉经纪人要跟随.

## 技能如何运作

技能是一个文件夹 `SKILL.md`文件顶部(前题)有一个 `name` (单位:千美元) `description`. 代理只读那些在启动时, 这几乎没有成本。 当您的请求符合描述时, 它会加载完整文件并遵循它 。 所以每个描述都说 _何时_ 使用技能.

```
skills/
  particle-globe-hero/
    SKILL.md
    assets/        ready-to-copy engine, React wrappers, CSS
    references/
  light-rays-background/
    SKILL.md
    assets/        rays.ts, a no-build rays.js, CSS, React wrapper, example page
    references/
  product-demo-video/
    SKILL.md
    assets/        recorder, Remotion project, sound generators
    references/
  ios-feel-motion/
    SKILL.md
  conversion-ux-psychology/
    SKILL.md
  apple-minimal-landing/
    SKILL.md
  website-build-stack/
    SKILL.md
  seo-toolkit/
    SKILL.md
```

## 安装

一个命令将技能安装到 `~/.claude/skills`因此,它们适用于所有项目:

```bash
npx @codesudee/web-skills
```

第一次,它要求您的电子邮件,并发送一个6位数的代码来签名(免费,没有密码). 然后它列出技能 并问你想要的。 类型编号 `1,3` 来选择一些,或按 Enter for all。 之后重新开始代理会话。 然后要求一些像"为X建立登陆页"和技能负载自己.

选项 :

| 旗帜 | 它会做什么 |
| --- | --- |
| `--list`, (中文(简体) ), `-l` | 列出现有技能 |
| `--skill <name>`, (中文(简体) ), `-s` | 只安装该技能( 可重复), 不询问 |
| `--all`, (中文(简体) ), `-a` | 无需询问就安装每个技能 |
| `--project`, (中文(简体) ), `-p` | 安装到 `./.claude/skills` 仅用于当前项目 |
| `--dir <path>` | 安装到任意目录 |
| `--force`, (中文(简体) ), `-f` | 覆盖已安装的技能 |
| `--key <key>` | 使用安装密钥从 [您的账户](https://pagenue.com/account/) 此运行 |

```bash
npx @codesudee/web-skills --list
npx @codesudee/web-skills -s conversion-ux-psychology
npx @codesudee/web-skills --all
npx @codesudee/web-skills --project
```

现有技能被跳过,除非你通过 `--force`因此,重跑是安全的。 当没有交互式终端( CI, 脚本) 时, 它会不询问就安装每个技能; 首先用 `npx @codesudee/web-skills login <key>` 或通过 `--key`。 。 。 .

要签了,跑 `npx @codesudee/web-skills logout`。 。 。 .

**改为下载 :** 签名于 [pagenue.com (中文(简体) )](https://pagenue.com/account/),打开任何技能,并按 **下载.zip**打开它 `~/.claude/skills`。 。 。 .

## 用法提示

要让堆栈每次应用,请添加一行到 `~/.claude/CLAUDE.md`数字 :

```markdown
Whenever building or redesigning a website, check and apply the `website-build-stack` skill first.
```

## 贷项

-   6个心理学原理从uxpeak视频"Apps人民无法停止使用背后的UX心理学"中被分解出.
-   IOS运动值来自刚建. Mov的写作"iOS为什么觉得使用起来这么好"(M[校对:soup](https://blog.justinbuilds.mov/ios/))和苹果的WWDC18讨论"设计流体界面".
-   演示视频运动技术遵循了收集的实例: [即时动议](https://www.promptsmotion.com/),视频则与 [剧作家](https://playwright.dev/) 财务报告和审定财务报表 [暂停](https://www.remotion.dev/) (个人和小团队免费;较大的公司需要领取回旋许可证).
-   Apple-minmal起落架风格首先与 [接收.sh](https://reception.sh/) 登陆页.
-   堆栈连接到上面的项目,它们保留自己的许可证.

## 支助

4个技能(`website-build-stack`, (中文(简体) ), `conversion-ux-psychology`, (中文(简体) ), `seo-toolkit`, (中文(简体) ), `launch-workshop-video`)是免费的,有一个Pagenue账户。 剩下的需要吗 [页面nue Pro](https://pagenue.com/pro/),9.50美元在发射时支付过一次(通常为19美元),这包括了添加的新Pro技能. 如果自由人节省了时间,你可以支持工作 [高飞](https://ko-fi.com/sudeeptojh) 或者说 [付费页](https://paypal.me/SudeeptoJharimunya)。 。 。 .

## 许可证

技能文件在 [Pagenue 技能许可证](https://npmcn.com/package/%40codesudee/web-skills/LICENSE):在任何工程中使用它们,但不要共享或转售文件. 0.5.0和更早的版本是麻省理工学院并保留麻省理工学院.

## 常见问题

### @codesudee/web-skills 是什么？

Pagenue技能的安装者:用于建立看起来好,感觉好,以及转换的网站的代理技能\. \(原始内容存档于2018-10-21\)\. Free accounts at pagenue\.com\.

### 如何安装 @codesudee/web-skills？

在项目目录运行 npm install @codesudee/web-skills，或使用 pnpm add / yarn add / bun add。它还提供命令行工具 web-skills，可以用 npx web-skills 直接运行。

### @codesudee/web-skills 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/codesudee\_\_web-skills 是否存在。

### @codesudee/web-skills 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @codesudee/web-skills 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=18。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @codesudee/web-skills 可以商用吗？

@codesudee/web-skills 使用 SEE LICENSE IN LICENSE 许可。许可条款写在包内的独立文件中，请阅读该文件确认可否商用。以上为概括，不构成法律意见，请以许可原文为准。

### @codesudee/web-skills 的下载量有多少？

根据 npm 官方下载统计，@codesudee/web-skills 在 2026/10/10 – 2026/11/08 这 30 天内被下载 1,935 次，日均约 65 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @codesudee/web-skills 还在维护吗？

最新版本 0\.6\.2 发布于 2026/10/31（10 天前）；至今共发布 11 个版本，其中过去 12 个月发布了 11 个；首次发布于 2026/10/26。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。