editorial-portfolio-chapters

Build editorial portfolio websites with chapter-based layouts and scroll-driven interactions.

Updated May 5, 2026
One-click install
npx skills add https://github.com/josippapez/ai-setup --skill editorial-portfolio-chapters-josippapez
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: editorial-portfolio-chapters
Source: https://github.com/josippapez/ai-setup/tree/main/claude/plugins/better-design/skills/editorial-portfolio-chapters
Command: npx skills add https://github.com/josippapez/ai-setup --skill editorial-portfolio-chapters-josippapez

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes assets (resource) components.

What problem does it solve? Designing portfolio and creative-studio websites often results in generic card grids and template-looking pages. This Skill provides a structured editorial approach where project work leads the story, with concrete layout, typography, motion, and accessibility rules. ## Core Features & Use Cases - Chapter-Based Page Composition: Structure pages as a sequence of editorial chapters—hero, case studies, studio, services, contact—each with distinct visual treatment. - Signature Interaction Patterns: Implement project panel reveals, oversized service typography handoffs, pinned chapters, marquees, and magnetic CTAs with defined timing and easing values. - Worked Prompt Pack: Includes a 12-pattern interaction reference (loader, split-door handoff, pinned biography, archive marquee, sticky stacks, footer utilities) extracted from a real portfolio template. - Use Case: Redesign a photographer's portfolio so each case study reads like a magazine cover, with scroll-driven reveals, a dark editorial shell, and a decisive contact finale. ## Quick Start Use the editorial-portfolio-chapters skill to redesign my photography portfolio site with chapter-based case studies and scroll-driven reveals.

Frequently Asked Questions about editorial-portfolio-chapters

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I structure a portfolio website as editorial chapters?

Open with one strong campaign image and positioning line, move directly into case studies treated as magazine covers, explain the studio only after the work, then use oversized service typography as a handoff to a high-contrast contact chapter.

How to build scroll-driven pinned sections with GSAP ScrollTrigger?

Pin a section with ScrollTrigger and map a normalized timeline to scroll progress for reveals, counters, or word-by-word illumination. Always provide reduced-motion and mobile fallbacks that render the final state immediately without pinning.

What animation timing works for editorial website reveals?

Use 160-220ms for control feedback and 500-760ms for section entrances, staggering direct children by 45-70ms with cubic-bezier(.22,.61,.36,1). Keep parallax below 5% and never hijack scroll.

Does scroll-driven animation work with reduced motion preferences?

Yes, when built with progressive enhancement. Under prefers-reduced-motion, render final states immediately: full paragraphs, resolved images, and all metrics visible without pinning, blur, or forced scroll holds.

When should I avoid pinned scroll sections on mobile?

Avoid pinning on touch and small screens where it creates scroll traps and dead zones. Replace pinned sequences with natural vertical flow, per-section reveals, and ordinary stacked layouts that remain fully readable.