# Build Animated ShadCN Interfaces

React teams need consistent UI components that still feel responsive and polished. This skill combines ShadCN patterns with Framer Motion examples for animated cards, lists, dialogs, transitions, and loading states.

## Install

```bash
npx skillstore add barnhardt-enterprises-inc/shadcn-framer
```

## Metadata

- - Slug: barnhardt-enterprises-inc-shadcn-framer
- - Version: 1.0.0
- - Author: Barnhardt-Enterprises-Inc
- - GitHub username: Barnhardt-Enterprises-Inc
- - License: MIT
- - Repository: https://github.com/Barnhardt-Enterprises-Inc/quetrex-claude/tree/main/skills/shadcn-framer
- - Ref: main
- - Supported tools: Claude, Codex, Claude Code
- - Risk level: medium
- - Risk factors: external\_commands
- - Quality score: 72
- - Public page: https://skillstore.pages.dev/skills/barnhardt-enterprises-inc-shadcn-framer
- - Manifest: https://skillstore.pages.dev/api/skills/barnhardt-enterprises-inc-shadcn-framer/manifest

## Capabilities

- Shows setup commands for initializing ShadCN UI and adding common components.
- Provides React examples for ShadCN cards, buttons, and dialogs.
- Demonstrates Framer Motion fade, hover, tap, and page transition patterns.
- Includes animated list patterns using variants, staggered children, and AnimatePresence.
- Shows a pulsing loading skeleton pattern using Framer Motion animation props.

## Use Cases

- Prototype Animated Components: Create quick ShadCN component prototypes with simple Framer Motion transitions.
- Standardize Motion Patterns: Use shared examples for dialogs, cards, lists, and page transitions across an interface.
- Improve UI Feedback States: Add hover, tap, and loading animations to make product screens feel more responsive.

## Prompt Templates

### Create a Basic Animated Card

```
Use this skill to create a ShadCN card with a Framer Motion fade-in animation for a user profile view.
```

### Animate a List View

```
Use this skill to design an animated ShadCN list where items enter with staggered motion and exit smoothly.
```

### Add Motion to a Dialog

```
Use this skill to adapt a ShadCN dialog so its content opens and closes with Framer Motion while preserving the dialog API.
```

### Build a Motion Pattern Set

```
Use this skill to define reusable motion patterns for cards, dialogs, page transitions, skeletons, hover states, and list animations.
```

## Limitations

- Does not include a full project scaffold or package lock file.
- Uses @latest in setup commands, so teams should pin versions before production use.
- Does not include automated accessibility or reduced-motion checks.
- Examples assume an existing React or Next.js project with TypeScript support.

## Best Practices

- Pin package versions before running setup commands in production repositories.
- Keep motion durations short and consistent across related components.
- Check accessibility behavior, focus handling, and reduced-motion preferences after adding animations.

## Anti Patterns

- Do not run @latest setup commands blindly in sensitive or locked-down repositories.
- Do not animate dialog structure in a way that breaks focus management or escape behavior.
- Do not apply large hover scale effects to dense layouts where content may shift.

## Security Audit

- - Safe to publish: true
- - Audited at: 2026-06-28T13:11:18.588\+00:00
- - Summary: Static external-command hits mostly match Markdown code fences and TypeScript examples, so those are false positives. The setup section does contain real pnpm dlx commands that execute the latest ShadCN package, which is legitimate but carries supply-chain risk if run without review. The weak cryptography alerts are false positives from words such as description and CardDescription, with no cryptographic code found.

## Stats

- - Views: 245
- - Downloads: 8
- - Favorites: 0
- - Popularity score: 0