nomaan5541

5 — Design skill for Claude Code

Design community

Build a production-ready, responsive landing page using React, Tailwind CSS v4, and Vite.

How to install 5

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

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

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

What 5 does

Build a production-ready, responsive landing page using React, Tailwind CSS v4, and Vite. The design should feature a high-end, dark-mode "glassmorphism" aesthetic with specific purple/pink gradients.

  1. Tech Stack & Libraries: Use hls.js for video streaming. Use motion/react (formerly Framer Motion) for animations. Use react-use-measure for sizing logic. Use clsx and tailwind-merge for class management. Use lucide-react for standard icons (if needed), but I will provide custom SVG paths for sp

Alternatives in Design

  • Frontend Design — Create distinctive, production-grade frontend interfaces with high design quality 94.1k ★
  • Figma Implement Design — Translate Figma designs into production-ready code with pixel-perfect accuracy 14.6k ★
  • App Onboarding Questionnaire — A Claude Code skill that designs and builds high-converting questionnaire-style app onboarding flows — modelle 751 ★

Full documentation available on GitHub

View Source Repository