Communitygithub.com

github/gsap-framer-scroll-animation

사용자가 스크롤 애니메이션, 패럴랙스, 스크롤 트리거 효과, 고정 섹션, 가로 스크롤, 텍스트 애니메이션 또는 스크롤 위치와 관련된 모든 모션을 vanilla JS, React 또는 Next.js에서 구현할 때 사용합니다.

gsap-framer-scroll-animation란 무엇인가요?

이 스킬은 GSAP ScrollTrigger와 Framer Motion / Motion v12를 활용하여 복잡한 스크롤 기반 애니메이션을 구축하는 전문 기술입니다. GSAP의 pinning, scrubbing, snapping, timeline, horizontal scroll, ScrollSmoother, matchMedia 등과 Framer Motion의 useScroll, useTransform, useSpring, whileInView, variants 같은 핵심 기능을 지원합니다. React, Next.js, vanilla JS를 포함한 다양한 환경에서 동작하며, 사용자가 '스크롤 시 애니메이션', '애플 스타일 스크롤', '패럴랙스 효과', '고정 섹션' 등 간단한 요청만 해도 적절한 코드를 생성합니다. 또한 premium-frontend-ui 스킬과 결합하여 창의적인 디자인 철학과 완성도를 높일 수 있습니다.

지원 대상~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/github/awesome-copilot/tree/main/skills/gsap-framer-scroll-animation
원본 보기→모든 스킬 둘러보기

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

문서

gsap-framer-scroll-animation은(는) 무엇을 하나요?

사용자가 vanilla JS, React 또는 Next.js에서 스크롤 애니메이션, 스크롤 효과, 패럴랙스, 스크롤 트리거된 나타나기 효과, 고정 섹션, 가로 스크롤, 텍스트 애니메이션 또는 스크롤 위치와 연결된 모든 모션을 구축하려 할 때 이 스킬을 사용합니다. GSAP ScrollTrigger(pinning, scrubbing, snapping, 타임라인, 가로 스크롤, ScrollSmoother, matchMedia) 및 Framer Motion / Motion v12(useScroll, useTransform, useSpring, whileInView, variants)를 다룹니다. 사용자가 단순히 "스크롤 시 애니메이션", "스크롤하면서 페이드 인", "애플처럼 스크롤", "패럴랙스 효과", "고정 섹션", "스크롤 진행률 표시줄", "입장 애니메이션"이라고 말해도 이 스킬을 사용합니다. 또한 GSAP 또는 Framer Motion 코드 생성을 위한 Copilot 프롬프트 패턴에도 트리거됩니다. 창의적인 철학과 디자인 레벨의 완성도를 위해 premium-frontend-ui 스킬과 함께 사용됩니다.

Individual skills in this repo

This repo contains 20 individual skills — each has its own dedicated page.

github/acquire-codebase-knowledge

Use this skill when the user explicitly asks to map, document, or onboard into an existing codebase. Trigger for prompts like "map this codebase", "document this architecture", "onboard me to this repo", or "create codebase docs". Do not trigger for routine feature implementation, bug fixes, or narrow code edits unless the user asks for repository-level discovery.

github/add-educational-comments

Add educational comments to the file specified, or prompt asking for file to comment if one is not provided.

github/agent-governance

Patterns and techniques for adding governance, safety, and trust controls to AI agent systems. Use this skill when: - Building AI agents that call external tools (APIs, databases, file systems) - Implementing policy-based access controls for agent tool usage - Adding semantic intent classification to detect dangerous prompts - Creating trust scoring systems for multi-agent workflows - Building audit trails for agent actions and decisions - Enforcing rate limits, content filters, or tool restrictions on agents - Working with any agent framework (PydanticAI, CrewAI, OpenAI Agents, LangChain, AutoGen)

github/agentic-eval

Patterns and techniques for evaluating and improving AI agent outputs. Use this skill when: - Implementing self-critique and reflection loops - Building evaluator-optimizer pipelines for quality-critical generation - Creating test-driven code refinement workflows - Designing rubric-based or LLM-as-judge evaluation systems - Adding iterative improvement to agent outputs (code, reports, analysis) - Measuring and improving agent response quality

github/agent-owasp-compliance

Check any AI agent codebase against the OWASP Agentic Security Initiative (ASI) Top 10 risks. Use this skill when: - Evaluating an agent system's security posture before production deployment - Running a compliance check against OWASP ASI 2026 standards - Mapping existing security controls to the 10 agentic risks - Generating a compliance report for security review or audit - Comparing agent framework security features against the standard - Any request like "is my agent OWASP compliant?", "check ASI compliance", or "agentic security audit"

github/ai-prompt-engineering-safety-review

Comprehensive AI prompt engineering safety review and improvement prompt. Analyzes prompts for safety, bias, security vulnerabilities, and effectiveness while providing detailed improvement recommendations with extensive frameworks, testing methodologies, and educational content.

github/appinsights-instrumentation

Instrument a webapp to send useful telemetry data to Azure App Insights

github/apple-appstore-reviewer

Serves as a reviewer of the codebase with instructions on looking for Apple App Store optimizations or rejection reasons.

github/architecture-blueprint-generator

