关于 optics-context
optics-context 是用于 RoleModel 的 Optics CSS 设计系统的 Agent 技能。它指导开发者检查已安装包中的令牌和组件，并提供样式编写与主题定制指南。
主要功能
- 01在已安装包中查找令牌和组件
- 02优先使用现有 Optics 组件
- 03新增组件前复用项目类
- 04使用设计令牌而非字面值
- 05提供覆盖与主题定制指南
适用场景
- 01编写 CSS 前核对令牌名称
- 02为视图选择现有组件
- 03在应用中覆盖 Optics 组件
安装
复制下面的命令，在终端中运行。
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
- Agent 文档：https://docs.optics.rolemodel.design/llms.txt（Markdown 索引；组件页面展示每种变体的 HTML）。文档涵盖最新版本，因此请对照已安装的软件包检查名称。
编写 CSS 前
- 适用时使用 Optics 组件。 在
dist/css/components/中查找对应的块及其修饰符。 - 如果项目中已有类，则复用。 搜索
app/assets/stylesheets/。 - 只有前两者都不适用时，才编写新组件： 在
app/assets/stylesheets/components/{block}.css中每个文件定义一个块，并按照bem-structure技能命名和嵌套。
若要更改 Optics 组件在整个应用中的外观，请在 app/assets/stylesheets/components/optics-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检查名称。 - 深色模式下，plus 和 minus 的方向会反转。 每个级别都是一对
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 的规则合并，并更改应用中的所有 avatar。请使用 Optics 块，并将更改放在components/optics-overrides/{component}.css或项目修饰符中。 - 不完整的主题覆盖会破坏色阶。 更改任何
--op-color-*值之前，请参阅 references/theming.md。
主题
若要更改整个应用的品牌颜色、字体、圆角或色阶，请阅读 references/theming.md。