FreeWeb
SVG icons, illustrations and logos
- 371371 downloads
- 167167 likes
- 205205 saves
Works with
- Claude Code
- Codex
- Cursor
- and 3 more
Staging mastery v1.0.0
Use this resource to compose an animated scene or layout where one idea dominates
New
- 532 downloads
- 117 likes
- 149 saves
Free
Install with the CLI
In a terminal, from the folder you want:
npx --yes palatekit@latest install staging-attention-clarityWith no option, the skill goes to ~/.agents/skills/; add --agent claude-code (or codex, cursor…) to target an agent.
First time: connect the CLI with
npx --yes palatekit@latest loginThe agent applies the one-idea-per-moment rule: one primary point of interest, with secondary elements that support rather than compete. You get a staging toolkit, an attention hierarchy and a silhouette test to check that a movement reads clearly.
Mostly picked by
Updated November 2, 2026
Previews
Details
- Install guides
- Generates with
- Your agent's model
- Licence
- MIT
Similar resources
View all- Free
FreeSkills
Simulated user walkthroughs and latent demand
- 400400 downloads
- 155155 likes
- 180180 saves
Works with- Claude Code
- Codex
- Cursor
- and 3 more
FreeSkills
UI motion: hover, transitions, gestures
- 600600 downloads
- 208208 likes
- 109109 saves
Works with- Claude Code
- Codex
- Cursor
- and 3 more
FreeSkills
Design tokens: colour, spacing and dark mode
- 314314 downloads
- 142142 likes
- 243243 saves
Works with- Claude Code
- Codex
- Cursor
- and 3 more
FreeWeb
UI and API mock prototypes
- 426426 downloads
- 171171 likes
- 233233 saves
Works with- Claude Code
- Codex
- Cursor
- and 3 more
FreeSkills
Design context extraction from Figma
- 412412 downloads
- 240240 likes
- 178178 saves
Works with- Claude Code
- Codex
- Cursor
- and 3 more
FreeWeb
Mockup-faithful HTML and CSS generation
- 512512 downloads
- 215215 likes
- 183183 saves
Works with- Claude Code
- Codex
- Cursor
- and 3 more
FreeSkills
Frontend engineering orchestrator
- 422422 downloads
- 230230 likes
- 161161 saves
Works with- Claude Code
- Codex
- Cursor
- and 3 more
What you get
- SKILL.md: clarity theory, staging toolkit and attention hierarchy
- SKILL.md: applications to interfaces, characters and data visualisation
Good fit for
- Several elements on your screen move at the same time
- You want a call to action to stand out clearly
Not for
Tags
- staging
- clarity
- hierarchy
- composition
About
You say
“Make the main button on my page the only element that moves on load.”
Skill published by dylantarre under the MIT license, delivered in its original version.
Show moreShow less
How to use it
- Install the skill in your agent's skills folder
- Ask your agent to compose an animated scene or layout where one idea dominates
- Review and adjust the result
Content preview
Files
- LICENSE1.1 KB
- NOTICE-PALATEKIT.md0.5 KB
- SKILL.md3.9 KB
Origin and licence
Listed unmodified
- Author
- dylantarre
- Source
- github.com/dylantarre/animation-principles/tree/83597134ba8ff59838270f94d7ac7282ffa3b54d/skills/11-by-principle-focus/staging-mastery
- Licence
- MIT
Notice
« staging-mastery » (dylantarre, MIT) livré dans sa version d'origine : fiche en français et en anglais par PalateKit.
User reviews
–
No ratings yet
Loading reviews…