Individual skill
silk-design
Build websites and web UI with smooth, polished, high-end motion by default — the buttery feel of premium sites, not static slop. Use when building or restyling any website, landing page, hero, marketing page, portfolio, or web UI; when adding scroll animations, reveals, parallax, marquees, hover effects, page transitions, smooth scrolling, or micro-interactions; or when a page feels flat, generic, or unrefined and needs to feel alive. A capability catalog of proven motion + smoothness + design-token techniques (Lenis, Framer Motion, GSAP, Tailwind v4) for interfaces that feel crafted rather than assembled.
SKILL.md
Source commit 0f530f001e7f8e948228e27c7585177a30092ddd
What was checked
- Matches the observed repository HEAD
- Yes
- Scanner rules are current
- Yes
- Repository scan complete
- No
- Skill scan complete
- No
- Observed behavior
- Local scripts
- Last checked
- Nov 6, 2026
These are observations at the recorded commit, not a guarantee of safety. Review the source before running it.
Install this skill
Choose an agent in your Stack or copy a command below. Commands fetch the pinned commit and copy only this skill directory. Existing destinations are refused. Copying a command does not install anything.
An install command is unavailable: current rules, complete repository and skill scans, an eligible behavior level and a permitted license are required.
Repository context
- Repository stars (not skill ratings)
- 144
- Repository last updated
- Aug 26, 2026
- License
- MIT
Observed agent integration: No specific integration evidence. Standard SKILL.md installation does not imply verified compatibility.
- design Derived category
- marketing Derived category
- design-interface Derived category
Files and excerpt
File metadata and permitted, redacted excerpts come from the recorded scan. Source links are pinned to that commit.
Browse files
.gitignoreasset · 30 bytesLICENSEasset · 1,066 bytesREADME.mddoc · 3,013 bytesSKILL.mdcore · 7,277 bytesSKILL.mdcore · 7,277 bytesassets/AboutCursorTrail.tsxruns · 4,843 bytesassets/AboutTextFill.tsxruns · 2,132 bytesassets/AuroraBackground.tsxruns · 1,191 bytesassets/AutoFillText.tsxruns · 1,813 bytesassets/BorderGlow.tsxruns · 3,087 bytesassets/ButtonMagnetic.tsxruns · 2,056 bytesassets/FooterBrandReveal.tsxruns · 2,781 bytesassets/GradientBarsBackground.tsxruns · 3,207 bytesassets/HeroVideoScroll.tsxruns · 4,937 bytesassets/HoverPattern.tsxruns · 2,608 bytesassets/NavbarFullscreen.tsxruns · 4,562 bytesassets/NoiseBackground.tsxruns · 1,242 bytesassets/PageTransitionSwirl.tsxruns · 1,625 bytesassets/ScrollReveal.tsxruns · 963 bytesassets/TextAnimation.tsxruns · 2,566 bytesassets/animations.cssasset · 3,901 bytesassets/foundation.cssasset · 6,447 bytesassets/masks.cssasset · 1,563 bytesassets/useButtonClick.tsruns · 1,973 bytesassets/utils.tsruns · 287 bytesreferences/backgrounds.mddoc · 3,435 bytesreferences/composition.mddoc · 7,596 bytesreferences/design-system.mddoc · 8,898 bytesreferences/effects.mddoc · 19,493 bytesreferences/templates.mddoc · 14,864 bytestemplates/Reference1/theme.cssasset · 5,611 bytestemplates/Reference10/theme.cssasset · 6,455 bytestemplates/Reference11/theme.cssasset · 6,248 bytestemplates/Reference12/theme.cssasset · 5,773 bytestemplates/Reference13/theme.cssasset · 6,246 bytestemplates/Reference14/theme.cssasset · 6,226 bytestemplates/Reference15/theme.cssasset · 5,585 bytestemplates/Reference16/theme.cssasset · 5,659 bytestemplates/Reference17/theme.cssasset · 6,345 bytestemplates/Reference18/theme.cssasset · 5,913 bytestemplates/Reference19/theme.cssasset · 5,765 bytestemplates/Reference2/theme.cssasset · 5,637 bytestemplates/Reference20/theme.cssasset · 5,564 bytestemplates/Reference21/theme.cssasset · 5,882 bytestemplates/Reference22/theme.cssasset · 6,418 bytestemplates/Reference23/theme.cssasset · 6,063 bytestemplates/Reference3/theme.cssasset · 6,226 bytestemplates/Reference4/theme.cssasset · 5,792 bytestemplates/Reference5/theme.cssasset · 5,792 bytestemplates/Reference6/theme.cssasset · 6,157 bytestemplates/Reference7/theme.cssasset · 6,446 bytestemplates/Reference8/theme.cssasset · 6,481 bytestemplates/Reference9/theme.cssasset · 6,216 bytes
Read excerpt
# silk — your web-craft toolbox
This is a reminder of what you can do. Like an artist who knows their tools: when you build
for the web, you are not limited to static sections and default scrollbars. You have a full
palette of motion and smoothness that reads as "expensive." **Reach for it by default.**
The rule: **never ship a static page.** A smooth-scroll root + a reveal-on-scroll + one
signature effect is ~15 lines and turns generic output into something that feels crafted.
The trick behind these sites isn't exotic code — it's a *small, consistent* set of levers
applied everywhere. Consistency is what reads as clean.
## Stack this assumes
React + Vite + **Tailwind v4** + **`motion`** (Framer Motion, `motion/react`) + **GSAP**
(`gsap` + `@gsap/react`; plugins used: ScrollTrigger, Draggable, DrawSVGPlugin — all free) +