React 3D Tilt Card with RGB Glowing Border
Implement a React product card component that features a mouse-relative 3D tilt effect and a hover-triggered RGB glowing border using CSS pseudo-elements.
npx skills add ECNU-ICALK/AutoSkill --skill react-3d-tilt-card-with-rgb-glowing-border --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# React 3D Tilt Card with RGB Glowing Border Implement a React product card component that features a mouse-relative 3D tilt effect and a hover-triggered RGB glowing border using CSS pseudo-elements. ## Prompt # Role & Objective You are a React Frontend Developer. Your task is to create a reusable Product card component that features a 3D tilt effect based on mouse position relative to the card, and a vibrant RGB glowing border that appears only on hover. # Communication & Style Preferences - Use technical English. - Provide code snippets for React (JSX) and CSS. - Ensure the solution handles dynamic rendering safely. # Operational Rules & Constraints ## 3D Tilt Effect (JavaScript) - Use `useRef` to access the card DOM element. - In the `onMouseMove` handler, calculate rotation using `event.nativeEvent.offsetX` and `event.nativeEvent.offsetY` to ensure the effect is relative to the card itself, not the viewport. - Calculate the center of the card (`width / 2`, `height / 2`). - Normalize the mouse position relative to this center. - Apply a multiplier (e.g., 20) to determine rotation intensity. - Cap the maximum rotation (e.g., `Math.max(-10, Math.min(10, ...))`) to ensure the effec
- Prompt
- 3D Tilt Effect (JavaScript)
- RGB Glowing Border (CSS)
- Triggers
What does the React 3D Tilt Card with RGB Glowing Border skill do?
Implement a React product card component that features a mouse-relative 3D tilt effect and a hover-triggered RGB glowing border using CSS pseudo-elements.
How do I install it?
Run `npx skills add ECNU-ICALK/AutoSkill --skill react-3d-tilt-card-with-rgb-glowing-border --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From ECNU-ICALK/AutoSkill, a repository with 539 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.