nomaan5541

18 — Development skill for Claude Code

Development community

Build a fullscreen loading screen component in React (Next.js 14, TypeScript).

How to install 18

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

Terminal

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

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

What 18 does

Build a fullscreen loading screen component in React (Next.js 14, TypeScript). Uses Framer Motion for animations. Here is the exact specification:

Theme

css

--bg: #0a0a0a; --text: #f5f5f5; --muted: #888888; --stroke: #1f1f1f;

Fonts: font-display → Instrument Serif (Google Fonts, italic, weight 400).

Component: LoadingScreen

Receives one prop: onComplete: () => void.

Container: — fixed inset-0 z-[9999] bg-bg. Exit animation: exit={{ opacity: 0 }}, duration 0.6s, ease [0.4, 0,

Alternatives in Development

HTML Ppt Skill — HTML PPT Studio — AgentSkill with 24 themes, 31 layouts, 20+ animations for building professional HTML present 8.1k ★
Portaljs Add Map — Render a GeoJSON dataset on an interactive Leaflet map in the Views section of a dataset's showcase 2.3k ★
Claude Instructions For Local Skill Loading — This file tells Claude how to load skills locally 845 ★