CCM
/Skills
SkillsMCPMarketplacesDigestToolsAdvertise

This week in Claude

Every Monday: Claude Code, Agent SDK, MCP, and the Anthropic platform moves worth your time.

Skills by Category
Frontend DevelopmentBackend & APIsTesting & QASecurityDevOps & CI/CDGit & Pull RequestsDocumentationCode Review & QualityAI & Agent BuildingSkill Development
MCP Servers by Category
Sales & MarketingWeb & Browser AutomationDatabasesAI & LLM ToolsCloud & InfrastructureCommunication & MessagingDeveloper ToolsDesign & CreativeDocuments & KnowledgeSearch & Web Crawling
Marketplaces by Category
AI Agents & OrchestrationLLM IntegrationDevelopment ToolsFrontend & UIBackend & APIsDatabasesTesting & Code QualityDevOps & CloudSecurity & ComplianceGit & Version Control

Claude Code Marketplaces

Discover Claude Code plugins, extensions, and tools. Automatically updated directory of Anthropic Claude AI marketplaces with development tools, productivity plugins, and integrations.

Resources

  • Browse Skills
  • Browse MCP Servers
  • Browse Marketplaces
  • Skill index
  • MCP index
  • Marketplace index
  • Plugins Reference

Community

  • About
  • Tools
  • Feedback
  • Privacy Policy
  • Advertise

Built for the Claude Code community with Claude Code by mertbuilds.com

Independent project, not affiliated with Anthropic
freshtechbro avatar

Barba Js

freshtechbro/claudedesignskills
1.6k installs682 stars
Summary

If you need smooth page transitions without converting your multi-page site to a full SPA, this is the standard tool. It intercepts navigation, fetches content via AJAX, and handles the swap with lifecycle hooks for animations. Works well with GSAP for fade, slide, or crossfade effects. The sync mode lets you overlap animations, and the namespace system gives you per-page control. At 7kb it's lightweight, though you'll need to structure your HTML with the wrapper/container pattern and think through which elements stay persistent versus which ones transition. Good for portfolios, marketing sites, or anything where navigation feel matters.

Install to Claude Code

npx -y skills add freshtechbro/claudedesignskills --skill barba-js --agent claude-code

Installs into .claude/skills of the current project.

CodeRabbit
CodeRabbit
AI writes the code. CodeRabbit catches the slop.
Try For Free →
inference shell
inference shell
create and run specialised agents in minutes
build now →
MCP-ready Email SendingMCP-ready Email Sending
MCP-ready Email Sending
Plug Mailtrap into your AI workflow and let it handle the email.
Connect Mailtrap MCP →
Make your agent a DeFi expert
Make your agent a DeFi expert
Agent, run crypto. Access onchain data & trade routes via 1inch.
Install now →
Capacitor - Shared memory for your team’s coding agents.
Capacitor - Shared memory for your team’s coding agents.
Make coding agent sessions - Searchable, Shareable, Vendor-neutral & Scored.
Try For Free →
CodeScene MCP ServerCodeScene MCP Server
CodeScene MCP Server
Your agent targets a perfect 10 Code Health score. Deterministic. Every commit.
Try For Free →
Give your AI the whole web as clean markdownGive your AI the whole web as clean markdown
Give your AI the whole web as clean markdown
Integrate web data into your AI product. One API to scrape website & brand data.
Get API Key Now →
belt - the only tool your agent needs
belt - the only tool your agent needs
belt cli automatically finds the best tools and skills for your agent. image, video, music, tts...
one prompt install →
CodeRabbit
CodeRabbit
AI writes the code. CodeRabbit catches the slop.
Try For Free →
inference shell
inference shell
create and run specialised agents in minutes
build now →
MCP-ready Email SendingMCP-ready Email Sending
MCP-ready Email Sending
Plug Mailtrap into your AI workflow and let it handle the email.
Connect Mailtrap MCP →
Make your agent a DeFi expert
Make your agent a DeFi expert
Agent, run crypto. Access onchain data & trade routes via 1inch.
Install now →
Capacitor - Shared memory for your team’s coding agents.
Capacitor - Shared memory for your team’s coding agents.
Make coding agent sessions - Searchable, Shareable, Vendor-neutral & Scored.
Try For Free →
CodeScene MCP ServerCodeScene MCP Server
CodeScene MCP Server
Your agent targets a perfect 10 Code Health score. Deterministic. Every commit.
Try For Free →
Give your AI the whole web as clean markdownGive your AI the whole web as clean markdown
Give your AI the whole web as clean markdown
Integrate web data into your AI product. One API to scrape website & brand data.
Get API Key Now →
belt - the only tool your agent needs
belt - the only tool your agent needs
belt cli automatically finds the best tools and skills for your agent. image, video, music, tts...
one prompt install →
Files
SKILL.md

Select a file.

Featured
CodeRabbit
CodeRabbit
AI writes the code. CodeRabbit catches the slop.
Try For Free →
inference shell
inference shell
create and run specialised agents in minutes
build now →
MCP-ready Email SendingMCP-ready Email Sending
MCP-ready Email Sending
Plug Mailtrap into your AI workflow and let it handle the email.
Connect Mailtrap MCP →
Make your agent a DeFi expert
Make your agent a DeFi expert
Agent, run crypto. Access onchain data & trade routes via 1inch.
Install now →
Capacitor - Shared memory for your team’s coding agents.
Capacitor - Shared memory for your team’s coding agents.
Make coding agent sessions - Searchable, Shareable, Vendor-neutral & Scored.
Try For Free →
CodeScene MCP ServerCodeScene MCP Server
CodeScene MCP Server
Your agent targets a perfect 10 Code Health score. Deterministic. Every commit.
Try For Free →
Give your AI the whole web as clean markdownGive your AI the whole web as clean markdown
Give your AI the whole web as clean markdown
Integrate web data into your AI product. One API to scrape website & brand data.
Get API Key Now →
belt - the only tool your agent needs
belt - the only tool your agent needs
belt cli automatically finds the best tools and skills for your agent. image, video, music, tts...
one prompt install →
Categories
Frontend Development
First SeenJun 3, 2026
View on GitHub

