page-load-animations

Name: page-load-animations
Author: sendaifun

162stars45forks

How to install page-load-animations?

sendaifun/solana-new/page-load-animations

$npx -y skills add sendaifun/solana-new --skill page-load-animations

Installs into the current project.

Summary

Fix janky page loads where everything appears at once. Production framer-motion recipes for choreographed page entrances, staggered lists, modal transitions, filter cross-fades, live data animations, and micro-interactions. Use when building or reviewing any page that loads conte

Files · 1

View on GitHub

SKILL.md

1	## Preamble (run first)
2
3	```bash
4	_TEL_TIER=$(cat ~/.superstack/config.json 2>/dev/null \| grep -o '"telemetryTier": "[^"]"' \| head -1 \| sed 's/."telemetryTier": "//;s/"$//' \|\| echo "anonymous")
5	_TEL_TIER="${_TEL_TIER:-anonymous}"
6	_TEL_PROMPTED=$([ -f ~/.superstack/.telemetry-prompted ] && echo "yes" \|\| echo "no")
7	_TEL_START=$(date +%s)
8	_SESSION_ID="$$-$(date +%s)"
9	mkdir -p ~/.superstack
10	echo "TELEMETRY: $_TEL_TIER"
11	echo "TEL_PROMPTED: $_TEL_PROMPTED"
12	if [ "$_TEL_TIER" != "off" ]; then
13	_TEL_EVENT='{"skill":"page-load-animations","phase":"build","event":"started","ts":"'$(date -u +%Y-%m-%dT%H:%M:%SZ)'"}'
14	echo "$_TEL_EVENT" >> ~/.superstack/telemetry.jsonl 2>/dev/null \|\| true
15	_CONVEX_URL=$(cat ~/.superstack/config.json 2>/dev/null \| grep -o '"convexUrl":"[^"]*"' \| head -1 \| cut -d'"' -f4 \|\| echo "")
16	[ -n "$_CONVEX_URL" ] && curl -s -X POST "$_CONVEX_URL/api/mutation" -H "Content-Type: application/json" -d '{"path":"telemetry:track","args":{"skill":"page-load-animations","phase":"build","status":"success","version":"0.2.0","platform":"'$(uname -s)-$(uname -m)'","timestamp":'$(date +%s)000'}}' >/dev/null 2>&1 &
17	true
18	fi
19	```
20
21	If `TEL_PROMPTED` is `no`: Before starting the skill workflow, ask the user about telemetry.
22	Use AskUserQuestion:
23
24	> Help superstack get better! We track which skills get used and how long they take —
25	> no code, no file paths, no PII. Change anytime in `~/.superstack/config.json`.
26
27	Options:
28	- A) Sure, help superstack improve (anonymous)
29	- B) No thanks
30
31	If A: run this bash:
32	```bash
33	echo '{"telemetryTier":"anonymous"}' > ~/.superstack/config.json
34	_TEL_TIER="anonymous"
35	touch ~/.superstack/.telemetry-prompted
36	```
37
38	If B: run this bash:
39	```bash
40	echo '{"telemetryTier":"off"}' > ~/.superstack/config.json
41	_TEL_TIER="off"
42	touch ~/.superstack/.telemetry-prompted
43	```
44
45	This only happens once. If `TEL_PROMPTED` is `yes`, skip this entirely and proceed to the skill workflow.
46
47	> Wrong skill? See [SKILL_ROUTER.md](../../SKILL_ROUTER.md) for all available skills.
48
49	# Page Load Animations
50
51	> Patterns adapted from battle-tested framer-motion recipes. Original inspiration: suzi-ux-motions.
52
53	Production framer-motion recipes for making page loads feel intentional instead of chaotic. This skill exists because the most common animation problem in crypto UIs is not missing animation — it's everything appearing at once with no choreography, stagger, or spring physics. The result feels broken even when the code is correct.
54
55	This skill provides the implementation recipes. For animation theory (when to animate, duration tiers, easing curves, reduced-motion), see `frontend-design-guidelines/references/animation.md`. This skill inherits all those baseline constraints.
56
57	## Authority Model
58
59	- `animation.md` = baseline constraints (duration tiers, easing, reduced-motion, GPU properties)
60	- This skill = production recipes that implement within those constraints
61	- `frontend-design-guidelines` delegates TO this skill for framer-motion patterns, not the other way around
62
63	## Setup
64
65	```bash
66	npm install framer-motion
67	```
68
69	CSS transitions are the default for simple state changes (per `animation.md`). Reach for framer-motion when you need: spring physics, orchestrated sequences, `AnimatePresence` exit animations, gesture/drag, or shared-layout transitions.
70
71	## When to Fire This Skill
72
73	Apply these recipes any time you are:
74
75	- Building a page that loads multiple sections (dashboard, detail screen, landing page)
76	- Staggering a list, card grid, or table on mount
77	- Animating a modal, dropdown, or popover
78	- Switching tabs or filters where content changes and height shifts
79	- Displaying live-updating numbers, charts, or donut graphs
80	- Adding hover feedback, chevron rotation, or tooltip entrance
81	- Reviewing existing framer-motion code for anti-patterns
82	- A user says "the page feels janky" or "everything appears at once"
83
84	If you are building a page-level component and this skill has not been triggered, trigger it yourself.
85
86	## Workflow
87
88	### Before writing animation code, identify which reference file is relevant and read it

