feat(dev): 新增组件样式与表单辅助 Skill
This commit is contained in:
@@ -0,0 +1,25 @@
|
||||
---
|
||||
name: style
|
||||
description: 基于当前项目的设计令牌、主题、页面和用户参考设计前端视觉规范或 CSS、SCSS。适用于颜色、排版、间距、主题、响应式与状态样式;组件选型、业务表单结构和完整页面实现不应触发。
|
||||
---
|
||||
|
||||
# 前端样式设计
|
||||
|
||||
延续项目已有视觉语言,或在输入充分时建立中性视觉基线。不得把固定品牌、颜色、断点或模板强加给项目。
|
||||
|
||||
## 工作流
|
||||
|
||||
1. 确认框架版本,并检查设计令牌、主题配置、全局样式和代表性页面。
|
||||
2. 按 [来源优先级](references/sources.md) 确定现有设计权威与用户参考的关系。
|
||||
3. 识别需要继承、补充或覆盖的颜色、排版、间距、圆角、阴影、断点和交互状态。
|
||||
4. 按 [输出约定](references/output.md) 给出规范或样式修改,并说明未验证风险。
|
||||
5. 需要写入 `.craftkit/standards/frontend/design.md` 时,先展示拟写内容和合并策略,经用户确认后再修改。
|
||||
|
||||
如果项目没有视觉基线,先询问用户是否有设计稿、截图或参考项目;输入仍不足时只给出待确认项,不擅自确定品牌风格。
|
||||
|
||||
## 边界
|
||||
|
||||
- 优先复用已有变量、令牌和主题能力,避免散落的任意值。
|
||||
- 断点由项目目标设备、现有规则或用户要求决定,不内置固定矩阵。
|
||||
- 组件契约交给 `component`,表单结构交给 `form`,业务页面实现交给前端实现 Skill。
|
||||
- 未进行真实渲染或浏览器检查时,不宣称视觉验收通过。
|
||||
@@ -0,0 +1,4 @@
|
||||
interface:
|
||||
display_name: "样式设计"
|
||||
short_description: "延续项目视觉语言并设计前端样式"
|
||||
default_prompt: "使用 $style 基于当前项目视觉基线设计或调整样式。"
|
||||
@@ -0,0 +1,22 @@
|
||||
# 样式输出约定
|
||||
|
||||
## 规范内容
|
||||
|
||||
按任务需要选择以下部分,不为凑齐章节虚构规则:
|
||||
|
||||
- 颜色与语义状态
|
||||
- 字体、字号、行高和字重
|
||||
- 间距、尺寸、圆角和阴影
|
||||
- 页面层级和背景
|
||||
- 断点、目标设备和响应行为
|
||||
- 悬停、焦点、禁用、错误和加载状态
|
||||
- 对比度、缩放、减少动画等可访问性要求
|
||||
|
||||
## 代码要求
|
||||
|
||||
- 复用已有 CSS 变量、预处理器变量或主题令牌。
|
||||
- 新增令牌时说明命名、作用域、默认值和兼容影响。
|
||||
- 避免无来源的魔法数、过深选择器和不必要的强制覆盖。
|
||||
- 明确样式是否经过构建、页面渲染、视口和主题验证。
|
||||
|
||||
输出末尾列出继承项、新增项、覆盖项、验证证据和剩余风险。
|
||||
@@ -0,0 +1,12 @@
|
||||
# 样式来源优先级
|
||||
|
||||
按以下顺序判断设计依据:
|
||||
|
||||
1. 当前项目的设计令牌、主题、全局样式和稳定页面。
|
||||
2. 用户提供的设计稿、截图、品牌约束或参考项目。
|
||||
3. `.craftkit/standards/frontend/` 中的项目规范。
|
||||
4. 项目所用公共框架与组件库对应版本的官方资料。
|
||||
|
||||
参考项目只用于用户授权的范围。若参考内容与当前项目冲突,列出冲突及合并方案,由用户决定继承还是覆盖。
|
||||
|
||||
框架版本应从依赖清单、锁文件或 `.craftkit/project.json` 核实;不要用其他主版本的主题接口、选择器或构建方式替代当前版本。
|
||||
Reference in New Issue
Block a user