nomaan5541

3D Collectible Hero — Design skill for Claude Code

Design community

Build a single full-viewport hero section in React + TypeScript + Vite + Tailwind CSS, using lucide-react for icons.

How to install 3D Collectible Hero

Installs to ~/.claude/skills/nomaan5541-motionsites-prompt-collection-3d_collectible_hero/SKILL.md

Terminal

mkdir -p ~/.claude/skills/nomaan5541-motionsites-prompt-collection-3d_collectible_hero && curl -fsSL https://raw.githubusercontent.com/nomaan5541/motionsites-prompt-collection/HEAD/prompts/3D_Collectible_Hero.md -o ~/.claude/skills/nomaan5541-motionsites-prompt-collection-3d_collectible_hero/SKILL.md

Restart Claude Code, or start a new session, for it to be picked up.

What 3D Collectible Hero does

Build a single full-viewport hero section in React + TypeScript + Vite + Tailwind CSS, using `lucide-react` for icons. The component is a character-figurine carousel called "TOONHUB".

**Fonts (load in `index.html` head):**

Body

Alternatives in Design

Tokenicode — A Claude Code GUI — Tauri 2 + React 19 + TypeScript + Tailwind CSS 4 436 ★
Deep Code Review — Perform deep code review for Python and TypeScript focusing on architecture, design patterns, code quality, an 232 ★
Coding Conventions — Enforces client coding conventions 223 ★