关于 optics-context
面向使用 RoleModel 的 Optics CSS 设计系统的团队，指导开发者检查已安装的 Token 和组件、复用现有样式，并通过指定覆盖方式定制组件。
主要功能
- 01检查已安装的设计 Token
- 02查找可用的 CSS 组件
- 03复用项目类和 BEM 区块
- 04在指定文件中覆盖组件
- 05用 Token 替代字面值
- 06检查主题与深色模式行为
适用场景
- 01为样式选择有效的 Optics Token
- 02确认组件是否已存在
- 03在整个应用中定制 Optics 组件
- 04避免 Token 名称错误和不完整的主题覆盖
安装
复制下面的命令，在终端中运行。
npx skills add https:/安装后在 Claude Code 中输入/optics-context确认已加载。
附带文件references/theming.md
详细介绍
Optics
Optics 是 RoleModel 的 CSS 设计系统，以 @rolemodel/optics 发布。已安装的程序包是组件和令牌是否存在的事实依据。请读取程序包内容，而不是凭记忆回想名称，因为令牌会随版本变化。
- 令牌：
node_modules/@rolemodel/optics/dist/tokens/tokens.json（或旧版本中的dist/css/core/tokens/下的 CSS） - 组件：
node_modules/@rolemodel/optics/dist/css/components/*.css - 版本：
package.json中的@rolemodel/optics条目 - 文档：https://docs.optics.rolemodel.design
编写 CSS 之前
- 如果有合适的 Optics 组件，请使用它。 检查
dist/css/components/中的块及其修饰符。 - 如果项目中已有类，请复用。 搜索
app/assets/stylesheets/。 - 仅当两者都不适用时，才编写新组件： 在
app/assets/stylesheets/components/{block}.css中为每个块创建一个文件，并按照bem-structure技能命名和嵌套。
若要更改 Optics 组件在整个应用中的外观，请在 app/assets/stylesheets/components/overrides/{component}.css 中覆盖它。不要将其分叉为新块。
Optics 还提供实用类（.flex、.gap-sm 以及 dist/css/core/utilities.css 中的其他类）。RoleModel 强烈不建议在视图中使用它们：应通过 BEM 块或元素设置样式。
使用令牌，而非字面值
所有颜色、间距、字体、圆角、边框和阴影值都必须来自令牌。
| 不要使用 | 改用 |
|---|---|
#fff、rgb(...)、white | var(--op-color-background)、var(--op-color-primary-base) |
padding: 12px | padding: var(--op-space-small) |
border: 1px solid #ddd | border: var(--op-border-width) solid var(--op-color-border) |
box-shadow: 0 1px 3px rgba(...) | box-shadow: var(--op-shadow-small) |
在有色表面上放置文本时，使用与该表面匹配的 on- 令牌：在 --op-color-primary-base 上使用 --op-color-primary-on-base，在 --op-color-primary-plus-two 上使用 --op-color-primary-on-plus-two。
如果没有合适的令牌，请使用应用自己的前缀定义项目令牌（“Your App”的示例为 --ya-color-brand-accent）。切勿在 --op- 下添加新名称。
注意事项
- 名称格式错误会静默失败。
var(--op_color_primary_base)、var(--color-primary-base)和var(--op-primary-color-base)都会解析为空，属性会回退，且不会报错。请对照tokens.json检查名称。 - 深色模式下加号和减号的含义会反转。 每个步进都是一对
light-dark()值。在浅色模式下，plus-*更浅，minus-*更深；在深色模式下则相反，因此plus-max会从最浅步进变为最深步进。请根据该步进相对于背景的作用来选择，而不是依据“更浅”或“更深”，并在scale_color_tokens.css中检查这两个值。 - Optics 的组件比你想象的更多。 除了
btn和card，它还提供avatar、badge、tag、alert、modal、table、tab、switch、spinner、sidebar、side-panel、text-pair、segmented-control等组件。在编写任何块之前，请查看dist/css/components/；可以检查时，不要用“如果你的 Optics 版本支持”来含糊其辞。在 Optics 名称下编写自己的块（例如新建.avatar { … }）并不会创建独立组件：它会合并到 Optics 的规则中，并更改应用中的所有头像。请使用 Optics 块，并将更改放在components/overrides/{component}.css中或作为项目修饰符。 - 部分主题覆盖会破坏色阶。 更改任何
--op-color-*值之前，请参阅 references/theming.md。
主题设置
若要更改整个应用的品牌颜色、字体、圆角或色阶，请阅读 references/theming.md。