button-skill

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Button Skill

When To Use

适用场景

Use this skill when implementing base-theme button patterns in a Vue project using

@rds-vue-ui/*

packages (not local component copies).

当你在Vue项目中使用

@rds-vue-ui/*

包（而非本地组件副本）实现基础主题按钮样式时，可使用本Skill。

Inputs

输入项

Framework:
```
Vue 3
```
Package manager:
```
yarn
```
(or npm/pnpm equivalent)
Private registry (required):
```
https://npm.edpl.us
```

Storybook docs URL:

https://rds-vue-ui.edpl.us/?path=/docs/components-button-buttons--docs

Base theme only (ignore alternate themes).

框架：
```
Vue 3
```
包管理器：
```
yarn
```
（或npm/pnpm等效工具）
私有仓库（必填）：
```
https://npm.edpl.us
```

Storybook文档地址：

https://rds-vue-ui.edpl.us/?path=/docs/components-button-buttons--docs

仅使用基础主题（忽略其他主题）。

Dependencies (Registry Packages)

依赖项（仓库包）

```
@rds-vue-ui/rds-theme-base
```
```
sass-embedded
```
(if SCSS preprocessing is required by dependent packages)

```
@rds-vue-ui/rds-theme-base
```
```
sass-embedded
```
（如果依赖包需要SCSS预处理）

Registry Configuration (Required)

仓库配置（必填）

Add/update project

.npmrc

@rds-vue-ui:registry=https://npm.edpl.us/

Validate package resolution:

npm view @rds-vue-ui/rds-theme-base version --registry=https://npm.edpl.us/

添加/更新项目的

.npmrc

文件：

@rds-vue-ui:registry=https://npm.edpl.us/

验证包解析：

npm view @rds-vue-ui/rds-theme-base version --registry=https://npm.edpl.us/

Workflow

工作流

Configure
```
.npmrc
```
with
```
@rds-vue-ui
```
scoped registry.
Install packages from private registry:
- ```
yarn add @rds-vue-ui/rds-theme-base
```
- ```
yarn add -D sass-embedded
```
  (if build fails on SCSS preprocessing).

Import base theme once in app entry:

import '@rds-vue-ui/rds-theme-base/dist/css/rds-theme-base.css';

Implement button usage based on Storybook
```
Components/Button/Buttons
```
docs:
- Use documented classes (
```
btn
```
  , size variants, solid/outline variants, disabled, block).
- Do not create local replacement button components to mimic RDS behavior.
Create/update practical demo examples and route links.
Run QA checklist and resolve all open items.

在
```
.npmrc
```
中配置
```
@rds-vue-ui
```
作用域的仓库地址。
从私有仓库安装包：
- ```
yarn add @rds-vue-ui/rds-theme-base
```
- ```
yarn add -D sass-embedded
```
  （如果构建因SCSS预处理失败）。

在应用入口处导入一次基础主题：

import '@rds-vue-ui/rds-theme-base/dist/css/rds-theme-base.css';

根据Storybook中
```
Components/Button/Buttons
```
文档实现按钮的使用：
- 使用文档中指定的类（
```
btn
```
  、尺寸变体、实心/轮廓变体、禁用状态、块级样式）。
- 请勿创建本地替代按钮组件来模拟RDS的行为。
创建/更新实用的演示示例和路由链接。
运行QA检查清单并解决所有待处理项。

Outputs

输出文件

```
README.md
```
```
spec/component-spec.md
```
```
examples/*
```
```
checklists/qa.md
```

```
README.md
```
```
spec/component-spec.md
```
```
examples/*
```
```
checklists/qa.md
```

Verification Checklist

验证检查清单

.npmrc

contains

@rds-vue-ui:registry=https://npm.edpl.us/

```
@rds-vue-ui/rds-theme-base
```
resolves from private registry.
Base theme CSS imported exactly once in app entry.
Examples use documented button patterns from Storybook.
No local replacement button component was introduced.
Build completes successfully.

.npmrc

文件中包含

@rds-vue-ui:registry=https://npm.edpl.us/

。

```
@rds-vue-ui/rds-theme-base
```
可从私有仓库解析。
基础主题CSS在应用入口处仅导入一次。
示例使用Storybook文档中指定的按钮样式。
未引入本地替代按钮组件。
构建成功完成。

Constraints

约束条件

Base theme only.
No non-base screenshots, variants, or token references.
Prefer registry package usage over local component implementations.
If details are unknown, mark them as
```
TBD
```
and capture source needed to confirm.

仅使用基础主题。
不得使用非基础主题的截图、变体或令牌引用。
优先使用仓库包而非本地组件实现。
若有未知细节，标记为
```
TBD
```
并记录需要确认的信息来源。

Failure Handling

故障处理

Registry/auth failure:
- Verify
```
.npmrc
```
  scope is set to
```
@rds-vue-ui:registry=https://npm.edpl.us/
```
  .
- Retry
```
npm view @rds-vue-ui/rds-theme-base version --registry=https://npm.edpl.us/
```
  .
- If still blocked, confirm VPN/SSO/token requirements for private registry access.
SCSS preprocessor failure:
- Install
```
sass-embedded
```
  and rebuild.

仓库/认证失败：
- 验证
```
.npmrc
```
  中的作用域是否设置为
```
@rds-vue-ui:registry=https://npm.edpl.us/
```
  。
- 重试
```
npm view @rds-vue-ui/rds-theme-base version --registry=https://npm.edpl.us/
```
  命令。
- 若仍无法访问，确认私有仓库访问所需的VPN/SSO/令牌要求。
SCSS预处理失败：
- 安装
```
sass-embedded
```
  并重新构建。