Diorama is a skill for Claude Code that makes a small moving 3D scene for a website, seen from an isometric angle, made of blocks on a round-cornered slab with soft shadows and small moving vehicles or people. It offers three sizes (a landing-page hero, a card for documentation or articles, or a mini version for spots such as an empty state or a 404 page) and six adjustable looks ranging from pastel toy and line drawing to a night scene. Before writing code it fixes a one-line concept and a parts list, then builds the scene and checks it in headless Chromium. The result is a single self-contained HTML file drawing SVG with no three.js, WebGL or canvas, which can also go into React.
Find why a web animation drops frames and fix itThis skill from designer Emil Kowalski diagnoses web animations that stutter and makes them hold the frame rate. It explains the layout, paint and composite stages, steers the agent toward properties the browser can animate cheaply, and weighs CSS, the Web Animations API and requestAnimationFrame on performance grounds. It also covers Framer Motion's GPU path, React components that re-render on every frame, expensive blurs, inherited CSS variables and when the will-change hint is worth using. It works in three phases (find what moves, diagnose, report) and leaves easing and duration choices to sibling skills in the same repo.Coding agentWeb animationPerformance
Accessibility (Addy Osmani)Audits and improves web accessibility—semantics, keyboard, contrast, and ARIA practices.Coding agent
Add Firebase Authentication to an appThis skill guides adding Firebase Authentication to an app for user sign-in and account management. It covers users, identity providers, and tokens, then steps through provisioning, client setup, and security rules that limit data access by signed-in user.Coding agentFirebaseAuth
Agents SDK (Cloudflare)Builds agents on Cloudflare's Agents SDK with Workers-friendly patterns and constraints.Coding agent
Algorithmic ArtCreates seeded algorithmic art with p5.js and interactive parameter exploration.Coding agent
Animate web pages with GSAPThis skill is GreenSock's guide to the core GSAP API: tweens with to, from, and fromTo, easing, duration, stagger, and defaults. It also covers matchMedia for responsive and reduced-motion animation and when to pick GSAP over CSS or other libraries.Coding agentAnimationFrontend
