skills.rest
gooseworks-ai
gooseworks-aiOFFICIAL
Explore all skills by this author →
WebsiteGitHub

toggle-pill-slide

Render and animate UI segmented controls with sliding pill highlights.

6|1|Updated May 29, 2026
Search Tags:#motion graphics#ui component#interactive ui#ui animation#segmented control
One-click install
npx skills add https://github.com/gooseworks-ai/gooseworks-ads-skills --skill toggle-pill-slide
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: toggle-pill-slide
Source: https://github.com/gooseworks-ai/gooseworks-ads-skills/tree/main/skills/atoms/motion-graphics/effects/toggle-pill-slide
Command: npx skills add https://github.com/gooseworks-ai/gooseworks-ads-skills --skill toggle-pill-slide

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and assets (resource) components.

What problem does it solve?

The Skill simplifies the creation of interactive UI segmented controls with a sliding pill animation, enhancing user experience in pricing scenes and option choosers.

Core Features & Use Cases

  • Dynamic Segmented Control: Render horizontal segmented controls where the active option's pill slides between options.
  • Customization: Adjust colors, sizes, text styles, and animation properties to fit your design requirements.
  • Use Case: Integrate into pricing cards or UI panels where a 2-3 option toggle is necessary, for instance, Annual vs. Monthly subscription options.

Quick Start

Generate a toggle pill slide with annual and monthly options for your UI.

Frequently Asked Questions about toggle-pill-slide

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

FAQPage Schema
How do I create a sliding pill animation for a segmented control?▼

A sliding pill animation for a segmented control is created using CSS and JavaScript to handle event handling and animate the active option's highlight as it slides between choices.

How do I add a monthly vs. annual subscription toggle to a pricing card?▼

Add a monthly vs. annual subscription toggle by rendering a segmented control with a sliding pill animation, suited specifically for integrating into product pricing scenes and choice interfaces.

Can I customize the sliding pill highlight colors and sizes for my UI?▼

Yes, you can customize the sliding pill highlight by adjusting colors, sizes, text styles, and animation properties to fit your specific UI design requirements.

Do I need JavaScript to animate UI segmented controls?▼

Yes, you need JavaScript alongside CSS to handle event handling and animate the sliding pill highlights within web applications when rendering interactive UI segmented controls.

What is the best way to handle 2-3 option toggles in a web application?▼

The best way to handle 2-3 option toggles is using a dynamic UI segmented control where the active option's pill slides smoothly between choices for an enhanced user experience.

Related Skills

Explore More Design & Creative Skills→
ferryhinardiferryhinardi
2

ui-components-creation

Build reusable React 19 UI components with TypeScript and Panda CSS.

Community
Intermediate
BasedHardwareBasedHardware
4

lottie

Add and manage Lottie animations in React using LottieFiles.

Official
Intermediate
rahul-s-bhattrahul-s-bhatt

using-streamlit-layouts

Organize Streamlit application layouts using sidebars, columns, containers, tabs, and dialogs.

Community
Intermediate
marchattonmarchatton
5

fixing-motion-performance

Audit and refactor UI animation performance across CSS, WAAPI, Motion, rAF, and GSAP.

Community
Intermediate