📦

framer-motion

Name: framer-motion
Author: Asmayaseen

Revisión del contenido r1 Seguro ⚙️ Comandos externos

Crea animaciones en React con Framer Motion

Los equipos de React necesitan animaciones fluidas sin reconstruir patrones desde cero. Esta skill proporciona referencias, plantillas y ejemplos de Framer Motion para trabajos habituales de movimiento en interfaces de usuario.

Compatible con: Claude Codex Code(CC)

🥉 78 Bronce

Instalar con mi Agente

Copia esta solicitud en tu Agente. Incluye la página canónica del Skill y el manifiesto.

Solicitud de agente

Review the Skillstore skill "framer-motion" from https://skillstore.io/skills/asmayaseen-framer-motion.md and its manifest at https://skillstore.io/api/skills/asmayaseen-framer-motion/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.

Tu Agente debe seguir mostrando su plan y solicitar cualquier confirmación exigida por la política de seguridad.

Recursos legibles por agentes

Usa estos enlaces cuando un agente de IA, crawler o script necesite contexto limpio en vez de leer la página completa.

Detalle Markdown GET /skills/asmayaseen-framer-motion.md Manifest firmado GET /api/skills/asmayaseen-framer-motion/manifest Lockfile firmado GET /api/skills/asmayaseen-framer-motion/lockfile

Pruébalo

Usando "framer-motion". Añade feedback fluido a una tarjeta de precios y a su botón de llamada a la acción.

Resultado esperado:

Un plan de implementación conciso con recomendaciones de movimiento para hover, toque y foco, además de comportamiento con movimiento reducido y valores de tiempo.

Usando "framer-motion". Crea filtrado animado para una cuadrícula de tarjetas de proyectos.

Resultado esperado:

Un enfoque recomendado de animación de layout usando variantes compartidas, claves estables, comportamiento de salida y comprobaciones de rendimiento para cuadrículas responsivas.

Usando "framer-motion". Revisa una transición de ruta que se siente lenta en móvil.

Resultado esperado:

Una revisión enfocada que acorta los tiempos, elimina trabajo de layout costoso y sugiere pasos de prueba en dispositivos y con movimiento reducido.

Auditoría de seguridad

Seguro

v9 • 23/7/2026 Abrir el informe versionado

The static findings are false positives caused by Markdown fences, JSX template literals, React keys, route IDs, and Tailwind class names. No evidence of prompt injection, data exfiltration, credential access, reconnaissance, or executable shell and Ruby backtick behavior was found.

Archivos escaneados

4,679

Líneas analizadas

Elementos de revisión

Falsos positivos ignorados

Factores de riesgo

⚙️ Comandos externos (50)

La auditoría estática y semántica completada más reciente no detectó hallazgos de seguridad confirmados. Esto no demuestra que el skill no tenga efectos secundarios.

Auditado por: codex Ver historial de auditorías →

Compartir y citar este informe

Comparte el informe de evaluación versionado, la insignia neutral, la tarjeta insertable y las citas. Skillstore presenta evidencias sin decidir si este Skill es seguro.

Abrir el informe versionado

Copiar enlace del informe

https://skillstore.io/skills/asmayaseen-framer-motion/audits/9?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Insignia Markdown

[![Skillstore security assessment](https://skillstore.io/badges/skills/asmayaseen-framer-motion/security.svg)](https://skillstore.io/skills/asmayaseen-framer-motion?utm_source=security_passport_badge)

Insignia HTML

<a href="https://skillstore.io/skills/asmayaseen-framer-motion?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/asmayaseen-framer-motion/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

Tarjeta para insertar

<iframe src="https://skillstore.io/embed/skills/asmayaseen-framer-motion.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>

Citas académicas (APA · BibTeX · CFF)

Cita APA

Asmayaseen. (2026). framer-motion security audit report (audit version 9) [Author version unspecified]. Skillstore. https://skillstore.io/skills/asmayaseen-framer-motion/audits/9

Cita BibTeX

@techreport{asmayaseen-asmayaseen-framer-motion-2026,
  author = {Asmayaseen},
  title = {framer-motion security audit report (audit version 9)},
  institution = {Skillstore},
  year = {2026},
  number = {9},
  url = {https://skillstore.io/skills/asmayaseen-framer-motion/audits/9},
  note = {Author version unspecified}
}

CITATION.cff

cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "framer-motion security audit report (audit version 9)"
version: "unspecified"
type: report
authors:
  - name: "Asmayaseen"
date-released: "2026-07-23"
url: "https://skillstore.io/skills/asmayaseen-framer-motion/audits/9"
identifiers:
  - type: other
    value: "skillstore:asmayaseen-framer-motion:audit:9"
    description: "Skillstore immutable audit report identifier"

Puntuación de Skillstore

Por qué esta puntuación Confianza de la evidencia: Alto

Arquitectura

Mantenibilidad

Contenido

Comunidad

Cumplimiento de la especificación

Lo que puedes crear

Añadir movimiento a la UI de producto

Crea estados hover, feedback al tocar, acordeones y transiciones de modales que encajen en una interfaz de producto.

Prototipar transiciones de página

Planifica transiciones de rutas y movimiento de elementos compartidos para pantallas de Next.js antes de la implementación en producción.

Estandarizar patrones de animación

Documenta variantes reutilizables y patrones de animación de listas para equipos que mantienen bibliotecas de componentes React.

Prueba estos prompts

Animar un componente

Usa esta skill de Framer Motion para añadir una animación de entrada sencilla a mi componente React. Mantén el movimiento sutil y explica las props utilizadas.

Crear feedback de interacción

Usa esta skill para diseñar feedback de hover y toque para mi componente. Incluye configuración de spring, manejo de movimiento reducido y orientación práctica sobre tiempos.

Crear una transición de página

Usa esta skill para planificar una transición de página en Next.js con AnimatePresence. Incluye estructura de rutas, comportamiento de entrada y salida, y notas de rendimiento móvil.

Revisar la arquitectura de animaciones

Usa esta skill para revisar mi enfoque de animaciones en React. Identifica variantes reutilizables, animaciones de layout arriesgadas, soporte de accesibilidad ausente y mejores patrones de Framer Motion.

Mejores prácticas

Pregunta por el contexto del componente, el flujo de usuario y los dispositivos objetivo antes de elegir patrones de animación.
Solicita manejo de movimiento reducido para cada animación visible para el usuario.
Revisa las transiciones generadas en el navegador y ajusta los tiempos para contenido real.

Evitar

No animes propiedades con mucho coste de layout cuando transform u opacity puedan lograr el mismo resultado.
No añadas movimiento a cada elemento en un flujo de trabajo denso.
No ignores el rendimiento móvil ni las preferencias de movimiento reducido.