Not in the top 1,000 by GitHub stars

bendrape1-byte/silk-design

A Claude Code skill for building web interfaces that move well. Motion, smooth scroll, and design tokens by default.

History

Review weekly changes to SKILL.md before updating. Dates mark the weeks in which we observed each version; checks apply to the recorded commits.

View weekly changes

`SKILL.md`

Week of Nov 2, 2026 · Line counts unavailable

Before Not checked yet → After Local scripts

First observation → 0f530f001e7f

No earlier version was observed for comparison.

Compare on GitHub

View on GitHub Add to my skills

Verified commit 0f530f001e7f8e948228e27c7585177a30092ddd

144GitHub stars

4stars in 7 days

1skill in this repository

0commits in 30 days

Heat

4.7

Star growth, last 7 daysNot available
Star growth, last 24 hoursNot available
Rank movement, last 7 daysNot available
Commits, last 30 daysNot available
Accounts asking about it through MCP, last 7 daysNot available
Hot votes this weekNot available

Heat never changes the order by stars, and sponsorship never touches it. How heat works

Stars over time

30-day change not yet available: not enough history.

Individual skills in this repository

silk-design /

How it works

silk-design

When your agent uses it

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.

What it loads into context

Frontmatter

157 tokens

Always available to the agent

SKILL.md

1,808 tokens

When the skill is activated

Reference documents

16,088 tokens

Loaded on request

Token counts are estimates. Scripts run separately; they are not counted as reference context.

The playbook

Stack this assumes
The non-negotiable foundation (apply on EVERY build)
The toolbox map — reach for these
Reference a worked example — `/silk-design <name>`
Using the `assets/` files
How this fits with your other skills

Scripts executed separately

assets/AboutCursorTrail.tsx
assets/AboutTextFill.tsx
assets/AuroraBackground.tsx
assets/AutoFillText.tsx
assets/BorderGlow.tsx
assets/ButtonMagnetic.tsx
assets/FooterBrandReveal.tsx
assets/GradientBarsBackground.tsx
assets/HeroVideoScroll.tsx
assets/HoverPattern.tsx
assets/NavbarFullscreen.tsx
assets/NoiseBackground.tsx
assets/PageTransitionSwirl.tsx
assets/ScrollReveal.tsx
assets/TextAnimation.tsx
assets/useButtonClick.ts
assets/utils.ts

Files

.gitignoreasset30 bytes
LICENSEasset1,066 bytes
README.mddoc3,013 bytes
SKILL.mdcore7,277 bytes
SKILL.mdcore7,277 bytes
assets/AboutCursorTrail.tsxruns4,843 bytes
assets/AboutTextFill.tsxruns2,132 bytes
assets/AuroraBackground.tsxruns1,191 bytes
assets/AutoFillText.tsxruns1,813 bytes
assets/BorderGlow.tsxruns3,087 bytes
assets/ButtonMagnetic.tsxruns2,056 bytes
assets/FooterBrandReveal.tsxruns2,781 bytes
assets/GradientBarsBackground.tsxruns3,207 bytes
assets/HeroVideoScroll.tsxruns4,937 bytes
assets/HoverPattern.tsxruns2,608 bytes
assets/NavbarFullscreen.tsxruns4,562 bytes
assets/NoiseBackground.tsxruns1,242 bytes
assets/PageTransitionSwirl.tsxruns1,625 bytes
assets/ScrollReveal.tsxruns963 bytes
assets/TextAnimation.tsxruns2,566 bytes
assets/animations.cssasset3,901 bytes
assets/foundation.cssasset6,447 bytes
assets/masks.cssasset1,563 bytes
assets/useButtonClick.tsruns1,973 bytes
assets/utils.tsruns287 bytes
references/backgrounds.mddoc3,435 bytes
references/composition.mddoc7,596 bytes
references/design-system.mddoc8,898 bytes
references/effects.mddoc19,493 bytes
references/templates.mddoc14,864 bytes
templates/Reference1/theme.cssasset5,611 bytes
templates/Reference10/theme.cssasset6,455 bytes
templates/Reference11/theme.cssasset6,248 bytes
templates/Reference12/theme.cssasset5,773 bytes
templates/Reference13/theme.cssasset6,246 bytes
templates/Reference14/theme.cssasset6,226 bytes
templates/Reference15/theme.cssasset5,585 bytes
templates/Reference16/theme.cssasset5,659 bytes
templates/Reference17/theme.cssasset6,345 bytes
templates/Reference18/theme.cssasset5,913 bytes
templates/Reference19/theme.cssasset5,765 bytes
templates/Reference2/theme.cssasset5,637 bytes
templates/Reference20/theme.cssasset5,564 bytes
templates/Reference21/theme.cssasset5,882 bytes
templates/Reference22/theme.cssasset6,418 bytes
templates/Reference23/theme.cssasset6,063 bytes
templates/Reference3/theme.cssasset6,226 bytes
templates/Reference4/theme.cssasset5,792 bytes
templates/Reference5/theme.cssasset5,792 bytes
templates/Reference6/theme.cssasset6,157 bytes
templates/Reference7/theme.cssasset6,446 bytes
templates/Reference8/theme.cssasset6,481 bytes
templates/Reference9/theme.cssasset6,216 bytes