Comprehensive project architecture blueprint generator that analyzes codebases to create detailed architectural documentation. Automatically detects technology stacks and architectural patterns, generates visual diagrams, documents implementation patterns, and provides extensible blueprints for maintaining architectural consistency and guiding new development.

github/arch-linux-triage

Triage and resolve Arch Linux issues with pacman, systemd, and rolling-release best practices.

github/arize-ai-provider-integration

Creates, reads, updates, and deletes Arize AI integrations that store LLM provider credentials used by evaluators and other Arize features. Supports any LLM provider (e.g. OpenAI, Anthropic, Azure OpenAI, AWS Bedrock, Vertex AI, Gemini, NVIDIA NIM). Use when the user mentions AI integration, LLM provider credentials, create integration, list integrations, update credentials, delete integration, or connecting an LLM provider to Arize.

github/arize-annotation

Creates and manages annotation configs (categorical, continuous, freeform label schemas) and annotation queues (human review workflows) on Arize. Applies human annotations to project spans via the Python SDK. Use when the user mentions annotation config, annotation queue, label schema, human feedback, bulk annotate spans, update_annotations, labeling queue, annotate record, or human review.

github/arize-dataset

Creates, manages, and queries Arize datasets and examples. Covers dataset CRUD, appending examples, exporting data, and file-based dataset creation using the ax CLI. Use when the user needs test data, evaluation examples, or mentions create dataset, list datasets, export dataset, append examples, dataset version, golden dataset, or test set.

github/arize-evaluator

Handles LLM-as-judge evaluation workflows on Arize including creating/updating evaluators, running evaluations on spans or experiments, managing tasks, trigger-run operations, column mapping, and continuous monitoring. Use when the user mentions create evaluator, LLM judge, hallucination, faithfulness, correctness, relevance, run eval, score spans, score experiment, trigger-run, column mapping, continuous monitoring, or improve evaluator prompt.

github/arize-experiment

Creates, runs, and analyzes Arize experiments for evaluating and comparing model performance. Covers experiment CRUD, exporting runs, comparing results, and evaluation workflows using the ax CLI. Use when the user mentions create experiment, run experiment, compare models, model performance, evaluate AI, experiment results, benchmark, A/B test models, or measure accuracy.

github/arize-instrumentation

Adds Arize AX tracing to an LLM application for the first time. Follows a two-phase agent-assisted flow to analyze the codebase then implement instrumentation after user confirmation. Use when the user wants to instrument their app, add tracing from scratch, set up LLM observability, integrate OpenTelemetry or openinference, or get started with Arize tracing.

github/arize-link

Generates deep links to the Arize UI for traces, spans, sessions, datasets, labeling queues, evaluators, and annotation configs. Produces clickable URLs for sharing Arize resources with team members. Use when the user wants to link to or open a trace, span, session, dataset, evaluator, or annotation config in the Arize UI.

github/arize-prompt-optimization

Optimizes, improves, and debugs LLM prompts using production trace data, evaluations, and annotations. Extracts prompts from spans, gathers performance signal, and runs a data-driven optimization loop using the ax CLI. Use when the user mentions optimize prompt, improve prompt, make AI respond better, improve output quality, prompt engineering, prompt tuning, or system prompt improvement.

github/arize-trace

Downloads, exports, and inspects existing Arize traces and spans to understand what an LLM app is doing or debug runtime issues. Covers exporting traces by ID, spans by ID, sessions by ID, and root-cause investigation using the ax CLI. Use when the user wants to look at existing trace data, see what their LLM app is doing, export traces, download spans, investigate errors, or analyze behavior regressions.

github/aspire

Aspire skill covering the Aspire CLI, AppHost orchestration, service discovery, integrations, MCP server, VS Code extension, Dev Containers, GitHub Codespaces, templates, dashboard, and deployment. Use when the user asks to create, run, debug, configure, deploy, or troubleshoot an Aspire distributed application.

관련 스킬

steipete/video-frames

Extract frames or short clips from videos using ffmpeg.

community

steipete/summarize

Summarize or transcribe URLs, YouTube/videos, podcasts, articles, transcripts, PDFs, and local files.

community

openclaw/openclaw

Use when testing, fixing, or extending the OpenClaw Control UI GUI with Vitest + Playwright end-to-end checks, mocked Gateway WebSocket flows, mocked dashboard runs, screenshots/videos, or agent-verifiable browser proof.

community

obra/superpowers

Obra superpowers agent skills.

community

affaan-m/ECC

See, Understand, Act on video and audio. See- ingest from local files, URLs, RTSP/live feeds, or live record desktop; return realtime context and playable stream links. Understand- extract frames, build visual/semantic/temporal indexes, and search moments with timestamps and auto-clips. Act- transcode and normalize (codec, fps, resolution, aspect ratio), perform timeline edits (subtitles, text/image overlays, branding, audio overlays, dubbing, translation), generate media assets (image, audio...

community

affaan-m/everything-claude-code

End-to-end marketing campaign planning and execution. Covers audience research, positioning, campaign angle definition, landing page copy, email sequences, social posts, ad copy, short-form video scripts, and content calendars. Use as the orchestration layer for multi-channel product launches. Use when planning or executing a multi-channel product launch, or producing landing page, email, social, or ad copy.

community