nomaan5541

7 — Design skill for Claude Code

Design community

Build a high-fidelity, dark-themed Hero Section using React, Tailwind CSS, and Framer Motion.

How to install 7

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

Terminal

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

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

What 7 does

Build a high-fidelity, dark-themed Hero Section using React, Tailwind CSS, and Framer Motion. The background should be solid black (#000000).

Structure & Layout:

Navbar: Fixed at the top with a blurred glass effect.

Logo: Text "Synapse" (font-medium, tracking-tight, white).

Links: Features (active state with gradient border), Insights, About, Case Studies (strikethrough style), Contact.

CTA: "Get Started for Free" (White/Gray gradient button).

Hero Content: Centered text container (z-10

Alternatives in Design

Frontend Design — Create distinctive, production-grade frontend interfaces with high design quality 94.1k ★
Doc — Read, create, and edit .docx documents with formatting and layout fidelity 14.6k ★
Studio — Launch the local design Studio — a live token editor over the latest extraction 3.6k ★