gsap-sequencing
π―Skillfrom bbeierle12/skill-mcp-claude
Sequences and coordinates complex GSAP (GreenSock Animation Platform) animations with precise timing and choreographed visual transitions.
Installation
npx skills add https://github.com/bbeierle12/skill-mcp-claude --skill gsap-sequencingSkill Details
Overview
# Skills Manager
A visual web interface for managing Claude MCP Skills with Claude Code CLI integration.
Project Overview
This project provides a browser-based UI for managing skills in an MCP (Model Context Protocol) server. Skills are markdown-based instruction sets that Claude can load on-demand to gain specialized knowledge.
Architecture
```
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
β Skills Manager β
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ€
β β
β ββββββββββββββββββββ ββββββββββββββββββββββββββββ β
β β Claude Desktop β β Browser UI β β
β β (MCP Client) β β skills-manager.html β β
β ββββββββββ¬ββββββββββ ββββββββββββββ¬ββββββββββββββ β
β β β β
β β stdio/MCP β HTTP REST β
β β β β
β ββββββββββΌββββββββββ ββββββββββββββΌββββββββββββββ β
β β server.py β β skills_manager_api.py β β
β β (MCP Server) β β (Flask API :5050) β β
β ββββββββββ¬ββββββββββ ββββββββββββββ¬ββββββββββββββ β
β β β β
β ββββββββββββββ¬ββββββββββββββββββββ β
β β β
β βΌ β
β ββββββββββββββββ β
β β skills/ β β
β β (folder) β β
β ββββββββββββββββ β
β β
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
```
File Structure
```
skills-mcp/
βββ server.py # MCP server (FastMCP) - connects to Claude Desktop
βββ skills_manager_api.py # Flask HTTP API server (port 5050)
βββ skills_manager_app.py # Standalone all-in-one app (for .exe build)
βββ skills-manager.html # Web UI (single-file, Tailwind + Lucide)
βββ requirements.txt # Python dependencies
βββ build.bat # Windows build script for .exe
βββ skills/ # Skills directory
β βββ my-skill/
β β βββ SKILL.md # Main skill content
β β βββ _meta.json # Metadata (tags, description)
β β βββ scripts/ # Optional helper scripts
β β βββ references/ # Optional reference docs
β βββ another-skill/
β βββ ...
βββ dist/ # Built executable + assets
β βββ SkillsManager.exe
β βββ skills-manager.html
β βββ README.md
βββ .vscode/ # VS Code configuration
βββ settings.json
βββ launch.json
```
Setup
Prerequisites
- Python 3.10+
- Node.js (optional, for Claude Code CLI)
- Claude Code CLI (optional, for AI features)
Installation
```bash
cd skills-mcp
pip install -r requirements.txt
```
Running the API Server
```bash
python skills_manager_api.py
```
Opens at: http://localhost:5050
Running the MCP Server (for Claude Desktop)
The MCP server runs automatically when Claude Desktop starts (configured in claude_desktop_config.json).
Manual test:
```bash
python server.py
```
Development
Key Files to Edit
| File | Purpose |
|------|---------|
| skills-manager.html | Frontend UI (vanilla JS, Tailwind CSS, Lucide icons) |
| skills_manager_api.py | Backend REST API (Flask) |
| server.py | MCP server for Claude Desktop integration |
| skills_manager_app.py | Standalone app (combines API + launcher for .exe) |
API Endpoints
| Method | Endpoint | Description |
|--------|----------
More from this repository10
Enables dynamic, high-performance React animations using GreenSock Animation Platform (GSAP) with pre-configured animation techniques and interaction patterns.
Generates signed distance field (SDF) shader code and provides interactive visualization for creating complex 3D geometric shapes using mathematical distance functions.
shader-noise skill from bbeierle12/skill-mcp-claude
Generates and applies dynamic visual shader transformations to images or graphics, enabling real-time visual effects and rendering modifications.
Teaches Claude the fundamental concepts, techniques, and principles of computer graphics shader programming across different rendering paradigms and graphics APIs.
Enables advanced scroll-based animations and interactions using GSAP ScrollTrigger, allowing precise control of element animations triggered by scrolling.
Manages and provides Claude with specialized AWS cloud infrastructure knowledge, enabling context-aware interactions about Amazon Web Services resources, configurations, and best practices.
Generates interactive data visualizations using D3.js, allowing Claude to create dynamic charts, graphs, and visual data representations from input datasets.
Applies post-processing visual effects filters and transformations to images or graphics, enabling dynamic enhancement and stylization of visual content.
Routes and manages navigation between React Three Fiber (R3F) scenes or components using a declarative, component-based routing approach.