Blog · · 4 min read · Updated
The design skills we use to build templates
We build templates with four open source agent skills, all MIT licensed and all public on GitHub: taste-skill for art direction, the official GSAP skills for animation code, Motion's skill for springs and layout, and UI UX Pro Max as a design and accessibility checklist. We read each one before installing it, and we add a short block of house rules on top. Credit for the work belongs to the authors, and every repository is linked below.
By the AnimatedWebs team
A skill is a folder of instructions, reference files and small scripts that a coding agent loads when a task matches. Done well, it replaces a vague request like "make it look good" with a method. We installed these between October 19 and October 28, 2026, and read each repository's GitHub page again before writing this.
taste-skill: art direction with a check
taste-skill by Leonxlnx is MIT licensed, and its main skill is named design-taste-frontend. It targets a familiar problem: asked to design a page, a model returns the average of every page it has seen. A centered headline, a small label, a row of icon cards, a soft gradient. Nothing in it is wrong and nothing was decided.
- It deals directions instead of letting the model pick one. A script draws three from a library of twenty, and the agent chooses the one that fits the subject.
- The idea comes from the subject. Its notes say the best sites in its study took a concept from the thing itself, not from the styling.
- You look at what you made. An inspector script opens the page in a real browser, then screenshots, a scoring rubric, fixes and another look follow.
Good for: the first decision. Dealt directions stop us reaching for the default look. Not a substitute for a point of view: its own notes warn that stripping ornaments is only half the job.
GSAP skills: animation code that is not guessed
gsap-skills is published by GreenSock, the makers of GSAP, under the MIT license. It is eight small skills: core tweens and easing, timelines, ScrollTrigger, plugins, utilities, React, performance, and Vue or Svelte. Models often write GSAP from memory and get plugin registration, cleanup or scroll pinning slightly wrong. Skills written by the library's authors fix exactly that.
Good for: scroll-linked scenes, where a scrubbed timeline and a pinned section are the whole page, and for the performance rules (animate transforms, not layout). We use it every time a template has a scroll sequence.
Motion: springs and layout
Motion AI Kit comes from the team behind Motion, the animation library. Its skill carries best practices from the library's creator, can search the current docs, and can generate CSS spring animations using the linear() easing function. Part of the kit, a paid performance audit, needs Motion+, and we did not install it.
Good for: the cases where a spring or a layout transition beats hand-written timing. We do not use Motion on our own site, where bundle weight matters, but demos that need it ship their own copy of the library in the demo folder instead of loading it from a network.
UI UX Pro Max: a checklist, not a designer
UI UX Pro Max describes itself as design intelligence for building professional interfaces. It searches a local catalog of UI styles, color palettes, font pairings, landing page patterns and UX guidelines, and can assemble a design system from a short brief. The README says it runs on the Python standard library with no network calls, which is what we confirmed when we read the scripts.
What we learned: for a luxury brief its automatic design system came back generic, so it is not our art director. Good for: contrast, touch targets, focus order and the dull problems that decide whether a page works on a phone. We treat its output as a review list.
Our house rules on top
Each installed skill gets a short section at the end, headed with our name, which wins over anything above it.
- Real motion only. Film, WebGL or cinematic scroll. No flat pages with a fade-in.
- A new architecture for each template. No shared navigation, hero or section skeleton.
- A pause button and reduced-motion support on every moving page, and a layout that holds at phone width.
- Never copy a reference. Gallery sites are for study. We take principles, not layouts, images or copy.
- Stock media is for studies and demo stand-ins, with a license line for each file.
How we vet a skill before installing it
A skill is instructions and code that your agent will trust, so installing one is closer to adding a dependency with shell access than to bookmarking a page. Our routine:
- 1Read every file that would be installed, including scripts and any install hooks, in a throwaway folder.
- 2Search for the usual problems. Network calls to unknown hosts, telemetry, anything that reads keys or environment variables, and text telling the agent to advertise for the author.
- 3Check the license, and install only what it covers. If a repository mixes MIT code with restricted media, we take the code and leave the media.
- 4Pin the commit we read, so an upstream update is a new review, not a silent change.
- 5Copy files instead of running a one-line installer, then try the skill on a real task and read the output.
The four above passed that read on the commits we looked at. That is a statement about those commits on the day we read them, not a promise about later versions, so we re-vet before every update.
Credit and links
Thank you to Leonxlnx for taste-skill, to GreenSock for gsap-skills, to the Motion team for Motion AI Kit, and to the authors of UI UX Pro Max. If you use any of them, star the repository and read the license in it. The templates are where we put all of this to work.