Remotion Interactivity
remotion-dev/remotion
Structure Remotion markup for interactivity. An agent skill from remotion-dev/remotion.
UX 交互架构专家 Owner — 当任务涉及页面流程、信息架构、任务路径、交互状态、空/错/加载/恢复、可理解性、操作成本、键盘/无障碍触点或用户要求补充交互设计规范时使用；要求从用户任务和状态反馈闭环审查体验。
AGPL-3.0Auto-check passed
Install UX Interaction Architecture
$ npx skills add devcodex-labs/devcodex --skill ux-interaction-architecture -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install devcodex-labs/devcodex ux-interaction-architecture --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/devcodex-labs/devcodex.git skills-src && mkdir -p .claude/skills && cp -r skills-src/content/skills/ux-interaction-architecture .claude/skills/ux-interaction-architecture && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "ux-interaction-architecture" agent skill from https://github.com/devcodex-labs/devcodex/tree/main/content/skills/ux-interaction-architecture into .claude/skills/ux-interaction-architecture/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ux-interaction-architecture", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/devcodex-labs/devcodex/tree/main/content/skills/ux-interaction-architectureType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add devcodex-labs/devcodex --skill ux-interaction-architecture -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install devcodex-labs/devcodex ux-interaction-architecture --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/devcodex-labs/devcodex.git skills-src && mkdir -p .agents/skills && cp -r skills-src/content/skills/ux-interaction-architecture .agents/skills/ux-interaction-architecture && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "ux-interaction-architecture" agent skill from https://github.com/devcodex-labs/devcodex/tree/main/content/skills/ux-interaction-architecture into .agents/skills/ux-interaction-architecture/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ux-interaction-architecture", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add devcodex-labs/devcodex --skill ux-interaction-architecture -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install devcodex-labs/devcodex ux-interaction-architecture --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/devcodex-labs/devcodex.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/content/skills/ux-interaction-architecture .cursor/skills/ux-interaction-architecture && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "ux-interaction-architecture" agent skill from https://github.com/devcodex-labs/devcodex/tree/main/content/skills/ux-interaction-architecture into .cursor/skills/ux-interaction-architecture/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ux-interaction-architecture", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/devcodex-labs/devcodex.git --path content/skills/ux-interaction-architecture--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add devcodex-labs/devcodex --skill ux-interaction-architecture -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install devcodex-labs/devcodex ux-interaction-architecture --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/devcodex-labs/devcodex.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/content/skills/ux-interaction-architecture .gemini/skills/ux-interaction-architecture && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "ux-interaction-architecture" agent skill from https://github.com/devcodex-labs/devcodex/tree/main/content/skills/ux-interaction-architecture into .gemini/skills/ux-interaction-architecture/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ux-interaction-architecture", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install devcodex-labs/devcodex ux-interaction-architectureInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add devcodex-labs/devcodex --skill ux-interaction-architecture -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/devcodex-labs/devcodex.git skills-src && mkdir -p .github/skills && cp -r skills-src/content/skills/ux-interaction-architecture .github/skills/ux-interaction-architecture && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "ux-interaction-architecture" agent skill from https://github.com/devcodex-labs/devcodex/tree/main/content/skills/ux-interaction-architecture into .github/skills/ux-interaction-architecture/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ux-interaction-architecture", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add devcodex-labs/devcodex --skill ux-interaction-architecture -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install devcodex-labs/devcodex ux-interaction-architecture --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/devcodex-labs/devcodex.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/content/skills/ux-interaction-architecture .opencode/skills/ux-interaction-architecture && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "ux-interaction-architecture" agent skill from https://github.com/devcodex-labs/devcodex/tree/main/content/skills/ux-interaction-architecture into .opencode/skills/ux-interaction-architecture/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ux-interaction-architecture", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
ux-interaction-architecture- GitHub stars
- 439
- Token cost
- ~520 tokens
- SKILL.md length
- 86 words
- Files
- 2
- Skills in repo
- 70
- Repo updated
- First seen
- Licence
- AGPL-3.0
At a glance
UX 交互架构专家 Owner — 当任务涉及页面流程、信息架构、任务路径、交互状态、空/错/加载/恢复、可理解性、操作成本、键盘/无障碍触点或用户要求补充交互设计规范时使用；要求从用户任务和状态反馈闭环审查体验。
- Works in 6 steps: 建立用户任务流：入口、关键动作、分支、完成状态和退出路径。 → 建立信息架构：导航、层级、命名、分组、默认视图、详情与列表关系。 → 枚举状态反馈：空、加载、旧缓存、成功、错误、禁用、保存中、冲突、过期。 → …
- SKILL.md covers 定位, 触发条件, 核心门禁 and 执行步骤, plus 3 more sections
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
What it does
UX Interaction Architecture is an agent skill from devcodex-labs/devcodex. UX 交互架构专家 Owner — 当任务涉及页面流程、信息架构、任务路径、交互状态、空/错/加载/恢复、可理解性、操作成本、键盘/无障碍触点或用户要求补充交互设计规范时使用；要求从用户任务和状态反馈闭环审查体验。
Its SKILL.md is about 520 tokens, which your agent loads only when the skill is triggered. The skill folder holds 1 other file (for example `intent.json`).
The repository describes itself as: Intent-driven AI coding workflow runtime for consistent context, skills, approvals, validation, and handoffs across six AI coding hosts. The licence is AGPL-3.0.
Example prompts
- “/ux-interaction-architecture”
Workflow steps
6 steps, taken from the first numbered list in SKILL.md.
- 建立用户任务流：入口、关键动作、分支、完成状态和退出路径。
- 建立信息架构：导航、层级、命名、分组、默认视图、详情与列表关系。
- 枚举状态反馈：空、加载、旧缓存、成功、错误、禁用、保存中、冲突、过期。
- 审查恢复路径：返回不丢数据、刷新不空白、失败能重试、取消能恢复。
- 审查操作成本：高频动作是否需要更少点击、批量能力、默认值或快捷路径。
- 若前端实现存在，按 test-router 选择静态、组件、E2E 或截图验证；没有明确要求时不强制打开浏览器。
What it can do on your machine
Read from SKILL.md and the folder at commit 1dd4525. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md (its code samples are markdown).
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
UX Interaction Architecture loads about 520 tokens when it runs. Until then it costs about 34 tokens; SKILL.md has 86 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from devcodex-labs/devcodex at commit 1dd4525, republished under its AGPL-3.0 licence (© devcodex-labs). 86 words, ~520 tokens.
Download SKILL.mdSave it as
.claude/skills/ux-interaction-architecture/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.- name
- ux-interaction-architecture
- description
- UX 交互架构专家 Owner — 当任务涉及页面流程、信息架构、任务路径、交互状态、空/错/加载/恢复、可理解性、操作成本、键盘/无障碍触点或用户要求补充交互设计规范时使用；要求从用户任务和状态反馈闭环审查体验。
UX Interaction Architecture Skill
定位
本 Skill 负责交互架构 Owner 视角。它关注用户如何完成任务、如何理解页面、如何在空态/错误/等待/返回/恢复中不断线，而不是只评价视觉好不好看。
触发条件
| 场景 | 是否触发 |
|---|---|
| 前端页面、后台工具、文档站、表单、列表、详情、编辑器、导航或多步骤流程 | 必须 |
| 用户提到交互设计、用户心智、是否能看懂、是否好用 | 必须 |
| 需要审查 loading、空态、错误、返回、缓存、保存、撤销、确认、批量操作 | 必须 |
| 纯后端内部接口，用户无直接交互路径 | N/A + skipReason |
核心门禁
| Gate | 要求 | 证据 |
|---|---|---|
UxInteractionArchitectureGate | 每个关键页面或工具必须绑定任务流、状态反馈和恢复路径 | 需求、页面结构、用户文档、截图、运行验证 |
TaskFlowContinuityGate | 用户从入口到完成任务不应出现断点、空白或不可恢复状态 | taskFlow、navigation、returnPath |
StateFeedbackGate | 空态、加载、保存、错误、成功、禁用、离线、过期和冲突状态必须有清楚反馈 | stateFeedback |
RecoveryPathGate | 错误、返回、失败保存、超时和数据刷新必须有恢复动作 | emptyErrorRecovery |
InteractionCostGate | 高频任务要减少重复输入、无意义确认和跳转成本 | interactionCost |
AccessibilityTouchpointGate | 关键控件、焦点、键盘、语义、对比度和可读性不得破坏主路径 | accessibilityTouchpoints |
执行步骤
- 建立用户任务流：入口、关键动作、分支、完成状态和退出路径。
- 建立信息架构：导航、层级、命名、分组、默认视图、详情与列表关系。
- 枚举状态反馈：空、加载、旧缓存、成功、错误、禁用、保存中、冲突、过期。
- 审查恢复路径：返回不丢数据、刷新不空白、失败能重试、取消能恢复。
- 审查操作成本：高频动作是否需要更少点击、批量能力、默认值或快捷路径。
- 若前端实现存在，按
test-router选择静态、组件、E2E 或截图验证；没有明确要求时不强制打开浏览器。
输出字段
## UxInteractionArchitectureGate
| 字段 | 内容 |
|------|------|
| taskFlow | 入口 -> 动作 -> 反馈 -> 完成 / 退出 |
| informationArchitecture | 导航、层级、命名、分组和默认视图 |
| stateFeedback | 空态、加载、保存、错误、成功、禁用、冲突等状态 |
| emptyErrorRecovery | 空态/错误/返回/超时/刷新后的恢复路径 |
| interactionCost | 高频任务点击、输入、等待、确认和跳转成本 |
| accessibilityTouchpoints | 键盘、焦点、语义、对比、动态文本和可读性触点 |反模式
| 反模式 | 修正 |
|---|---|
| 详情返回列表后空白，只靠重新请求 | 先显示缓存或上次可用数据，再异步刷新 |
| 页面只有 loading，没有旧数据、空态或错误恢复 | 建立 stale-while-revalidate 和恢复动作 |
| 表单失败后清空用户输入 | 保留草稿，标出错误字段和重试方式 |
| 文档站导航按维护者目录堆叠 | 按用户任务、配置、示例、排错和迁移组织 |
与其他 Skill 的关系
frontend-architecture：实现层负责状态模型、缓存策略和渲染验证。product-strategy：任务流和优先级来自目标用户与成功信号。user-manual-authoring：用户文档必须反映真实任务流和恢复路径。audit-user-manual：文档 IA 和菜单导航审查时叠加本 Skill。
© devcodex-labs, AGPL-3.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 1 other file in content/skills/ux-interaction-architecture of devcodex-labs/devcodex.
- SKILL.md
- intent.json
Open the folder on GitHubat commit 1dd4525
Compare with similar skills
UX Interaction Architecture next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| UX Interaction Architecture this skilldevcodex-labs/devcodex | 439 | — | ~520 | Automated safety check: Pass | AGPL-3.0 | |
| Remotion Interactivityremotion-dev/remotion | 62k | 5 repos | ~4.7k | Automated safety check: Pass | Custom licence | |
| Firecrawl Interact Integrationfirecrawl/firecrawl | 189k | 1 repos | ~731 | Automated safety check: Pass | ISC | |
| Interaction To Next Paintthedaviddias/Front-End-Checklist | 74k | — | ~441 | Automated safety check: Pass | MIT | |
| Create Issue Interaction UIpaperclipai/paperclip | 98k | — | ~3.4k | Automated safety check: Pass | MIT | |
| Gemini Interactions APIsickn33/agentic-awesome-skills | 47k | 1 repos | ~4.8k | Automated safety check: Pass | Apache-2.0 |
Similar skills
- Official
Firecrawl Interact Integration
firecrawl/firecrawl
Guides adding Firecrawl's /interact endpoint to product code for pages that need clicks, forms, pagination or logged-in flows beyond plain scraping.
Interaction To Next Paint
thedaviddias/Front-End-Checklist
A skill your agent uses when auditing slow page loads, heavy assets, or rendering delays related to Optimize interaction to next paint.
Create Issue Interaction UI
paperclipai/paperclip
Add a new Paperclip issue-thread interaction kind end-to-end.
Gemini Interactions API
sickn33/agentic-awesome-skills
Build with the Gemini Interactions API for text, chat, multimodal generation, streaming, managed or background agents, function calling, structured output, and generateContent migrations.
Interactive Login
yc-software/qm
How to complete browser/interactive logins (aws / gh / glab / gcloud).
More from devcodex-labs/devcodex
All 70 skills in this repoAccessibility I18n
devcodex-labs/devcodex
无障碍与国际化专家 Owner — 当任务涉及可访问性、键盘操作、焦点、屏幕阅读器、ARIA、语言地区、本地化、RTL、翻译资源、用户可见文案或多语言文档时使用；要求把包容性体验和本地化验证绑定到真实用户路径。
AI Agent System Architecture
devcodex-labs/devcodex
AI Agent 系统架构专家 Owner — 当任务涉及 Agent 路由、工具调用、上下文管理、记忆、状态机、权限、人机协作、可观测性、回放验证或模型辅助治理时使用；要求把 Agent 行为设计成可解释、可恢复、可审计。
API Contract Architecture
devcodex-labs/devcodex
API 契约架构专家 Owner — 当任务涉及 public API、HTTP/SDK/CLI 契约、版本兼容、错误模型、分页过滤、幂等、Schema、类型、迁移或消费者影响时使用；要求先冻结消费者契约，再设计实现与验证。
Architecture Design
devcodex-labs/devcodex
架构设计文档编排 Owner — 当用户要求架构设计、系统设计、技术架构或可指导开发、Review 与任务拆分的完整方案时使用；要求从业务流程反推节点、状态、数据、一致性、异常补偿、ADR 与实施任务。
Audit Common
devcodex-labs/devcodex
审查公共维度 G0~G5 + Profile Freshness Check — 所有 audit 子类型必先执行的基础维度层
Audit Session
devcodex-labs/devcodex
审计工作流的跨会话状态机 — 在 <audit-root/.audit-state/<session-id.json 持久化轮次/发现项/收敛状态，支持 Token 中断后精准恢复
Questions about UX Interaction Architecture
What does UX Interaction Architecture do?
UX 交互架构专家 Owner — 当任务涉及页面流程、信息架构、任务路径、交互状态、空/错/加载/恢复、可理解性、操作成本、键盘/无障碍触点或用户要求补充交互设计规范时使用；要求从用户任务和状态反馈闭环审查体验。. UX Interaction Architecture is an agent skill from devcodex-labs/devcodex.
How do I install UX Interaction Architecture in Claude Code?
Run `npx skills add devcodex-labs/devcodex --skill ux-interaction-architecture -a claude-code`. Or copy the skill folder (content/skills/ux-interaction-architecture in devcodex-labs/devcodex) into .claude/skills/ux-interaction-architecture in your project. Claude Code loads it when a task matches its description.
How do I install UX Interaction Architecture in Codex?
Run `npx skills add devcodex-labs/devcodex --skill ux-interaction-architecture -a codex`. Or copy the skill folder (content/skills/ux-interaction-architecture in devcodex-labs/devcodex) into .agents/skills/ux-interaction-architecture in your project. Codex loads it when a task matches its description.
Can I use UX Interaction Architecture in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add devcodex-labs/devcodex --skill ux-interaction-architecture -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/ux-interaction-architecture, .gemini/skills/ux-interaction-architecture, .github/skills/ux-interaction-architecture and .opencode/skills/ux-interaction-architecture in your project.
What does UX Interaction Architecture need to run?
SKILL.md names no scripts, command-line tools or credentials: UX Interaction Architecture is instructions for the agent only.
Does UX Interaction Architecture access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is UX Interaction Architecture safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does UX Interaction Architecture use?
UX Interaction Architecture is published under the AGPL-3.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does UX Interaction Architecture use?
About 520 tokens (SKILL.md is roughly 2.1k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to UX Interaction Architecture?
Skills that share tags, products or a category with UX Interaction Architecture: Remotion Interactivity (remotion-dev/remotion, 62k stars), Firecrawl Interact Integration (firecrawl/firecrawl, 189k stars), Interaction To Next Paint (thedaviddias/Front-End-Checklist, 74k stars) and Create Issue Interaction UI (paperclipai/paperclip, 98k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains UX Interaction Architecture?
devcodex-labs (a GitHub organization) maintains it in devcodex-labs/devcodex, which has 439 GitHub stars. The repository holds 70 skills in this directory. The repository was last updated on September 17, 2026.
Source: devcodex-labs/devcodex on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.