People who liked this also viewed

6 picks

Type

page-load-animations

162stars45forks

View on GitHub

How to install page-load-animations?

sendaifun/solana-new/page-load-animations

$npx -y skills add sendaifun/solana-new --skill page-load-animations

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	## Preamble (run first)
2
3	```bash
4	_TEL_TIER=$(cat ~/.superstack/config.json 2>/dev/null \| grep -o '"telemetryTier": "[^"]"' \| head -1 \| sed 's/."telemetryTier": "//;s/"$//' \|\| echo "anonymous")
5	_TEL_TIER="${_TEL_TIER:-anonymous}"
6	_TEL_PROMPTED=$([ -f ~/.superstack/.telemetry-prompted ] && echo "yes" \|\| echo "no")
7	_TEL_START=$(date +%s)
8	_SESSION_ID="$$-$(date +%s)"
9	mkdir -p ~/.superstack
10	echo "TELEMETRY: $_TEL_TIER"
11	echo "TEL_PROMPTED: $_TEL_PROMPTED"
12	if [ "$_TEL_TIER" != "off" ]; then
13	_TEL_EVENT='{"skill":"page-load-animations","phase":"build","event":"started","ts":"'$(date -u +%Y-%m-%dT%H:%M:%SZ)'"}'
14	echo "$_TEL_EVENT" >> ~/.superstack/telemetry.jsonl 2>/dev/null \|\| true
15	_CONVEX_URL=$(cat ~/.superstack/config.json 2>/dev/null \| grep -o '"convexUrl":"[^"]*"' \| head -1 \| cut -d'"' -f4 \|\| echo "")
16	[ -n "$_CONVEX_URL" ] && curl -s -X POST "$_CONVEX_URL/api/mutation" -H "Content-Type: application/json" -d '{"path":"telemetry:track","args":{"skill":"page-load-animations","phase":"build","status":"success","version":"0.2.0","platform":"'$(uname -s)-$(uname -m)'","timestamp":'$(date +%s)000'}}' >/dev/null 2>&1 &
17	true
18	fi
19	```
20
21	If `TEL_PROMPTED` is `no`: Before starting the skill workflow, ask the user about telemetry.
22	Use AskUserQuestion:
23
24	> Help superstack get better! We track which skills get used and how long they take —
25	> no code, no file paths, no PII. Change anytime in `~/.superstack/config.json`.
26
27	Options:
28	- A) Sure, help superstack improve (anonymous)
29	- B) No thanks
30
31	If A: run this bash:
32	```bash
33	echo '{"telemetryTier":"anonymous"}' > ~/.superstack/config.json
34	_TEL_TIER="anonymous"
35	touch ~/.superstack/.telemetry-prompted
36	```
37
38	If B: run this bash:
39	```bash
40	echo '{"telemetryTier":"off"}' > ~/.superstack/config.json
41	_TEL_TIER="off"
42	touch ~/.superstack/.telemetry-prompted
43	```
44
45	This only happens once. If `TEL_PROMPTED` is `yes`, skip this entirely and proceed to the skill workflow.
46
47	> Wrong skill? See [SKILL_ROUTER.md](../../SKILL_ROUTER.md) for all available skills.
48
49	# Page Load Animations
50
51	> Patterns adapted from battle-tested framer-motion recipes. Original inspiration: suzi-ux-motions.
52
53	Production framer-motion recipes for making page loads feel intentional instead of chaotic. This skill exists because the most common animation problem in crypto UIs is not missing animation — it's everything appearing at once with no choreography, stagger, or spring physics. The result feels broken even when the code is correct.
54
55	This skill provides the implementation recipes. For animation theory (when to animate, duration tiers, easing curves, reduced-motion), see `frontend-design-guidelines/references/animation.md`. This skill inherits all those baseline constraints.
56
57	## Authority Model
58
59	- `animation.md` = baseline constraints (duration tiers, easing, reduced-motion, GPU properties)
60	- This skill = production recipes that implement within those constraints
61	- `frontend-design-guidelines` delegates TO this skill for framer-motion patterns, not the other way around
62
63	## Setup
64
65	```bash
66	npm install framer-motion
67	```
68
69	CSS transitions are the default for simple state changes (per `animation.md`). Reach for framer-motion when you need: spring physics, orchestrated sequences, `AnimatePresence` exit animations, gesture/drag, or shared-layout transitions.
70
71	## When to Fire This Skill
72
73	Apply these recipes any time you are:
74
75	- Building a page that loads multiple sections (dashboard, detail screen, landing page)
76	- Staggering a list, card grid, or table on mount
77	- Animating a modal, dropdown, or popover
78	- Switching tabs or filters where content changes and height shifts
79	- Displaying live-updating numbers, charts, or donut graphs
80	- Adding hover feedback, chevron rotation, or tooltip entrance
81	- Reviewing existing framer-motion code for anti-patterns
82	- A user says "the page feels janky" or "everything appears at once"
83
84	If you are building a page-level component and this skill has not been triggered, trigger it yourself.
85
86	## Workflow
87
88	### Before writing animation code, identify which reference file is relevant and read it

People who liked this also viewed

6 picks

Type