Custom Cursor UI
SkillStack Official
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.
What you get
- 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
Good fit
- Photography and visual-artist portfolios, galleries, fashion lookbooks and creative-agency sites — any marketing page that wants an Awwwards-grade first impression.
Not for
- 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).
- Name
- Custom Cursor UI
- Downloads
- 0
- Category
- Design
- Skills inside
- 1
Download & install
What's new: English demo copy (translated from Chinese)
Free for signed-in users.
1. Download the ZIP
Use the button above to download the packaged skill. It contains the SKILL.md plus all supporting files.
2. Unzip into your agent's skills folder
Extract the archive so that SKILL.md sits directly inside a folder named after the skill:
unzip custom-cursor-ui-v1.0.1.zip -d ~/.claude/skills/custom-cursor-ui/Skills folder per agent
- Claude Code
- ~/.claude/skills
- Cursor
- ~/.cursor/skills
- Codex
- ~/.codex/skills
- GitHub Copilot
- ~/.copilot/skills
3. Restart your agent
Your agent picks up the new skill automatically on next launch. Ask it what it can do.
Version history (2)
- v1.0.110/18/2026 · 2.2 MB · 15 files
English demo copy (translated from Chinese)
- v1.0.010/18/2026 · 2.2 MB · 15 files
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).
Like this free skill? Premium unlocks 43 exclusive skills.
One subscription unlocks every premium skill, prompt and pack — plus all future drops.
Reviews
Related skills
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