Agent Skills › bitjaru/styleseed

bitjaru/styleseed

GitHub

针对组件或页面进行无障碍(a11y)静态代码审计,依据WCAG 2.2 AA标准检查对比度、键盘导航等合规性,并自动修复问题。

22 个 Skill 863

安装全部 Skills

npx skills add bitjaru/styleseed --all -g -y
更多选项

预览集合内 Skills

npx skills add bitjaru/styleseed --list

集合内 Skills (22)

针对组件或页面进行无障碍(a11y)静态代码审计,依据WCAG 2.2 AA标准检查对比度、键盘导航等合规性,并自动修复问题。
需要检查前端组件的无障碍合规性 发现页面存在视觉或交互可访问性问题 审查UI设计是否符合WCAG标准
engine/.claude/skills/ss-a11y/SKILL.md
npx skills add bitjaru/styleseed --skill ss-a11y -g -y
基于尼尔森十大可用性启发式原则,对移动端界面进行UX审计。检查系统状态可见性、用户控制、一致性、错误预防及美学设计等维度,识别并修复交互与体验问题。
需要评估界面用户体验 检查移动端UI是否符合可用性标准 审查现有屏幕的交互逻辑和视觉规范
engine/.claude/skills/ss-audit/SKILL.md
npx skills add bitjaru/styleseed --skill ss-audit -g -y
基于StyleSeed方法论构建UI屏幕,通过确立规则、组合语法、代码评分及像素级验证闭环,确保设计一致性与高质量交付。
需要按照特定设计规范生成前端界面 执行StyleSeed构建流程以验证UI质量
engine/.claude/skills/ss-build/SKILL.md
npx skills add bitjaru/styleseed --skill ss-build -g -y
根据 StyleSeed 设计规范生成新的 UI 组件。通过读取设计系统种子文件、主题变量和参考组件,严格遵循函数声明、语义化 Token、排版及无障碍标准,输出符合约定的前端组件代码。
需要创建新的 UI 组件 遵循 StyleSeed 规范生成前端界面元素
engine/.claude/skills/ss-component/SKILL.md
npx skills add bitjaru/styleseed --skill ss-component -g -y
生成符合随意但礼貌语气的UX微文案,包括按钮、错误提示等。需参考设计语言规范,遵循主动语态和简洁原则,禁止用于长文或翻译。
需要生成按钮标签 编写错误提示信息 设计空状态文案 创建Toast通知文本
engine/.claude/skills/ss-copy/SKILL.md
npx skills add bitjaru/styleseed --skill ss-copy -g -y
将单一设计维度(如密度、圆角)进行确定性的阶梯式调整,自动更新全局Token并校验规则与质量门禁,确保UI变更的一致性。
用户要求调整特定视觉属性如更紧凑或更宽松 需要系统性改变布局间距或排版节奏
engine/.claude/skills/ss-dial/SKILL.md
npx skills add bitjaru/styleseed --skill ss-dial -g -y
为组件或页面添加加载、成功、错误和空状态的用户反馈UI,确保符合设计规范并处理数据依赖场景。
需要为数据驱动区域添加骨架屏或加载提示 需要实现空数据、错误或操作成功的反馈界面
engine/.claude/skills/ss-feedback/SKILL.md
npx skills add bitjaru/styleseed --skill ss-feedback -g -y
专注于设计用户流程和导航结构,遵循UX模式。提供信息架构、导航模式和页面组合规则,输出流程图和屏幕清单,辅助前端开发。
需要规划多步骤用户操作流程 设计应用内导航结构 梳理页面间跳转逻辑
engine/.claude/skills/ss-flow/SKILL.md
npx skills add bitjaru/styleseed --skill ss-flow -g -y
快速自动化检查设计系统违规,通过grep扫描硬编码颜色、原始像素值等常见问题,确保UI规范一致性。
检测前端代码中的设计系统违规 Tailwind CSS样式规范检查
engine/.claude/skills/ss-lint/SKILL.md
npx skills add bitjaru/styleseed --skill ss-lint -g -y
将自然语言动效描述映射为 Framer Motion 代码,支持基于情绪或场景推荐预设动效种子。
用户指定 UI 组件的动效风格(如弹性、平滑) 根据交互场景(如按钮点击、列表加载)请求推荐动效
engine/.claude/skills/ss-motion/SKILL.md
npx skills add bitjaru/styleseed --skill ss-motion -g -y
基于 StyleSeed 规范快速生成移动端页面脚手架,包含布局模板、样式规则及强制性的代码质量验证流程。
创建新的移动端页面 初始化屏幕结构
engine/.claude/skills/ss-page/SKILL.md
npx skills add bitjaru/styleseed --skill ss-page -g -y
根据设计系统原语生成组合式UI模式(如卡片、列表、表单等),复用现有组件并遵循布局规范,避免重复造轮子。
需要生成复合UI结构 构建页面区块或交互模块
engine/.claude/skills/ss-pattern/SKILL.md
npx skills add bitjaru/styleseed --skill ss-pattern -g -y
将设计参考(截图、URL等)编译为项目本地的StyleSeed设计语法规则,包含证据、置信度及验证流程。
用户提供UI设计参考文件 需要将现有界面转化为StyleSeed语法
engine/.claude/skills/ss-reference/SKILL.md
npx skills add bitjaru/styleseed --skill ss-reference -g -y
解析并编译确定性 StyleSeed 规则包,生成语法、适配器等上下文。用于在构建前或配置变更时确定有效规则,避免加载完整手册,提升效率并确保一致性。
STYLESEED.md 发生变更 更新 StyleSeed 配置 Agent 准备加载规则前 需要检测上下文漂移时
engine/.claude/skills/ss-resolve/SKILL.md
npx skills add bitjaru/styleseed --skill ss-resolve -g -y
应用单一美学风格配置文件,调整视觉参数如半径、密度和调色板,同时保持输出语法和品牌规范不变,并验证评分。
需要统一界面视觉风格 应用预设美学配置
engine/.claude/skills/ss-restyle/SKILL.md
npx skills add bitjaru/styleseed --skill ss-restyle -g -y
用于审查UI代码是否符合设计系统规范、无障碍标准及最佳实践。检查设计Token合规性、组件约定、可访问性、移动端适配、性能及排版一致性,确保前端界面质量。
需要审查UI组件代码 检查设计系统与代码的一致性 评估前端代码的可访问性和性能
engine/.claude/skills/ss-review/SKILL.md
npx skills add bitjaru/styleseed --skill ss-review -g -y
根据StyleSeed规则集对视觉界面实现质量进行0-100分评分,提供分类明细、证据及优先修复建议,用于追踪UI设计一致性。
需要评估UI/前端组件的设计合规性 获取界面质量的量化评分与改进优先级
engine/.claude/skills/ss-score/SKILL.md
npx skills add bitjaru/styleseed --skill ss-score -g -y
引导用户配置 StyleSeed 设计锁,通过多步向导确定输出语法、领域、页面类型及品牌约束,最终生成 STYLESEED.md 以规范前端 UI 脚手架。
初始化新项目设计系统 需要为特定页面选择设计语法 配置品牌视觉约束
engine/.claude/skills/ss-setup/SKILL.md
npx skills add bitjaru/styleseed --skill ss-setup -g -y
用于在 StyleSeed 设计系统中查看、添加或修改设计令牌(颜色、字体等)。支持同步更新 JSON 源文件与 CSS 变量,确保多端一致性。
查询当前设计令牌 新增设计令牌 修改现有设计令牌
engine/.claude/skills/ss-tokens/SKILL.md
npx skills add bitjaru/styleseed --skill ss-tokens -g -y
自动检测并安全更新项目中的StyleSeed引擎文件,对比版本差异并指导用户增量添加新规则、组件和技能,确保操作可逆且不影响现有代码。
需要更新StyleSeed引擎到最新版本 检查当前项目与上游StyleSeed版本的差异
engine/.claude/skills/ss-update/SKILL.md
npx skills add bitjaru/styleseed --skill ss-update -g -y
通过渲染UI并截图,基于StyleSeed规则进行视觉验收。在代码审查通过后执行,检查像素级细节如字体、布局和可读性,确保最终视觉效果符合设计规范。
需要验证UI组件的实际视觉呈现效果 代码评分通过后需进行最终的视觉质量检查
engine/.claude/skills/ss-verify/SKILL.md
npx skills add bitjaru/styleseed --skill ss-verify -g -y
基于StyleSeed引擎的UI/前端代码审查技能,针对React/Tailwind界面检测AI生成特征。通过74条规则对一致性、色彩、排版等维度评分,提供具体修复建议,帮助用户提升界面专业度与完成度。
用户询问为什么UI看起来像AI生成的 需要发布前的设计质量打分或预检 要求将界面修改得更专业、精致或去AI化
skills/styleseed-design-review/SKILL.md
npx skills add bitjaru/styleseed --skill styleseed-design-review -g -y

首页 - Wiki
Copyright © 2011-2026 iteam. Current version is 2.155.2. UTC+08:00, 2026-08-03 22:21
浙ICP备14020137号-1 $访客地图$