Silk Design

silk-design

A Claude Code skill for building web interfaces that move well.

Most generated pages come out static. Default scrollbars, sections that just appear, hover states that do nothing. This is a catalog of motion and design-token techniques, and it tells the agent to reach for them by default rather than only when asked.

Results

Ten sites built with this skill, they are all in German tho:

[Car-Shop](https://turbo-mottorss.bendrape1.workers.dev/)

[Bakery](https://kronberger-website.bendrape1.workers.dev/)

[Car-Shop](https://a-z-autoservice.bendrape1.workers.dev/)

[Physio-Therapy](https://physio-plus.bendrape1.workers.dev/)

[Cafe](https://a-z-autoservice.bendrape1.workers.dev/)

[Physio-Therapy](https://orthotrain-frankfurt.bendrape1.workers.dev/)

[Hair-Salon](https://the-hair-house.bendrape1.workers.dev/)

[Cafe](https://mina-cafe.com/)

[Cafe](https://cafe-opitz.bendrape1.workers.dev/)

[Cafe](https://uni-cafe.bendrape1.workers.dev/)

Install

git clone https://github.com/bendrape1-byte/silk-design ~/.claude/skills/silk-design

Then ask your coding agent to build a website using the /silk-design skill and give it additional information such as:

• Who you are (who this website is for)
• What the use case of the website is
• Add any additional information, photos or videos for it to use

What's in it

A foundation to apply on every build: Lenis smooth scroll at the root, scroll bounce killed, a nine-token color system exposed to Tailwind, and fluid `clamp()` type. Four things, about fifteen lines, and they do most of the work.

Then an effects catalog with the actual numbers in it. Spring constants, easing curves, stagger intervals, scroll offsets. Word-stagger headings, parallax, pinned and scrubbed sections, scroll-scrubbed video, cursor image-trails, magnetic buttons, curtain menus, marquees. The five larger components in `assets/` are written out in full; the rest are recipes precise enough to type from, which keeps the files sm