스킬 scroll-experience
📦
scroll-experience
콘텐츠 리비전 r1 안전 ⚙️ 외부 명령어
스크롤 기반 웹 경험 구축
정적인 페이지는 복잡한 이야기나 제품 여정을 설명하는 데 한계가 있을 수 있습니다. 이 스킬은 Claude, Codex, Claude Code가 스크롤 애니메이션, 패럴랙스 섹션, 스티키 패널, 접근성 있는 내러티브 흐름을 설계하도록 돕습니다.
지원: Claude Codex Code(CC)
내 에이전트로 설치
이 요청을 에이전트에 복사하세요. 공식 Skill 페이지와 매니페스트가 포함되어 있습니다.
에이전트 요청
Review the Skillstore skill "scroll-experience" from https://skillstore.io/skills/sickn33-scroll-experience.md and its manifest at https://skillstore.io/api/skills/sickn33-scroll-experience/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.에이전트는 계속해서 계획을 표시하고 보안 정책에서 요구하는 확인을 요청해야 합니다.
에이전트가 읽기 쉬운 리소스
AI 에이전트, 크롤러, 스크립트가 전체 페이지 대신 정리된 컨텍스트만 필요할 때 이 링크를 사용하세요.
테스트해 보기
"scroll-experience" 사용 중입니다. 새 분석 대시보드 출시를 위한 스크롤 내러티브를 설계하세요.
예상 결과:
- 페이지는 고정된 대시보드 미리보기와 짧은 가치 설명으로 시작합니다.
- 사용자가 스크롤하면 배경이 천천히 움직이는 동안 지표 카드가 순서대로 나타납니다.
- 마지막 섹션은 고정을 해제하고 직접적인 체험 call to action을 제시합니다.
"scroll-experience" 사용 중입니다. React 마케팅 페이지에 사용할 스크롤 애니메이션 스택 선택을 도와주세요.
예상 결과:
- 가벼운 React 통합과 간단한 스크롤 transform에는 Framer Motion을 사용하세요.
- 복잡한 타임라인이나 고정된 스토리텔링 섹션에만 GSAP ScrollTrigger를 사용하세요.
- 브라우저 지원이 허용되는 간단한 reveal에는 네이티브 CSS view timelines를 사용하세요.
"scroll-experience" 사용 중입니다. 느리게 느껴지는 모바일 스크롤 경험을 리뷰하세요.
예상 결과:
- 작은 화면에서는 패럴랙스 깊이를 줄이고 애니메이션 없이도 콘텐츠를 읽을 수 있게 유지하세요.
- scroll hijacking을 피하고 자연스러운 터치 움직임을 보존하세요.
- 새 효과를 추가하기 전에 무거운 이미지, 고정 섹션, 애니메이션 개수를 확인하세요.
보안 감사
안전v4 • 2026. 7. 7. 버전별 보고서 열기
The 23 static external-command alerts are false positives caused by Markdown fences and inline backtick formatting in SKILL.md. The skill contains documentation and frontend animation examples, but no shell execution, process spawning, prompt injection, data exfiltration, or malicious intent was found.
1
스캔된 파일
264
분석된 줄 수
0
검토 항목
0
오탐 무시됨
위험 요인
⚙️ 외부 명령어 (23)
SKILL.md:35-48 SKILL.md:48-65 SKILL.md:65-68 SKILL.md:68-81 SKILL.md:81-84 SKILL.md:84-95 SKILL.md:95-96 SKILL.md:96-104 SKILL.md:104-117 SKILL.md:117-132 SKILL.md:132-135 SKILL.md:135-145 SKILL.md:145-152 SKILL.md:152-160 SKILL.md:160-164 SKILL.md:164-174 SKILL.md:174-177 SKILL.md:177-189 SKILL.md:189-192 SKILL.md:192-205 SKILL.md:205-212 SKILL.md:212-263 SKILL.md:263
가장 최근에 완료된 정적·의미론적 감사에서 확인된 보안 발견 사항이 감지되지 않았습니다. 이는 스킬에 부작용이 없음을 증명하지 않습니다.
감사자: codex 감사 이력 보기 →
이 보고서 공유 및 인용
버전이 지정된 평가 보고서, 중립 배지, 임베드 카드 및 인용을 공유하세요. Skillstore는 근거를 보고하지만 이 Skill의 안전 여부를 판단하지 않습니다.
보고서 링크 복사
https://skillstore.io/skills/sickn33-scroll-experience/audits/4?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdown 배지
[](https://skillstore.io/skills/sickn33-scroll-experience?utm_source=security_passport_badge)HTML 배지
<a href="https://skillstore.io/skills/sickn33-scroll-experience?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/sickn33-scroll-experience/security.svg" alt="Skillstore security assessment" loading="lazy"></a>임베드 카드
<iframe src="https://skillstore.io/embed/skills/sickn33-scroll-experience.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>학술 인용 (APA · BibTeX · CFF)
APA 인용
sickn33. (2026). scroll-experience security audit report (audit version 4) [Author version unspecified]. Skillstore. https://skillstore.io/skills/sickn33-scroll-experience/audits/4BibTeX 인용
@techreport{sickn33-sickn33-scroll-experience-2026,
author = {sickn33},
title = {scroll-experience security audit report (audit version 4)},
institution = {Skillstore},
year = {2026},
number = {4},
url = {https://skillstore.io/skills/sickn33-scroll-experience/audits/4},
note = {Author version unspecified}
}CITATION.cff
cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "scroll-experience security audit report (audit version 4)"
version: "unspecified"
type: report
authors:
- name: "sickn33"
date-released: "2026-07-07"
url: "https://skillstore.io/skills/sickn33-scroll-experience/audits/4"
identifiers:
- type: other
value: "skillstore:sickn33-scroll-experience:audit:4"
description: "Skillstore immutable audit report identifier"
Skillstore 점수
이 점수의 이유 증거 신뢰도: 높음 55
아키텍처
85
유지보수성
87
콘텐츠
68
커뮤니티
83
사양 준수
만들 수 있는 것
제품 기능 여정 계획
제품 이점을 훅, 맥락, 기능 reveal, 최종 call to action이 있는 스크롤 시퀀스로 전환합니다.
애니메이션 접근 방식 선택
프로젝트 제약 조건에 맞춰 GSAP, Framer Motion, Lenis, Locomotive Scroll, 네이티브 CSS를 비교합니다.
에디토리얼 내러티브 구조화
롱폼 인터랙티브 페이지를 위해 스토리 비트, 스티키 텍스트, 시각 레이어, reveal 타이밍을 매핑합니다.
이 프롬프트를 사용해 보세요
간단한 reveal 시퀀스 계획
이 스킬을 사용해 랜딩 페이지 섹션을 위한 간단한 스크롤 트리거 reveal 시퀀스를 설계하세요. 시각적 순서, 모션 강도, 접근성 주의사항을 포함하세요.
패럴랙스 스토리 비트 설계
이 스킬을 사용해 다섯 개의 스크롤 비트가 있는 패럴랙스 스토리텔링 페이지를 계획하세요. 레이어 역할, 스크롤 깊이 변화, 텍스트 reveal 순간, 모바일 단순화를 포함하세요.
스티키 제품 워크스루 구현
이 스킬을 사용해 고정 패널, 가로 이동, 진행 피드백, reduced motion 사용자를 위한 fallback 동작이 포함된 스티키 제품 워크스루를 정의하세요.
시네마틱 스크롤 시스템 감사
이 스킬을 사용해 기존 스크롤 기반 페이지를 끊김, scroll hijacking, 접근성 없는 콘텐츠, 모바일 breakpoint, 핵심 콘텐츠 가시성 관점에서 감사하세요.
모범 사례
- 네이티브 스크롤 동작을 유지하고 애니메이션 진행을 일반적인 스크롤 움직임에 연결하세요.
- 복잡한 고정 섹션을 추가하기 전에 모바일 및 reduced-motion fallback을 설계하세요.
- 핵심 스토리 순간에만 애니메이션을 적용해 콘텐츠를 명확하게 유지하고 성능을 안정적으로 유지하세요.
피하기
- 일반 스크롤을 강제 snap이나 커스텀 스크롤 제어로 대체하는 것.
- 명확한 스토리 목적 없이 모든 섹션에 모션을 추가하는 것.
- 모바일 또는 reduced-motion 설정에서 중요한 콘텐츠를 숨기는 효과를 만드는 것.
자주 묻는 질문
이 스킬은 무엇을 만드는 데 도움이 되나요?
패럴랙스, 스티키 섹션, reveal, 내러티브 페이싱이 포함된 스크롤 기반 페이지를 설계하는 데 도움을 줍니다.
프로덕션 준비가 된 코드를 생성하나요?
패턴과 예제를 제공하지만, 팀은 구현 코드를 조정하고 테스트해야 합니다.
어떤 애니메이션 라이브러리를 다루나요?
GSAP ScrollTrigger, Framer Motion, Locomotive Scroll, Lenis, 네이티브 CSS scroll timelines를 다룹니다.
모바일 경험에 유용한가요?
예. 모바일 우선 설계, 더 단순한 효과, 실제 기기 테스트, graceful degradation을 강조합니다.
접근성을 다루나요?
예. scroll hijacking, 숨겨진 콘텐츠, 사용성을 낮추는 모션 패턴에 대해 경고합니다.
누가 이 스킬을 사용해야 하나요?
디자이너, 프론트엔드 개발자, 콘텐츠 팀이 몰입형 스크롤 경험을 계획하는 데 사용할 수 있습니다.