Read SKILL.md


# 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) +

View the complete source on GitHub

Skills included

silk-design

Repository facts

License: MIT
Created: Aug 21, 2026
Last pushed: Aug 26, 2026
Forks: 7
Open issues: 0
Project activity: Slowing

Before you install

Local scripts

Automated signals, not a guarantee

Checked Nov 6, 2026

Not fully analyzed: some files were too long, unreadable or missing. This never lowers the level.

Show 1 note

SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed

No broad tool permissions
No dangerous shell commands
30 network referencesin 9 files: README.md:13 assets/PageTransitionSwirl.tsx:36 assets/useButtonClick.ts:31 and 6 more
No hidden or obfuscated text
No instruction overrides
17 executable scriptsin 17 files: assets/AboutCursorTrail.tsx:1 assets/AboutTextFill.tsx:1 assets/AuroraBackground.tsx:1 and 14 more
No access to secrets
No requests to vote in Hot

Show all 47 signals by file

`README.md`

Network accessline 13

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

Network accessline 15

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

Network accessline 17

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

Network accessline 19

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

Network accessline 21

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

Network accessline 23

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

Network accessline 25

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

Network accessline 27
```
[Cafe](https://mina-cafe.com/)
```

Network accessline 29

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

Network accessline 31

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

Network accessline 36

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

`assets/AboutCursorTrail.tsx`

Executable scriptline 1
```
Executable file
```

`assets/AboutTextFill.tsx`

Executable scriptline 1
```
Executable file
```

`assets/AuroraBackground.tsx`

Executable scriptline 1
```
Executable file
```

`assets/AutoFillText.tsx`

Executable scriptline 1
```
Executable file
```

`assets/BorderGlow.tsx`

Executable scriptline 1
```
Executable file
```

`assets/ButtonMagnetic.tsx`

Executable scriptline 1
```
Executable file
```

`assets/FooterBrandReveal.tsx`

Executable scriptline 1
```
Executable file
```

`assets/GradientBarsBackground.tsx`

Executable scriptline 1
```
Executable file
```

`assets/HeroVideoScroll.tsx`

Executable scriptline 1
```
Executable file
```

`assets/HoverPattern.tsx`

Executable scriptline 1
```
Executable file
```

`assets/NavbarFullscreen.tsx`

Executable scriptline 1
```
Executable file
```

`assets/NoiseBackground.tsx`

Executable scriptline 1
```
Executable file
```

Network accessline 9

higher = finer sand. 0.8 reads as film grain at a 512px tile. */ const GRAIN =   "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequ

Network accessline 11

"url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='512

`assets/PageTransitionSwirl.tsx`

Executable scriptline 1
```
Executable file
```

Network accessline 36

<div className="absolute inset-0 text-primary-cta">         <svg           xmlns="http://www.w3.org/2000/svg"

Network accessline 37

<svg           xmlns="http://www.w3.org/2000/svg"           width="100%"

Network accessline 38
```
xmlns="http://www.w3.org/2000/svg"
```

`assets/ScrollReveal.tsx`

Executable scriptline 1
```
Executable file
```