More from freshtechbro/claudedesignskills

All 23 skills →
  • Aframe Webxr1.6k
  • Playcanvas Engine1.6k
  • Skill Creator1.5k
  • Motion Framer3.3k
  • Threejs Webgl2.9k
  • React Three Fiber2.3k
  • Blender Web Pipeline2.1k
  • Web3d Integration Patterns2.1k
  • Modern Web Design2.1k
  • Lottie Animations2k
  • Animated Component Libraries2k
  • Spline Interactive1.9k
  • Animejs1.9k
  • Gsap Scrolltrigger1.9k
  • Pixijs 2d1.8k
  • Lightweight 3d Effects1.8k
  • Rive Interactive1.8k
  • Locomotive Scroll1.7k
  • Babylonjs Engine1.7k
  • React Spring Physics1.7k
  • Scroll Reveal Libraries1.7k
  • Substance 3d Texturing1.6k

Recommended

More Frontend Development →
isjiamu avatar
gzh-design

isjiamu/gzh-design-skill

微信公众号文章排版引擎,将 Markdown 转换为可直接粘贴到公众号编辑器的 HTML。主题风格从 references/theme-index.md 注册的自定义主题库中选取,自动章节编号、关键词下划线标记、引言卡片、目录导航、代码块、图片/GIF、作者签名。支持 Markdown / Word(.docx) / PDF / 纯文本输入(非 Markdown 先自动归一化),也支持"一键自动排版"(自动推断结构+选主题),还支持根据用户描述/参考图生成自定义主题组件库并保存本地复用。触发场景:(1) 用户提到"公众号排版""公众号文章""微信排版""gzh",(2) 用户想把文章(md/docx/pdf/纯文本)转成公众号 HTML,(3) 用户说"自动排版""一键排版"公众号内容,(4) 用户想为公众号排版"生成新主题/自定义风格/按这张图做一套组件库"。不用于生成普通网页/落地页/PPT(用前端或 PPT 类 skill)。
1.6k
2.9k
forcedotcom avatar
building-mobile-apps

forcedotcom/sf-skills

The entry point for building any Salesforce native mobile app on iOS or Android. TRIGGER when the user says: "build a Salesforce iOS app", "add Salesforce login to my Android app", "set up Mobile SDK", "add MobileSync / SmartStore offline storage", "embed an Agentforce agent in my mobile app", "add Agentforce chat to iOS/Android", or otherwise asks to create, extend, or integrate a Salesforce mobile experience in Swift or Kotlin (MSDK, Agentforce SDK, or both). SKIP when the user is building a non-Salesforce mobile app, using React Native / Flutter / Ionic without Salesforce integration, asking about generic mobile UI design, or working on a Salesforce-adjacent web/desktop surface (LWC, Experience Cloud, Mobile Publisher branding-only).
1.6k
803
dynatrace avatar
dt-obs-frontends

dynatrace/dynatrace-for-ai

Real User Monitoring (RUM) on Dynatrace — web and mobile frontends. Core Web Vitals, user sessions, page performance, mobile crashes, frontend errors, and frontend-backend linking. Query via `user.events`, `user.sessions`, and `dt.frontend.*` metrics. Does NOT cover synthetic monitoring (HTTP/browser/network checks) — that's a separate domain.
1.6k
120
freshtechbro avatar
playcanvas-engine

freshtechbro/claudedesignskills

Lightweight WebGL/WebGPU game engine with entity-component architecture and visual editor integration. Use this skill when building browser-based games, interactive 3D applications, or performance-critical web experiences. Triggers on tasks involving PlayCanvas, entity-component systems, game engine development, WebGL games, 3D browser applications, editor-first workflows, or real-time 3D rendering. Alternative to Three.js with game-specific features and integrated development environment.
1.6k
682
jiji262 avatar
claude-design

jiji262/claude-design-skill

Produce thoughtful, high-fidelity design artifacts in HTML — landing pages, slide decks, interactive prototypes, animated videos, posters, wireframes, and visual explorations. Use whenever the user asks to design, mock up, prototype, visualize, storyboard, or explore UI options — including phrases like "make a deck", "design a landing page", "prototype this flow", "animate this concept", "build a pitch deck", "create a poster", "visualize this idea", or "design something for a brand". Enforces fact verification (WebSearch before assuming a product exists or its version), the Core Asset Protocol for branded work (logo, product shots, and UI screenshots are first-class, not just colors and fonts), a Design Direction Advisor fallback that offers 3 differentiated directions from 10 design philosophies when the brief is too vague, commits to a visual system up front, presents multiple variations, and avoids AI-design tropes (aggressive gradients, emoji bullets, generic templates).
1.6k
175
getsentry avatar
sentry-tanstack-start-sdk

getsentry/sentry-for-ai

Full Sentry SDK setup for TanStack Start React. Use when asked to "add Sentry to TanStack Start", "install @sentry/tanstackstart-react", or configure error monitoring, tracing, session replay, logs, or user feedback in a TanStack Start React app.
1.6k
246