重要前提
安装AI Skills的关键前提是:必须科学上网,且开启TUN模式,这一点至关重要,直接决定安装能否顺利完成,在此郑重提醒三遍:科学上网,科学上网,科学上网。查看完整安装教程 →
gathering-ui by autumnsgrove/groveengine
npx skills add https://github.com/autumnsgrove/groveengine --skill gathering-ui鼓声在林间空地回荡。变色龙变换着色彩,用玻璃与光影描绘森林。鹿能感知他人所不能见,确保每条路径都清晰无阻。它们共同创造出欢迎所有漫游者的空间——赏心悦目,人人皆可访问。
全程使用 gw 和 gf。UI 工作快速参考:
# 查找现有的 UI 模式和组件
gf --agent search "GlassCard|GlassButton" # 查找玻璃组件使用情况
gf --agent glass # 查找玻璃态模式
gf --agent store # 查找存储使用情况(季节、主题)
gf --agent routes # 了解路由结构
# 测试 UI 更改
gw ci --affected # 对受影响的包运行 CI
SUMMON → ORGANIZE → EXECUTE → VALIDATE → COMPLETE
↓ ↲ ↲ ↲ ↓
接收请求 分派动物 动物执行 验证设计 UI
动物 工作 设计 完成
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
鼓声响起。林间空地等待着...
接收并解析请求:
明确 UI 工作:
范围检查:
"我将为以下内容动员一次 UI 聚集:[UI 描述]
这将涉及:
- 🦎 变色龙使用 Grove 美学进行设计
- 玻璃态容器
- 季节色彩和主题
- 随机森林(如适用)
- Lucide 图标(不使用表情符号)
- 🦌 鹿进行无障碍性审计
- 键盘导航
- 屏幕阅读器兼容性
- 色彩对比度
- 减少动画支持
是否继续进行聚集?"
动物们各就各位...
按顺序分派:
分派顺序:
变色龙 ──→ 鹿
│ │
│ │
设计 UI 审计
无障碍性
依赖关系:
林间空地开始转变...
通过加载并运行每个动物的专属技能来执行每个阶段:
🦎 变色龙 — 适应
加载技能:chameleon-adapt
为 [正在设计的页面/组件] 执行完整的变色龙工作流程,应用 Grove 的玻璃态设计、季节调色板和自然装饰。交接:完整的 Svelte 组件(玻璃变体、季节装饰、GroveTerm 使用、移动端响应式、减少动画支持)→ 鹿进行无障碍性审计
🦌 鹿 — 感知
加载技能:deer-sense
对变色龙产生的所有内容执行完整的鹿工作流程。如果发现问题:返回给变色龙修复,然后鹿重新审计。重复直到干净。交接:经过无障碍性验证的组件 → VALIDATE 阶段
设计已就位。两只动物用自己的眼睛进行验证...
视觉验证(强制):
在勾选复选框之前,实际 查看 构建的内容。使用 Glimpse 捕获并审查渲染结果:
# 前提条件:如果尚未完成,请初始化数据库
uv run --project tools/glimpse glimpse seed --yes
# 在所有季节和主题下捕获页面
# 本地路由使用 ?subdomain= 进行租户隔离;--auto 启动开发服务器
uv run --project tools/glimpse glimpse matrix \
"http://localhost:5173/[page]?subdomain=midnight-bloom" \
--seasons spring,summer,autumn,winter --themes light,dark --logs --auto
# 交互式浏览 — 验证流程、点击目标、滚动
uv run --project tools/glimpse glimpse browse \
"http://localhost:5173/[page]?subdomain=midnight-bloom" \
--do "click navigation, scroll to content, click interactive elements" \
--screenshot-each --logs --auto
审查每一张截图。如果有任何问题 — 修复它并重新捕获。聚集在没有视觉证据的情况下不会宣布 UI 完成。
验证清单(视觉验证后):
--logs 输出中没有控制台错误[[term]] 语法质量门:
变色龙完成 → Glimpse 捕获 → 审查截图
↓
看起来正确?
/ \
否 是
| |
变色龙修复 ↓
| 鹿审计
Glimpse 重新捕获 ↓
| 发现问题?
重复 / \
是 否
| |
变色龙修复 ↓
| 继续
鹿重新审计
|
完成
聚集结束。一个欢迎所有人的空间等待着...
完成报告:
## 🌲 聚集界面 完成
### UI:[名称]
### 动员的动物
🦎 变色龙 → 🦌 鹿
### 设计决策
- **季节:** [spring/summer/autumn/winter/midnight]
- **装饰级别:** [minimal/moderate/full]
- **使用的玻璃变体:** [surface/tint/card/accent]
### 视觉元素
- 随机森林:[count] 棵树
- 天气效果:[snow/petals/leaves/none]
- 季节鸟类:[species]
- 图标:Lucide ([list])
### 无障碍功能
- 键盘导航:✅
- 屏幕阅读器测试:[VoiceOver/NVDA]
- 色彩对比度:✅ [ratios]
- 减少动画:✅
- 触摸目标:✅ [44px 最小值]
### 创建的文件
- [组件文件]
- [样式文件]
- [无障碍文档]
### 耗时
[Duration]
_林间空地欢迎所有漫游者。_ 🌲
用户: "/gathering-ui 创建用户个人资料页面"
聚集执行:
美观且无障碍——森林欢迎所有人。 🌲
每周安装量
51
代码仓库
GitHub 星标数
2
首次出现
2026年2月5日
安全审计
安装于
opencode51
gemini-cli51
codex51
github-copilot50
amp50
cline50
The drum echoes through the glade. The Chameleon shifts its colors, painting the forest with glass and light. The Deer senses what others cannot see, ensuring every path is clear. Together they create spaces that welcome all wanderers—beautiful to behold, accessible to all.
Use gw and gf throughout. Quick reference for UI work:
# Find existing UI patterns and components
gf --agent search "GlassCard|GlassButton" # Find glass component usage
gf --agent glass # Find glassmorphism patterns
gf --agent store # Find store usage (season, theme)
gf --agent routes # Understand route structure
# Test UI changes
gw ci --affected # Run CI on affected packages
SUMMON → ORGANIZE → EXECUTE → VALIDATE → COMPLETE
↓ ↲ ↲ ↲ ↓
Receive Dispatch Animals Verify UI
Request Animals Work Design Complete
The drum sounds. The glade awaits...
Receive and parse the request:
Clarify the UI Work:
Scope Check:
"I'll mobilize a UI gathering for: [UI description]
This will involve:
- 🦎 Chameleon designing with Grove aesthetics
- Glassmorphism containers
- Seasonal colors and themes
- Randomized forests if appropriate
- Lucide icons (no emojis)
- 🦌 Deer auditing for accessibility
- Keyboard navigation
- Screen reader compatibility
- Color contrast
- Reduced motion support
Proceed with the gathering?"
The animals take their positions...
Dispatch in sequence:
Dispatch Order:
Chameleon ──→ Deer
│ │
│ │
Design Audit
UI Accessibility
Dependencies:
The glade transforms...
Execute each phase by loading and running each animal's dedicated skill:
🦎 CHAMELEON — ADAPT
Load skill: chameleon-adapt
Execute the full Chameleon workflow for [the page/component being designed], applying Grove's glassmorphism, seasonal palette, and nature decorations. Handoff: complete Svelte components (glass variants, seasonal decorations, GroveTerm usage, mobile-responsive, reduced motion support) → Deer for accessibility audit
🦌 DEER — SENSE
Load skill: deer-sense
Execute the full Deer workflow on everything the Chameleon produced. If issues are found: return to Chameleon for fixes, then Deer re-audits. Repeat until clean. Handoff: accessibility-verified components → VALIDATE phase
The design stands. Both animals verify — with their own eyes...
Visual Verification (mandatory):
Before checking boxes, actually look at what was built. Use Glimpse to capture and review the rendered result:
# Prerequisite: seed the database if not already done
uv run --project tools/glimpse glimpse seed --yes
# Capture the page across all seasons and themes
# Local routing uses ?subdomain= for tenant isolation; --auto starts the dev server
uv run --project tools/glimpse glimpse matrix \
"http://localhost:5173/[page]?subdomain=midnight-bloom" \
--seasons spring,summer,autumn,winter --themes light,dark --logs --auto
# Browse interactively — verify flows, click targets, scrolling
uv run --project tools/glimpse glimpse browse \
"http://localhost:5173/[page]?subdomain=midnight-bloom" \
--do "click navigation, scroll to content, click interactive elements" \
--screenshot-each --logs --auto
Review every screenshot. If something looks wrong — fix it and capture again. The gathering does not declare UI complete without visual proof.
Validation Checklist (after visual verification):
--logs output[[term]] syntax used in data-driven content stringsQuality Gates:
Chameleon completes → Glimpse capture → Review screenshots
↓
Looks correct?
/ \
No Yes
| |
Chameleon fixes ↓
| Deer audits
Glimpse re-capture ↓
| Issues found?
Repeat / \
Yes No
| |
Chameleon fixes ↓
| Proceed
Deer re-audit
|
Complete
The gathering ends. A welcoming space awaits...
Completion Report:
## 🌲 GATHERING UI COMPLETE
### UI: [Name]
### Animals Mobilized
🦎 Chameleon → 🦌 Deer
### Design Decisions
- **Season:** [spring/summer/autumn/winter/midnight]
- **Decoration Level:** [minimal/moderate/full]
- **Glass Variants Used:** [surface/tint/card/accent]
### Visual Elements
- Randomized forests: [count] trees
- Weather effects: [snow/petals/leaves/none]
- Seasonal birds: [species]
- Icons: Lucide ([list])
### Accessibility Features
- Keyboard navigation: ✅
- Screen reader tested: [VoiceOver/NVDA]
- Color contrast: ✅ [ratios]
- Reduced motion: ✅
- Touch targets: ✅ [44px minimum]
### Files Created
- [Component files]
- [Style files]
- [Accessibility documentation]
### Time Elapsed
[Duration]
_The glade welcomes all wanderers._ 🌲
User: "/gathering-ui Create the user profile page"
Gathering execution:
🌲 SUMMON — "Mobilizing for: User profile page. Personal settings, avatar, bio. Emotional: reflection."
🌲 ORGANIZE — "Chameleon designs → Deer audits"
🌲 EXECUTE —
🌲 VALIDATE — "Visual design matches Grove, all accessibility checks pass"
🌲 COMPLETE — "Profile page complete, beautiful and accessible"
Beautiful and accessible—the forest welcomes all. 🌲
Weekly Installs
51
Repository
GitHub Stars
2
First Seen
Feb 5, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
opencode51
gemini-cli51
codex51
github-copilot50
amp50
cline50
React视图过渡API使用指南:实现原生浏览器动画与状态管理
7,500 周安装