The Agent Skills Directory

[SAFE]: The skill provides detailed instructions for using authorized MCP tools (get_design_context, get_motion_context) to facilitate motion implementation. The workflow emphasizes data-driven code generation and structural merging, following standard development practices.
[INDIRECT_PROMPT_INJECTION]: The skill processes data from external Figma URLs and tool responses, which is a common attack surface for indirect prompt injection. However, the instructions mitigate this by explicitly advising against treating tool outputs as trusted instructions and focusing on a precise, property-driven merging logic.
Ingestion points: Figma URLs (fileKey and nodeId) and the JSON responses from Figma MCP tools.
Boundary markers: The instructions mandate mapping motion data back to the structural 'anchor' identified by data-node-id, which inherently limits the influence of external data on the overall prompt flow.
Capability inventory: The skill uses MCP tools for design/motion retrieval, curl for fetching SVG assets, and generates React/CSS code.
Sanitization: The skill relies on structural matching and explicit property mapping (timing, easing, keyframes) rather than executing logic derived from the external data.
[EXTERNAL_DOWNLOADS]: The skill references established frontend libraries (e.g., motion.dev, GSAP, react-confetti) as recommendations for motion implementation. It also describes the use of curl to inline SVG assets for path-level animations, which is a standard procedure for this use case.

figma-implement-motion