Fluxwing库浏览器：高效浏览与管理UXSCII组件库的目录工具
The Agent Skills Directory
安装命令
npx skills add https://smithery.ai/skills/trabian/fluxwing-library-browser🇨🇳中文介绍
Fluxwing 库浏览器
浏览所有可用的 uxscii 组件：捆绑模板、用户创建的组件以及完整屏幕。
数据位置规则
从以下位置读取（捆绑模板 - 仅作参考）：
{SKILL_ROOT}/../uxscii-component-creator/templates/- 11 个组件模板{SKILL_ROOT}/../uxscii-screen-scaffolder/templates/- 2 个屏幕示例（如果可用）{SKILL_ROOT}/docs/- 文档
从以下位置读取（项目工作区）：
./fluxwing/components/- 您创建的组件./fluxwing/screens/- 您创建的屏幕./fluxwing/library/- 自定义的模板副本
切勿写入技能目录 - 它们是只读的！
您的任务
向用户展示在四个来源中可用的 uxscii 组件：
- 捆绑模板 - 来自技能模板的 11 个精选示例（只读参考）
- 项目组件 - 用户/代理在
./fluxwing/components/中创建的可重用组件（可编辑） - 项目库 -
./fluxwing/library/中的自定义模板副本（可编辑） - 项目屏幕 -
./fluxwing/screens/中的完整屏幕组合（可编辑）
关键区别：捆绑模板是只读的参考资料。要自定义它们，请先复制到您的项目工作区。
使用预构建索引快速浏览
重要：使用预构建的模板索引进行即时浏览（比使用 glob 快 10 倍）：
// 加载预构建的索引（读取 1 个文件 = 即时结果！）
const index = JSON.parse(read('{SKILL_ROOT}/data/template-index.json'));
// 按类型浏览
const buttons = index.by_type.button; // ["primary-button", "secondary-button"]
const inputs = index.by_type.input; // ["email-input"]
// 按标签搜索
const formComponents = index.by_tag.form; // 所有与表单相关的组件
const interactiveComponents = index.by_tag.interactive; // 所有交互式组件
// 即时获取组件信息（无需读取文件！）
const buttonInfo = index.bundled_templates.find(t => t.id === "primary-button");
console.log(buttonInfo.name); // "Primary Button"
console.log(buttonInfo.description); // 完整描述
console.log(buttonInfo.preview); // 已提取的 ASCII 预览！
console.log(buttonInfo.states); // ["default", "hover", "active", "disabled"]
console.log(buttonInfo.props); // ["text", "variant", "size"]
console.log(buttonInfo.tags); // ["button", "primary", "action", "interactive"]
性能优势：
- ✅ 读取 1 个文件 对比 读取 11+ 个文件（快 10 倍！）
- ✅ 即时类型/标签过滤（无需解析）
- ✅ 预提取的 ASCII 预览（立即显示）
- ✅ 元数据摘要（无需为每个组件解析 JSON）
索引结构：
{
"version": "1.0.0",
"generated": "2025-10-18T12:00:00Z",
"template_count": 11,
"bundled_templates": [ /* 组件元数据数组 */ ],
"by_type": { /* 按类型分组的组件 */ },
"by_tag": { /* 按标签分组的组件 */ }
}
何时使用完整文件读取：
- 用户请求查看特定组件的详细信息
- 用户想要复制模板（需要完整的 .uxm 和 .md 内容）
- 用户搜索索引中未包含的非常具体的属性
显示格式
以清晰、层次化的结构呈现：
🎁 捆绑模板
📁 组件创建器模板
─────────────────────────────────────────────────────
这些是您可以复制和自定义的入门模板。
按钮（2 种变体）
├─ primary-button.uxm
│ └─ 具有悬停、焦点和禁用状态的标准可点击按钮
│ ▓▓▓▓▓▓▓▓▓▓▓▓
│ ▓ Click Me ▓
│ ▓▓▓▓▓▓▓▓▓▓▓▓
│
└─ icon-button.uxm
└─ 支持图标的按钮，用于视觉强调
[🔍 Search]
输入框（2 种变体）
├─ text-input.uxm
│ └─ 具有验证状态的基本文本输入框
│ [________________]
│
└─ email-input.uxm
└─ 具有格式验证的电子邮件专用输入框
[user@example.com ]
卡片（1 种变体）
└─ card.uxm
└─ 用于分组相关内容的容器
╭─────────────╮
│ Card Title │
├─────────────┤
│ Content... │
╰─────────────╯
模态框（1 种变体）
└─ modal.uxm
└─ 用于聚焦交互的覆盖对话框
╔═══════════════╗
║ Modal Title ║
╠═══════════════╣
║ Content... ║
╚═══════════════╝
导航（1 种变体）
└─ navigation.uxm
└─ 主导航菜单
• Home • About • Contact
反馈（2 种变体）
├─ alert.uxm
│ └─ 具有严重性级别的用户通知
│ ⚠️ Warning: Action required
│
└─ badge.uxm
└─ 小型状态指示器或标签
● New
列表（1 种变体）
└─ list.uxm
└─ 用于显示数据的垂直列表
• Item 1
• Item 2
• Item 3
─────────────────────────────────────────────────────
🎨 您的组件
📁 ./fluxwing/components/
─────────────────────────────────────────────────────
您为项目创建的组件。
✓ submit-button.uxm
└─ 用于表单的自定义提交按钮
修改时间：2024-10-11 14:23:00
[ Submit Form ]
✓ password-input.uxm
└─ 具有显示/隐藏切换功能的密码输入框
修改时间：2024-10-11 14:25:00
[••••••••] 👁️
✓ user-card.uxm
└─ 显示用户个人资料信息的卡片
修改时间：2024-10-11 15:10:00
╭──────────────────╮
│ John Doe │
│ @johndoe │
╰──────────────────╯
─────────────────────────────────────────────────────
🖥️ 您的屏幕
📁 ./fluxwing/screens/
─────────────────────────────────────────────────────
完整的屏幕组合。
✓ login-screen.uxm
└─ 用户身份验证屏幕
使用的组件：email-input, password-input, submit-button, error-alert
修改时间：2024-10-11 15:45:00
✓ dashboard.uxm
└─ 主应用程序仪表板
使用的组件：navigation, metric-card, data-table, sidebar
修改时间：2024-10-11 16:20:00
─────────────────────────────────────────────────────
总计：10 个模板，3 个组件，2 个屏幕
交互选项
显示库之后，提供以下操作：
您想做什么？
1️⃣ 查看组件详细信息（请告诉我"显示 [名称]"）
2️⃣ 将模板复制到您的项目
3️⃣ 创建新组件（请告诉我"创建 [类型]"）
4️⃣ 搭建新屏幕（请告诉我"构建 [屏幕类型] 屏幕"）
5️⃣ 搜索特定模式（例如，"button"、"input"、"card"）
详细视图
如果用户想查看特定组件的详细信息：
用户：显示 primary-button
您：📄 PRIMARY-BUTTON.UXM
─────────────────────────────────────────────────────
ID：primary-button
类型：button
版本：1.0.0
描述：具有悬停、焦点和禁用状态的标准可点击按钮
属性：
- text："Click me"
- variant："primary"
- disabled：false
状态：
- default（实线边框，白色背景）
- hover（高亮背景）
- focus（轮廓指示器）
- disabled（变灰）
可访问性：
- 角色：button
- 可聚焦：true
- 键盘：空格键，回车键
ASCII 预览：
默认状态：
▓▓▓▓▓▓▓▓▓▓▓▓
▓ Click Me ▓
▓▓▓▓▓▓▓▓▓▓▓▓
悬停状态：
█████████████
█ Click Me █
█████████████
位置：{SKILL_ROOT}/../uxscii-component-creator/templates/primary-button.uxm
要自定义：请复制到 ./fluxwing/library/ 进行编辑
将模板复制到项目
如果用户想要自定义捆绑模板：
用户：将 primary-button 复制到我的项目
您：我将把 primary-button 复制到您的库中以供自定义。
[复制 .uxm 和 .md 文件]
✓ 已复制到 ./fluxwing/library/
- primary-button.uxm
- primary-button.md
您现在可以安全地编辑这些文件。更改不会影响原始模板。
后续步骤：
- 编辑：修改 ./fluxwing/library/primary-button.uxm
- 扩展：请告诉我"为 primary-button 添加悬停状态"
- 使用：在屏幕或其他组件中引用它
搜索功能
支持组件搜索：
用户：查找所有按钮组件
您：找到 3 个按钮组件：
🎁 捆绑模板：
- primary-button.uxm（标准可点击按钮）
- icon-button.uxm（支持图标的按钮）
🎨 您的组件：
- submit-button.uxm（用于表单的自定义提交按钮）
您想查看其中任何一个的详细信息吗？
空库处理
如果用户还没有任何组件：
🎁 捆绑模板
📁 组件创建器模板
─────────────────────────────────────────────────────
有 11 个入门模板可用
🎨 您的组件
📁 ./fluxwing/components/
─────────────────────────────────────────────────────
还没有组件。创建您的第一个组件！
尝试："创建一个提交按钮" 或 "创建一个电子邮件输入框"
🖥️ 您的屏幕
📁 ./fluxwing/screens/
─────────────────────────────────────────────────────
还没有屏幕。搭建您的第一个屏幕！
尝试："构建一个登录屏幕" 或 "创建一个仪表板"
─────────────────────────────────────────────────────
总计：11 个模板，0 个组件，0 个屏幕
资源
- 示例指南：查看
{SKILL_ROOT}/docs/07-examples-guide.md以获取详细的模板文档 - 组件创建器：当您想要创建新组件时使用
- 屏幕搭建器：当您想要构建完整屏幕时使用
- 组件查看器：用于获取详细的组件信息
重要说明
- 只读模板：捆绑模板无法直接修改
- 先复制再自定义：将模板复制到
./fluxwing/library/以进行自定义 - 搜索：使用 Glob 和 Grep 按名称或模式查找组件
- 组织：将组件保存在
./fluxwing/components/中，将自定义模板保存在./fluxwing/library/中 - 屏幕：屏幕文件包括
.uxm、.md和.rendered.md（三个文件）
您正在帮助用户发现和浏览他们的 uxscii 组件库！
每周安装次数
–
来源
首次出现
–
🇺🇸English
Fluxwing Library Browser
Browse all available uxscii components: bundled templates, user-created components, and complete screens.
Data Location Rules
READ from (bundled templates - reference only):
{SKILL_ROOT}/../uxscii-component-creator/templates/- 11 component templates{SKILL_ROOT}/../uxscii-screen-scaffolder/templates/- 2 screen examples (if available){SKILL_ROOT}/docs/- Documentation
READ from (project workspace):
./fluxwing/components/- Your created components./fluxwing/screens/- Your created screens./fluxwing/library/- Customized template copies
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者，精准高效
