Build Awwwards-grade custom cursor experiences — dot+ring engine, label cursors, image-preview hover, spotlight reveal, magnetic pull, blend-mode inversion, click ripples, drag cursors, all vanilla JS with reduced-motion fallbacks.
Use the custom-cursor-ui skill to build a photography portfolio landing page with an image-preview cursor on the work index and a spotlight-reveal darkroom section.
你能得到
- SKILL.md with 10 cursor motion patterns (trigger → timing/easing → pasteable code → reduced-motion fallback)
- references/design-tokens.md with cursor sizes, lerp factors and palette
- references/components.md with 7 component specs
- references/snippets.md with 6 copy-paste vanilla JS/CSS modules
- 2 live demo pages (VESPER fictional photography-studio landing + drag gallery) with 6 AI placeholder photos
适合场景
- Photography and visual-artist portfolios, galleries, fashion lookbooks and creative-agency sites — any marketing page that wants an Awwwards-grade first impression.
不适合
- Dense admin dashboards, long-form reading pages, form-heavy tools, or touch-first audiences (the skill ships full reduced-motion and touch fallbacks for these).
- 名称
- Custom Cursor UI
- 下载数
- 0
- 分类
- 设计
- 包含 skills
- 1
下载与安装
更新内容: English demo copy (translated from Chinese)
登录用户免费下载。
1. 下载 ZIP
点击上方按钮下载打包好的 skill，内含 SKILL.md 及全部配套文件。
2. 解压到 agent 的 skills 目录
解压后确保 SKILL.md 直接位于以 skill 命名的文件夹内：
unzip custom-cursor-ui-v1.0.1.zip -d ~/.claude/skills/custom-cursor-ui/各 Agent 的 skills 目录
- Claude Code
- ~/.claude/skills
- Cursor
- ~/.cursor/skills
- Codex
- ~/.codex/skills
- GitHub Copilot
- ~/.copilot/skills
3. 重启你的 agent
下次启动时 agent 会自动识别新 skill，直接问它能做什么。
版本历史 (2)
- v1.0.12026/10/18 · 2.2 MB · 15 个文件
English demo copy (translated from Chinese)
- v1.0.02026/10/18 · 2.2 MB · 15 个文件
Initial release: 10 cursor motion patterns (M1–M10) with pasteable vanilla JS, 7 components, 3 reference files, 2 demo pages (VESPER fictional studio landing + drag gallery, 6 AI placeholder photos).
喜欢这个免费 skill？Premium 解锁 43 个独家 skills。
一次订阅，解锁全部高级 skill、prompt 和内容包，以及未来的每一期新品。
评价
相关技能
Emil Kowalski Design Skills
Emil Kowalski Design Skills
Give your coding agent taste. 11 design-engineering skills from Emil Kowalski (ex-Vercel, ex-Linear) — animation decisions, motion review, Apple design principles, and UI polish. MIT-licensed, curated with attribution.
Claude Code · Codex · Cursor · Copilot +3
Scroll Narrative UI
Scroll Narrative UI
Scroll-driven storytelling UI: pinned chapters, multi-layer parallax, kinetic typography, scroll-scrubbed text, horizontal galleries and scroll-mapped stats — turn a landing page into a cinematic journey the user controls with the scrollbar.
Claude Code · Codex · Cursor · Copilot +3
Page Transition UI
Page Transition UI
Design page-transition systems for multi-view websites: orchestrated crossfades, directional slides, shared-element morphs (View Transitions API + FLIP fallback), curtain wipes, blur dissolves, bouncy brand moments, and loading orchestration — every recipe with exact trigger, duration/easing, and copy-paste vanilla code.
Claude Code · Codex · Cursor · Copilot +3
Marquee & Number UI
Marquee & Number UI
A complete marquee & number motion system for landing pages: seamless tickers, multi-lane marquees, odometer price wheels, eased count-ups, scroll-linked numbers, animated stat bars — all vanilla JS with reduced-motion fallbacks. Demo: a fictional boutique coastal hotel (Casa Brisa) with live booking widgets.
Claude Code · Codex · Cursor · Copilot +3