SuperAPI AI 工具集

sb-wrappers

通用与其它

查看项目

更新于 10-16 01:13

技能介绍

用途:为 Storybook 提供组合原语(wrapper),避免手写网格标记,按意图选择并脚手架生成类型化包装器。

主要能力:按用户意图映射包装器,如“对比两个设计/并排”用 ABCanvas,“所有状态放一个画布”用 StateGrid,“跟踪决策”用 TrackedDecision + DecisionsDashboard,“完整流程/有序序列”用 StoryStrip/StorySet,“着色器/WebGL/3D/关键帧动效”用 ShaderCanvas/R3FCanvas/MotionStage,“令牌来源/设计系统健康/清单”用 TokensCanvas/DesignSystemHealth/ProjectInventory,“图标覆盖”用 IconMatrix,“全应用路由图/旅程图”用 AppFlowGraph/JourneyGraph。

使用方式:先按需加载参考文件——写包装器故事前加载 references/wrapper-library.md 获取所选包装器的 props/args;仅在 Compare/多模式/分层构建时加载 references/composition-patterns.md。数据类包装器需在其上游步骤产出 JSON 后再脚手架,否则渲染为空。脚手架命令:"$CORE/scripts/scaffold-wrapper.sh" --tier 1(可选 --tier 2|3|4、--flow、--all),或指定名称如 ABCanvas StateGrid。icons.tsx 会一并复制并生成 barrel index.ts。

适用场景:组件状态分散在多个故事时,合并为单个 StateGrid 或 StateMatrix;StateGrid/StateMatrix 支持可选 usage 属性叠加真实调用点计数并划掉未使用项;颜色/字体用 TokenUsageGrid,逐组件表用 UsageSection。

限制:数据包装器依赖上游 JSON(如 .storybook/project-inventory.json、component-pages.json、design-system-health.json、flows.json),需先运行对应步骤;不要为单个包装器同时加载两个大型参考文件;新增/编辑包装器须遵循 CONTEXT.md §wrapper-view-design(无 emoji、共享 Icon 集、地图包装器可注入 icons 属性)。