D4ND3R

Immersive Web Design — Design skill for Claude Code

Design community

Claude Code skill: immersive landing design language - Liquid Glass, stacking-deck scroll with organic crests, 3D glass hero (three/R3F + GSAP + Lenis), cursor-driven micro-interactions.

How to install Immersive Web Design

This entry records only its repository, not the path inside it, so there is no exact command to give. Open D4ND3R/immersive-web-design and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Immersive Web Design does

Claude Code skill: immersive landing design language - Liquid Glass, stacking-deck scroll with organic crests, 3D glass hero (three/R3F + GSAP + Lenis), cursor-driven micro-interactions. Includes a full Next.js starter kit.

Alternatives in Design

Skill Deck — Generate slide deck presentations from briefs — use when you need slides, pitch decks, or visual summaries 2.8k ★
Nothing Design Skill — A Claude Code skill for generating UI in the Nothing design language 1.4k ★
Scroll Craft — Claude Code skill for premium scroll-driven websites 1k ★

README

immersive-web-design

Skill de Claude Code (y compatible con cualquier agente que lea `SKILL.md`) que recoge un lenguaje de diseño completo para landings y portafolios inmersivos: **Liquid Glass real**, secciones apiladas tipo baraja con **crestas orgánicas**, **portada 3D** con modelo de vidrio y la marca en letras extruidas coreografiadas por scroll (three.js + React Three Fiber + GSAP ScrollTrigger + Lenis), cursor propio con deriva magnética, hover que fluye, loader, medidor de scroll, i18n sin recarga y contacto por WhatsApp sin backend.

Es la síntesis de una landing real en producción (Kavento México, Next.js 16 + Tailwind v4) más la ingeniería inversa de altitude101.com, tech-ish.org y palmo.co.in. Incluye **todo el código fuente** como kit de arranque y todos los números que costó calibrar.

Instalar

La skill es una carpeta autocontenida: no depende de rutas de disco, cuentas ni sistema operativo.

**Para todos tus proyectos (Claude Code):**

git clone https://github.com/D4ND3R/immersive-web-design.git ~/.claude/skills/immersive-web-design

En Windows (PowerShell):

git clone https://github.com/D4ND3R/immersive-web-design.git "$env:USERPROFILE\.claude\skills\immersive-web-design"

**Solo para un proyecto:** clónala en `/.claude/skills/immersive-web-design/`.

**Claude.ai / otros agentes:** sube la carpeta (o el `.skill` empaquetado) desde los ajustes de skills; lo único imprescindible es `SKILL.md` y `references/`; `assets/kit/` es el código de referencia.

Se activa sola cuando pides un landing, portafolio, hero 3D, liquid glass, scroll-jacking, cortinas entre secciones, animaciones al scroll/cursor, o cuando dices que una página "se ve hecha por IA". También puedes invocarla a mano: `/immersive-web-design`.

Qué hay dentro

SKILL.md                 Tesis, obligatorios, flujo, reglas que costaron bugs, índice
references/
  00-tokens.md           Paletas, tipografía, easing, radios, ritmo, z-index, voz