Agent Skills
› Southclaws/storyden
Southclaws/storyden
GitHub指导将现有设计适配至不同屏幕尺寸、设备及平台，确保跨环境体验一致性。涵盖评估挑战、制定策略及移动端/平板端适配规范。
Install All Skills
npx skills add Southclaws/storyden --all -g -y
Skills in Collection (26)
指导将现有设计适配至不同屏幕尺寸、设备及平台，确保跨环境体验一致性。涵盖评估挑战、制定策略及移动端/平板端适配规范。
需要将设计适配到新设备
响应式布局调整
npx skills add Southclaws/storyden --skill adapt -g -y
用于创建或优化 Storyden 内置机器人，涵盖设计工作流、工具契约、输出格式及评估场景。指导定义机器人职责、映射工具、塑造响应及编写测试用例。
需要创建新的内置机器人
改进现有机器人的工作流或工具描述
npx skills add Southclaws/storyden --skill agent-builder -g -y
分析功能特性，通过添加有意义的动画、微交互和运动效果提升可用性与体验。涵盖入口动画、微交互及过渡层设计，强调性能约束与无障碍支持（如 prefers-reduced-motion）。
需要为界面元素添加动画或微交互以提升用户体验
审查并优化现有功能的视觉反馈与状态过渡
npx skills add Southclaws/storyden --skill animate -g -y
用于评估和改进前端布局、间距及视觉层级，解决单调网格和结构薄弱问题，通过建立一致的间距系统和规划策略，创建有节奏感 intentional 的界面构图。
界面布局单调或拥挤
需要优化视觉层次和间距一致性
npx skills add Southclaws/storyden --skill arrange -g -y
执行前端界面质量审计，覆盖无障碍、性能、主题和响应式设计。不修复问题，而是生成包含严重性评级和建议的详细报告，供其他命令后续处理。
需要评估前端代码质量
检查无障碍合规性
审查UI设计模式
npx skills add Southclaws/storyden --skill audit -g -y
用于增强过于保守或平淡的设计，通过放大排版、色彩和层级对比来提升视觉冲击力和个性，同时保持可用性和品牌一致性。
设计过于安全或通用
需要提升界面视觉吸引力
npx skills add Southclaws/storyden --skill bolder -g -y
优化界面文案、错误提示和微文案，提升用户理解度和易用性。通过识别术语、歧义等问题，结合上下文制定改进策略，系统性地完善错误消息、表单标签及按钮文本。
需要优化界面文案或错误提示时
进行UX写作审查以改善用户体验时
npx skills add Southclaws/storyden --skill clarify -g -y
为单调或缺乏视觉吸引力的界面引入战略性色彩，提升界面的参与度与表现力。涵盖语义状态、层级引导及情感表达，确保配色符合品牌且具备目的性，避免杂乱。
界面过于单色或灰暗
缺乏视觉兴趣点
需要增强界面表现力
npx skills add Southclaws/storyden --skill colorize -g -y
从UX视角评估界面设计有效性，涵盖视觉层次、信息架构及情感共鸣等维度。重点检测AI生成痕迹，提供可操作的改进反馈，帮助提升整体设计质量与用户体验。
需要评估UI/UX设计效果
检查设计是否存在AI生成特征
获取界面优化建议
npx skills add Southclaws/storyden --skill critique -g -y
用于识别界面中可增强体验的愉悦点，通过微交互、动画和个性化细节提升用户满意度。遵循前端设计原则，确保愉悦元素不干扰核心功能，适配品牌与场景。
需要优化UI/UX以提升用户体验
设计成功、加载或空状态时的趣味互动
增加界面的个性与惊喜感
npx skills add Southclaws/storyden --skill delight -g -y
该技能用于通过移除不必要的复杂性来简化设计，聚焦核心目标，优化信息架构与视觉呈现，提升界面清晰度与用户体验。
用户要求简化或重构现有UI/UX设计
设计存在视觉混乱、功能冗余或层级不清问题
npx skills add Southclaws/storyden --skill distill -g -y
用于识别、提取并整合可复用的UI组件、设计令牌和模式到设计系统中，提升一致性和维护性。
需要建立或优化设计系统
发现重复的UI组件或硬编码样式
希望统一前端组件库和设计规范
npx skills add Southclaws/storyden --skill extract -g -y
指导创建独特且生产级的前端界面，避免通用AI美学。通过收集受众、用例和品牌基调等上下文，确定大胆的设计方向，并生成具有高设计质量的创意代码。
构建网页组件或页面
制作海报或应用程序
需要高设计质量的界面开发
npx skills add Southclaws/storyden --skill frontend-design -g -y
提升界面鲁棒性，涵盖错误处理、i18n支持、文本溢出及边缘场景管理，确保生产就绪。
前端界面健壮性优化
国际化适配检查
极端输入与异常状态测试
npx skills add Southclaws/storyden --skill harden -g -y
分析并重构前端功能，使其完全符合设计系统的标准、美学和既定模式。通过发现设计系统上下文、分析当前不一致性并制定规范化计划，系统性解决排版、颜色、布局及组件等问题，确保视觉与交互的一致性。
需要统一UI风格时
修复与设计系统不一致的界面问题时
npx skills add Southclaws/storyden --skill normalize -g -y
指导设计和优化产品引导流程、空状态及首次用户体验，帮助用户快速理解价值并成功上手。涵盖需求评估、核心设计原则（如展示而非告知、最小化阻力）及具体场景实现方案。
需要设计新用户引导流程
优化空状态或新手体验
npx skills add Southclaws/storyden --skill onboard -g -y
针对前端界面性能进行优化，涵盖加载速度、渲染效率、动画流畅度及资源体积。通过测量核心指标定位瓶颈，并提供图片、JS/CSS、字体等具体的优化策略与代码示例。
提升页面加载速度
优化渲染性能
减小打包体积
改善动画流畅度
npx skills add Southclaws/storyden --skill optimize -g -y
指导在浏览器前端实现超越常规极限的高性能交互与视觉特效，如虚拟表格、物理动画及流式验证。强调基于上下文的方案提案与浏览器自动化迭代验证，确保技术实现的惊艳感与适用性。
需要实现高性能数据渲染（如百万行表格）
需要创建复杂的交互动画或视觉特效
要求界面体验达到极致流畅或电影级转场
npx skills add Southclaws/storyden --skill overdrive -g -y
用于在功能完成后进行最终质量检查，修复对齐、间距、一致性及细节问题，确保视觉和交互达到高水准。
代码或设计即将发布前的最终审查
需要提升UI/UX细节质量和一致性
npx skills add Southclaws/storyden --skill polish -g -y
降低设计视觉强度，减少过度大胆或侵略性的元素，通过调整色彩饱和度、层级和简化来营造精致优雅的美学，同时保持设计的有效性和影响力。
设计过于鲜艳刺眼
视觉元素竞争过多导致混乱
需要提升设计的精致感和舒适度
npx skills add Southclaws/storyden --skill quieter -g -y
React代码健康扫描与诊断工具，用于提交前回归检查、全量清理及UI设计审计。提供0-100分健康评分，覆盖安全、性能、正确性及架构问题，支持自动化修复与规则配置。
完成功能或修复Bug后提交代码前
用户输入/doctor命令或请求扫描、整理React诊断
npx skills add Southclaws/storyden --skill react-doctor -g -y
通过扫描代码库和询问用户，收集项目设计上下文（如品牌、受众、美学偏好），并持久化保存至配置文件，为后续开发提供统一的设计指导原则。
需要建立或更新项目设计规范
初始化AI辅助开发的设计上下文
新项目启动时的设计对齐
npx skills add Southclaws/storyden --skill teach-impeccable -g -y
优化排版设计，修正字体选择、层级、尺寸及一致性，提升文本可读性与品牌契合度。
用户要求改善界面文本外观
发现排版混乱或默认字体
npx skills add Southclaws/storyden --skill typeset -g -y
AI代理的浏览器自动化CLI工具，支持网页导航、表单填写、截图及数据提取。扩展支持Electron应用、Slack工作区自动化及云端浏览器环境，适用于QA测试和Web交互任务。
需要与网站交互或进行网页操作
执行网页自动化如填表点击
进行Web应用测试或QA
自动化Electron桌面应用
处理Slack工作区消息
npx skills add Southclaws/storyden --skill agent-browser -g -y
专注于前端界面设计与优化的 Skill，涵盖 UI/UX 审查、视觉层级、响应式布局、无障碍及设计系统。用于提升网站、仪表盘等界面的美观度、可用性和性能，处理从概念到落地的全流程设计任务。
用户希望改进或重新设计前端界面
需要审查 UX/UI 设计、视觉层次或可访问性
创建新的落地页、仪表盘或组件样式
npx skills add Southclaws/storyden --skill impeccable -g -y
用于前端界面设计、重构与优化的技能。涵盖UX审查、视觉层次、无障碍、响应式布局及组件打磨，旨在提升UI/UX质量与设计一致性。
用户要求改进或重新设计前端界面
涉及UI/UX优化、视觉调整或设计系统规范
npx skills add Southclaws/storyden --skill impeccable -g -y
