WebsiteDesignSkillForclaude
Description
A living showcase of animated web design patterns, UI systems, and interaction references for Claude.
Installation
This entry records only its repository, not the path inside it, so there is no
exact command to give. Open the source below and copy the folder into
~/.claude/skills/, or the file into ~/.claude/agents/.
README
✦ ayaan.lol
*the website design skill for Claude — rendered as one living page*
**One HTML file · 11 chapters · 87 sections · ~7,000 animated inventions · zero images**
Every color, path, ease and pattern on this page was invented by a custom-trained animation skill and rendered in pure code — inline SVG, CSS motion and a local engine. No images. No build step. Works fully offline.
    
**[▷ Open ayaan.lol](https://ayaan.lol)** · [Download the zip](#-quick-start) · [The 100-star goal](#--the-100-star-goal)
⚡ What is this
A full showcase of a **website-design skill for Claude** — the skill was trained on thousands of invented components, and this page is the live proof. Everything moves: click it, drag it, hover it, scroll it.
🗺 The 11 chapters
| # | Chapter | Sections | Inside |
|---|---|---|---|
| I | Learn | 12 | tweens, timelines & position parameters, the 100-ease lab, stagger, ScrollTrigger, text effects, Draggable, Flip, MotionPath, Observer, morphing |
| II | Identity | 6 | design tokens, logo system, wordmarks — token by token |
| III | Components | 23 | buttons, inputs, cards, charts, toasts, tables, dialogs, players — the full UI kit |
| IV | Assets | 7 | shape vault, icons, badges, avatars, shadows, chain & token icons, real project logos |
| V | Anime | 7 | manga SFX stamps, kotatsu bubbles, sakura weather, isekai RPG windows, mecha HUD, kawa |
Related Skills
Algorithmic Art
Create generative art using p5.js with seeded randomness, flow fields, and particle systems
Brand Guidelines
Apply Anthropic's official brand colors and typography to artifacts
Canvas Design
Create beautiful visual art in PNG and PDF documents using design philosophy
Frontend Design
Create distinctive, production-grade frontend interfaces with high design quality
Slack Gif Creator
Create animated GIFs optimized for Slack's size constraints
Theme Factory
Style artifacts with professional themes including 10 pre-set color/font combinations