Skill LibraryPrompt Skill1 DesignsTop Views

Animated Component Source Intake

Review copy-in animated component resources such as Magic UI, Motion-Primitives, and Animate UI for licensing, dependencies, interaction contracts, accessibility, and localization.

Skill Uses0

Recorded selections across prompt workflows.

Public Designs1

Ranked by views, then community favorites.

Prompt Lines8

Reusable instruction lines for generation.

Author@Interface Lab

Component

Skill Directive

Description

Review copy-in animated component resources such as Magic UI, Motion-Primitives, and Animate UI for licensing, dependencies, interaction contracts, accessibility, and localization.

TagsComponent

Skill Prompt

- Inputs must include candidate component URL/repository, target page or component role, frontend stack, dependency budget, license requirements, whether copy-paste source is allowed, and whether this is production use.
- Split source layers first: project license, component file path, separate licenses for demo assets/images/fonts/icons, Pro/paid boundaries, attribution, and redistribution limits are recorded separately.
- Audit dependencies item by item: React/Next, Tailwind, Motion/Framer Motion, Radix/shadcn, class merge utilities, CSS variables, hooks, and demo data; do not import a whole demo app structure into the project.
- Localize the component into a project-native implementation: replace demo copy, colors, gradients, icons, images, spacing, radii, dark mode, and motion tokens so the page does not look like the original library example.
- Preserve or add interaction contracts: keyboard, focus-visible, focus return, aria label/description, disabled/loading/error, portals, Escape, outside click, and scroll lock.
- Motion must provide reduced-motion alternatives; remove decorative infinite loops, excessive blur/filter, large parallax movement, and costly mobile animation.
- Deliver a source intake table, license/risk notes, dependency diff, local token mapping, component-state checklist, desktop/mobile QA steps, and conditions where the resource must not be adopted.
- Sources referenced: shadcn/ui registry and skills docs, Radix accessibility and data-state patterns, Tailwind responsive/states docs, Next.js accessibility guidance, PatrickJS/awesome-cursorrules CC0 rules, Motion.dev, HyperUI, Flowbite, and 21st.dev Agent Elements. The content is rewritten as Interface Lab production guidance.

Public directive summary shown; Pro unlocks the full prompt.

Layout Info

Designs below are ordered by views. Top items use live previews; the rest stay fast thumbnail cards.

Unlock Pro All Skills

Animated Component Source Intake

More pages using Animated Component Source Intake