Scrollytelling Brand Site
Build an award-level, scroll-told company website with a story told through scroll, a WebGL "layer by layer" 3D print scene, pinned sections, per-service 3D models, a projects gallery, an About page, an optional .NET + SQL Server CMS with contact inbox and private QR contact cards, tuned to near-zero idle CPU/GPU and fully responsive. Use when the user asks for an amazing, premium, Awwwards-style, scrollytelling or 3D website for a company or brand, wants "a site like the Demo House of Prototyping site", or gives a company profile or deck to turn into an immersive site.
Install
npx skills add abdelrhman2007/scrollytelling-brand-site --skill scrollytelling-brand-sitegit clone --depth 1 https://github.com/abdelrhman2007/scrollytelling-brand-site.git /tmp/scrollytelling-brand-site
mkdir -p ~/.claude/skills
cp -r /tmp/scrollytelling-brand-site/skills/scrollytelling-brand-site ~/.claude/skills/scrollytelling-brand-sitePersonal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.
From the SKILL.md
# Scrollytelling Brand Site Proven recipe from the **Demo — The House of Prototyping** build: Next.js 15 + React 19 + TypeScript, GSAP ScrollTrigger + Lenis, React Three Fiber, HMVC modules, optional .NET 10 CMS on SQL Server. See it before you build it. These reference screenshots set the quality bar: | | | |---|---| |  |  | |  |  | The full gallery, with what each shot demonstrates, is in `references/gallery.md`. ## The non-negotiables 1. **A story, not sections.** Find the brand's single metaphor and make scroll *drive* it. For a prototyping studio, the metaphor was an idea printing itself layer by layer. Every section is one beat of the story. 2. **The brand is the system.** Pull exact colours, fonts and signature shapes from the logo and deck: the yellow highlight box, the three dots, the side rail. Turn them into CSS tokens and UI primitives first. 3. **HMVC.** Each section is a self-contained module with `model/` (content), `controller/` (hooks and GSAP), `view/` (TSX + CSS module) and `index.ts`. Modules never import each other; they share only `src/core`. 4. **Content outlives code.** Every module renders from its local model and optionally overrides it with CMS data. The site must look identical with the CMS offline.
Details
- Skill name
scrollytelling-brand-site- Repository
- abdelrhman2007/scrollytelling-brand-site
- Path
skills/scrollytelling-brand-site/SKILL.md- License
- MIT
- Repo updated
- 20 October 2026
- Listed in
- karanb192/awesome-claude-skills
FAQ
What does the Scrollytelling Brand Site skill do?
Build an award-level, scroll-told company website with a story told through scroll, a WebGL "layer by layer" 3D print scene, pinned sections, per-service 3D models, a projects gallery, an About page, an optional .NET + SQL Server CMS with contact inbox and private QR contact cards, tuned to near-zero idle CPU/GPU and fully responsive. Use when the user asks for an amazing, premium, Awwwards-style, scrollytelling or 3D website for a company or brand, wants "a site like the Demo House of Prototyping site", or gives a company profile or deck to turn into an immersive site.
How do I install the Scrollytelling Brand Site skill?
skills CLI (Claude Code, Cursor, Codex and more): npx skills add abdelrhman2007/scrollytelling-brand-site --skill scrollytelling-brand-site. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.
Is Scrollytelling Brand Site popular?
It lives in abdelrhman2007/scrollytelling-brand-site, which has 2 GitHub stars and 1 forks, and is included in 1 curated skill list.
Related skills
Tastegate
2stas4000/tastegate
Build or fix a frontend (landing page, marketing site, dashboard, app screen, component) so it looks designed, not AI-generated, and prove it in a real browser before calling it done. Picks a design direction first (taste), builds on a craft floor (impeccable-style rules), then runs scripts/gate.py, which renders the page at phone and desktop width and fails on overlapping text, sideways scroll, low contrast, tiny tap targets, AI purple gradients, gradient text, emoji icons, eyebrow labels, default fonts, three-equal-card grids and placeholder copy. Use for any UI build, redesign, polish or "m
Visual Identity Designer
5ali4o/visual-identity-designer
Build a professional, precise visual identity (brand identity) for a project, startup, or business — logo direction, color system, typography, application mockups — via a structured 9-stage agency workflow ending in two polished deliverables — a Brand Identity Guide and a Design Language System (built with the docx skill, in the user's chosen language). Trigger any time the user attaches, pastes, or describes a project idea/brief and asks for a "visual identity", "brand identity", "logo", "branding", "brand kit", "brand guide", "design language system", "هوية بصرية", or similar — even without
Anti Slop Design
2wwewtech/anti-slop-design
Autonomous Principal Design Technologist and Anti-AI-Slop Specialist. Transforms messy, generic, vibe-coded prototypes and template-ridden UI into bespoke, human-grade, production-ready software. Use whenever building, styling, refactoring, or auditing web apps, SaaS dashboards, landing pages, mobile interfaces, Tailwind CSS, component systems, or when asked to "fix my UI", "make it look professional", "clean up AI slop", "improve UX", or "review frontend design".
UI Design Intelligence
5DevvNirvana/tvastar-design-claude-code-skill
World-class UI/UX design intelligence — Tvastar v4.0. TRIGGER on: /design /preview /approved /apply /review /ship /component /heal /tokens /dark /a11y /cro /color /typography /motion /extract /storybook, build page, build component, landing page, hero section, dashboard, nav, card, animation, dark mode, layout, color palette, typography, redesign, make it look better, add animations, style this, improve UI, add polish, professional look, modern design, review my code, check before deploy, is this ready to ship.
Build with Better Design
1better-designs/better-design-plugin
Build or redesign a web or mobile interface on a Better Design design system. Use when the user asks for an app, site, page, dashboard or component and wants it built on Better Design, or asks to choose, create or install a design system.
Project Steward
5CheshireMew/project-steward
从项目过程与结果提炼治理方法并在明确要求时自我进化；按实施计划审计完成度，研究整理仓库，预防返工，沿根因修复跨层缺陷，治理架构、目录职责、用户链、UI/UX、文档、日志、环境与发布。Use for project-history learning/evolution; audit a plan or repository; understand or organize a codebase; inspect external-tool compatibility, durable operations, and project governance. Excludes isolated function, security, dependency, CI, or monitoring-only work.
Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.