nomaan5541

3D Jack Portfolio Hero — Design skill for Claude Code

Design community

Build a 3D Creator portfolio landing page for "Jack" using React, TypeScript, Tailwind CSS, Framer Motion, and Lucide React.

How to install 3D Jack Portfolio Hero

Installs to ~/.claude/skills/nomaan5541-motionsites-prompt-collection-3d-jack-portfolio-hero/SKILL.md

Terminal

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

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

What 3D Jack Portfolio Hero does

Build a 3D Creator portfolio landing page for "Jack" using React, TypeScript, Tailwind CSS, Framer Motion, and Lucide React. The page has a dark theme (#0C0C0C background) with the font Kanit (Google Fonts, weights 300-900). The page title is "Jack -- 3D Creator".

GLOBAL STYLES Background: #0C0C0C on html, body, #root, and the main wrapper Font family: 'Kanit', sans-serif Global reset: box-sizing border-box, margin 0, padding 0 CSS class .hero-heading: gradient text using background: linear-gra

Alternatives in Design

Slack GIF Creator — Create animated GIFs optimized for Slack's size constraints 94.1k ★
Scroll World — Claude Code skill/plugin: immersive scroll-scrubbed 'fly through the world' landing pages generated with Higgs 537 ★
Tokenicode — A Claude Code GUI — Tauri 2 + React 19 + TypeScript + Tailwind CSS 4 436 ★