1 / 3

在线演示

在新标签页打开真实演示页，亲手点一点、滑一滑看实际效果。

打开演示

免费精选v1.0.0

Loading Choreography UI

官方精选

#skeleton-screens #loading-states #motion-design #ux-patterns #micro-interactions #perceived-performance #frontend

Choreograph how a page loads: skeleton screens that mirror the final layout, left-to-right shimmer sweeps, staged reveals, honest progress that only reports real numbers, and optimistic UI that never blocks. Includes a full motion pattern library with copy-paste vanilla CSS/JS snippets and two working demos.

适用平台Claude CodeCodexCursorCopilotGemini CLIWindsurfCline

试试这样说

Use the loading-choreography-ui skill to design the loading states for my pet adoption catalog page: skeleton cards that mirror the real layout, a shimmer sweep, staged card reveals, and an optimistic save button.

你能得到

A complete loading-choreography system: SKILL.md with workflow, motion tokens and QA checklist, plus design-tokens, components, and snippets references with copy-paste vanilla CSS/JS for skeleton cards, shimmer, staged reveals, optimistic actions, and honest progress rails.

适合场景

Catalog, feed, search results, or profile-grid pages where the layout is known before data arrives; multi-step flows that need an honest progress story; any page where one small action currently blocks the whole interface.

不适合

Pages that load in under ~300ms (never flash a skeleton); pages whose layout is genuinely unknown; anywhere a fake percentage would be needed to fill a progress bar.

名称: Loading Choreography UI
下载数: 0
分类: 设计
包含 skills: 1

下载与安装

v1.0.0更新于 2026/11/4 · 342.1 KB · 16 个文件

更新内容: v1.0.0: skeleton-screen grammar, shimmer/staged-reveal/optimistic-UI/honest-progress pattern library with copy-paste snippets, plus two demos (pet adoption catalog with replayable load choreography, and a 4-step adoption application with honest progress rail).

登录后下载

登录用户免费下载。

1. 下载 ZIP

点击上方按钮下载打包好的 skill，内含 SKILL.md 及全部配套文件。

2. 解压到 agent 的 skills 目录

解压后确保 SKILL.md 直接位于以 skill 命名的文件夹内：

unzip loading-choreography-ui-v1.0.0.zip -d ~/.claude/skills/loading-choreography-ui/

各 Agent 的 skills 目录

Claude Code: ~/.claude/skills
Cursor: ~/.cursor/skills
Codex: ~/.codex/skills
GitHub Copilot: ~/.copilot/skills

3. 重启你的 agent

下次启动时 agent 会自动识别新 skill，直接问它能做什么。

喜欢这个免费 skill？Premium 解锁 77 个独家 skills。

一次订阅，解锁全部高级 skill、prompt 和内容包，以及未来的每一期新品。

看看 Premium →

评价

还没有评价，来做第一个打分的人吧。

登录后评价

相关技能

免费精选

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

设计

免费精选

Micro Interaction UI

A micro-interaction motion pattern library for AI agents: 16 production-ready web animation patterns — magnetic buttons, scroll narratives, 3D tilt cards, marquee counters, and more — with copy-paste code and live demos.

Claude Code · Codex · Cursor · Copilot +3

设计

免费精选

Custom Cursor UI

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.

Claude Code · Codex · Cursor · Copilot +3

设计

免费精选

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

设计