`assets/TextAnimation.tsx`

Executable scriptline 1
```
Executable file
```

`assets/useButtonClick.ts`

Executable scriptline 1
```
Executable file
```

Network accessline 31

e?.preventDefault();         window.open(           href.startsWith("www.") ? `https://${href}` : href,

Network accessline 32

window.open(           href.startsWith("www.") ? `https://${href}` : href,           "_blank",

Network accessline 33

href.startsWith("www.") ? `https://${href}` : href,

`assets/utils.ts`

Executable scriptline 1
```
Executable file
```

`templates/Reference12/theme.css`

Network accessline 3

@import "../../assets/masks.css"; @import "../../assets/animations.css"; @import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@1,400;1,500;1,600;1,700&display=swap");

Network accessline 5

@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@1,400;1,500;1,600;1,700&display=swap");

`templates/Reference15/theme.css`

Network accessline 1

/* Reference15 — light & warm luxury */ @import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&display=swap");

Network accessline 2

@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&display=swap");

`templates/Reference20/theme.css`

Network accessline 1

/* Reference20 — warm personal blog */ @import url("https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600;700&display=swap");

Network accessline 2

@import url("https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600;700&display=swap");

`templates/Reference22/theme.css`

Network accessline 1

/* Reference22 — cream & espresso */ @import url("https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600;700&display=swap");

Network accessline 2

@import url("https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600;700&display=swap");

`templates/Reference23/theme.css`

Network accessline 188

margin-left: 0.3em;   vertical-align: middle;   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23b82b40'%3E%3Cpath d='M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z'/%3E%3C/svg%

Network accessline 189

vertical-align: middle;   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23b82b40'%3E%3Cpath d='M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z'/%3E%3C/svg%3E");   background-siz

Network accessline 190

background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23b82b40'%3E%3Cpath d='M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z'/%3E%3C/svg%3E");

How the signals fit together

Facts from a static read of the files at the pinned commit. They describe what the code does, not why.

Some files could not be read; the facts below still hold.

Declared and executed: 2 facts

Contacts www.w3.org, which SKILL.md, the README and the plugin manifest do not mentionassets/NoiseBackground.tsx:11High confidence
Contacts www.w3.org, which SKILL.md, the README and the plugin manifest do not mentionassets/PageTransitionSwirl.tsx:38High confidence

Signal confidence: 36 facts

Network access in prose of documentationREADME.md:13Low confidence
Network access in prose of documentationREADME.md:15Low confidence
Network access in prose of documentationREADME.md:17Low confidence
Network access in prose of documentationREADME.md:19Low confidence
Network access in prose of documentationREADME.md:21Low confidence
Network access in prose of documentationREADME.md:23Low confidence
Network access in prose of documentationREADME.md:25Low confidence
Network access in prose of documentationREADME.md:27Low confidence
Network access in prose of documentationREADME.md:29Low confidence
Network access in prose of documentationREADME.md:31Low confidence
Network access in code of documentationREADME.md:36Low confidence
Executable script in code of a file that runsassets/AboutCursorTrail.tsx:1High confidence
Executable script in code of a file that runsassets/AboutTextFill.tsx:1High confidence
Executable script in code of a file that runsassets/AuroraBackground.tsx:1High confidence
Executable script in code of a file that runsassets/AutoFillText.tsx:1High confidence
Executable script in code of a file that runsassets/BorderGlow.tsx:1High confidence
Executable script in code of a file that runsassets/ButtonMagnetic.tsx:1High confidence
Executable script in code of a file that runsassets/FooterBrandReveal.tsx:1High confidence
Executable script in code of a file that runsassets/GradientBarsBackground.tsx:1High confidence
Executable script in code of a file that runsassets/HeroVideoScroll.tsx:1High confidence
Executable script in code of a file that runsassets/HoverPattern.tsx:1High confidence
Executable script in code of a file that runsassets/NavbarFullscreen.tsx:1High confidence
Executable script in code of a file that runsassets/NoiseBackground.tsx:1High confidence
Network access in code of a file that runsassets/NoiseBackground.tsx:9High confidence
Network access in code of a file that runsassets/NoiseBackground.tsx:11High confidence
Executable script in code of a file that runsassets/PageTransitionSwirl.tsx:1High confidence
Network access in code of a file that runsassets/PageTransitionSwirl.tsx:36High confidence
Network access in code of a file that runsassets/PageTransitionSwirl.tsx:37High confidence
Network access in code of a file that runsassets/PageTransitionSwirl.tsx:38High confidence
Executable script in code of a file that runsassets/ScrollReveal.tsx:1High confidence
Executable script in code of a file that runsassets/TextAnimation.tsx:1High confidence
Executable script in code of a file that runsassets/useButtonClick.ts:1High confidence
Network access in code of a file that runsassets/useButtonClick.ts:31High confidence
Network access in code of a file that runsassets/useButtonClick.ts:32High confidence
Network access in code of a file that runsassets/useButtonClick.ts:33High confidence
Executable script in code of a file that runsassets/utils.ts:1High confidence

Works with

Agent compatibility, from the files in this repository
Agent	Status	Evidence	Install to
Claude Code	Compatible	Standard SKILL.md SKILL.md	`.claude/skills/<skill-name>/`
Codex	Compatible	Standard SKILL.md SKILL.md	`.agents/skills/<skill-name>/`
Cursor	Compatible	Standard SKILL.md SKILL.md	`.cursor/skills/<skill-name>/`
Gemini CLI	Compatible	Standard SKILL.md SKILL.md	`.gemini/skills/<skill-name>/`
GitHub Copilot	Compatible	Standard SKILL.md SKILL.md	`.github/skills/<skill-name>/`
OpenCode	Compatible	Standard SKILL.md SKILL.md	`.opencode/skills/<skill-name>/`

Native The repository ships a manifest, folder or frontmatter field for this agent.
Compatible A standard SKILL.md that this agent can read.
Unknown No evidence either way.

Derived automatically from paths, manifests and frontmatter. Not tested on each agent.

bendrape1-byte/silk-design

History

SKILL.md

Share this page

Heat

Stars over time

Individual skills in this repository

How it works

silk-design

Frontmatter

SKILL.md

Reference documents

The playbook

Scripts executed separately

Files

Skills included

Repository facts

Before you install

README.md

assets/AboutCursorTrail.tsx

assets/AboutTextFill.tsx

assets/AuroraBackground.tsx

assets/AutoFillText.tsx

assets/BorderGlow.tsx

assets/ButtonMagnetic.tsx

assets/FooterBrandReveal.tsx

assets/GradientBarsBackground.tsx

assets/HeroVideoScroll.tsx

assets/HoverPattern.tsx

assets/NavbarFullscreen.tsx

assets/NoiseBackground.tsx

assets/PageTransitionSwirl.tsx

assets/ScrollReveal.tsx

assets/TextAnimation.tsx

assets/useButtonClick.ts

assets/utils.ts

templates/Reference12/theme.css

templates/Reference15/theme.css

templates/Reference20/theme.css

templates/Reference22/theme.css

templates/Reference23/theme.css

How the signals fit together

Works with

You might also use

nextlevelbuilder/ui-ux-pro-max-skill

Leonxlnx/taste-skill

nexu-io/open-design

pbakaus/impeccable

asgeirtj/system_prompts_leaks

Nutlope/hallmark

`SKILL.md`

`README.md`

`assets/AboutCursorTrail.tsx`

`assets/AboutTextFill.tsx`

`assets/AuroraBackground.tsx`

`assets/AutoFillText.tsx`

`assets/BorderGlow.tsx`

`assets/ButtonMagnetic.tsx`

`assets/FooterBrandReveal.tsx`

`assets/GradientBarsBackground.tsx`

`assets/HeroVideoScroll.tsx`

`assets/HoverPattern.tsx`

`assets/NavbarFullscreen.tsx`

`assets/NoiseBackground.tsx`

`assets/PageTransitionSwirl.tsx`

`assets/ScrollReveal.tsx`

`assets/TextAnimation.tsx`

`assets/useButtonClick.ts`

`assets/utils.ts`

`templates/Reference12/theme.css`

`templates/Reference15/theme.css`

`templates/Reference20/theme.css`

`templates/Reference22/theme.css`

`templates/Reference23/theme.css`