Microinteracciones de FORM
Te ayuda a aplicar un conjunto de animaciones de interfaz suaves y accesibles, como botones, deslizadores, tarjetas o notificaciones. Sirve cuando quieres dar movimiento controlado a componentes concretos de una web.
Descripción original (inglés)
form-motion: FORM UI 动效词典:10 个克制、跟手、可访问的界面微交互,每个都配原始提示词、可改项、验收标准和自动验收脚本——连续形变按钮、液体标签指示器、弹性滑块、柔性开关、原位展开卡片、层叠通知、命令面板、拖动排序、跟随提示、自绘折线图。共用一个从当前位置和速度重定向的阻尼弹簧。当用户说「按钮自己变成加载和完成」「选中条像软糖追过去」「拖到头还能拽一点」「开关圆点拉长」「卡片原位展开」「通知层叠」「Cmd+K 命令面板」「拖动排序」「提示跟随鼠标」「折线自己画出来」,或点名 FORM 动效库、要把某个样例用到自己的页面时使用。只在明确请求时触发,忽略顺带提及。
Cómo instalarla
Una skill es una carpeta con un fichero SKILL.md. Para instalarla basta con copiar la carpeta form-motion en el sitio donde tu agente busca sus skills.
- Sin terminal: abre la carpeta en GitHub, descárgala y cópiala en la carpeta de tu agente (tabla de abajo).
- Con terminal (macOS, Linux o Git Bash en Windows): elige tu agente y copia los comandos.
git clone --depth 1 https://github.com/majiayu000/spellbook.git /tmp/skill-src
mkdir -p ~/.claude/skills
cp -r "/tmp/skill-src/skills/form-motion" ~/.claude/skills/form-motion
rm -rf /tmp/skill-src| Agente | Para todos tus proyectos | Solo un proyecto |
|---|---|---|
| Claude Code | ~/.claude/skills | .claude/skills |
| GitHub Copilot | ~/.copilot/skills | .github/skills |
| Codex | ~/.agents/skills | .agents/skills |
| Gemini CLI | ~/.gemini/skills | .gemini/skills |
Muchos agentes leen también .agents/skills. Reinicia el agente después de instalar. Antes de instalar una skill, revisa su SKILL.md y los scripts que incluya: se ejecutan con tus permisos.
Más skills de majiayu000/spellbook
- Probar flujos de agentes con agent-qa agent-qa-testing
- Ordenar instrucciones de agentes AI agentsmd-optimize
- Crear archivos AGENTS.md agentsmd-scaffold
- Diseñar APIs REST, GraphQL y gRPC api-design
- Diseñar interfaces para apps móviles app-ui-design
- Probar historias de usuario de apps app-user-story-qa
- Definir bases de arquitectura architecture-foundation
- Investigar arquitecturas de sistemas architecture-research
Explicación redactada con ayuda de IA a partir de la descripción original.