More screenshots

    Works with the AI Agents you already use

    Claude CodeClaude CodeCursorCursorCodex CLICodex CLIMuseMuseDotsDots+22 more

    smooth option switcher

    1

    Pure CSS option selectors with smooth sliding indicators and coordinated nested sub-menu transitions.

    $1

    Secure checkout via Stripe

    Money-back guarantee

    Converts to your local currency at checkout

    Security scanned
    smooth option switcher

    smooth option switcher

    Example session with this skill installed

    I need a smooth CSS-only pricing toggle for my SaaS landing page. It should switch between 'Starter' and 'Pro', and selecting 'Pro' should expand to show 'Monthly' and 'Yearly' billing options.

    • Read your context and instructions
    • Compiled the smooth option switcher
    • Generated the design tokens stylesheet

    I have implemented the smooth option switcher using native radio states and CSS transitions. The 'Pro' selection triggers a coordinated expansion using the specified cubic-bezier easing to reveal the billing sub-menu while maintaining the sliding indicator logic.

    CSS Nested Pricing Selector

    /* Core Interaction Logic */
.switcher-input:checked + .switcher-label {
  color: var(--text-active);
}

/* Primary Indicator Translation */
#starter:checked ~ .track .indicator {
  transform: translateX(0);
}

#pro:checked ~ .track .indicator {
  transform: translateX(100%);
}

/* Nested Menu Expansion */
.sub-menu {
  position: absolute;
  top: 66%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.6);
  opacity: 0;
  transition: all 0.5s cubic-bezier(0.34, 0.96, 0.6, 0.99);
}

#pro:checked ~ .track .sub-menu {
  top: 0;
  left: 0;
  transform: translate(0, 0) scale(1);
  opacity: 1;
}

/* Secondary Indicator Logic */
.sub-indicator {
  position: absolute;
  width: 48%;
  height: 80%;
  transition: left 0.5s ease;
}

#monthly:checked ~ .track .sub-indicator {
  left: 2%;
}

#yearly:checked ~ .track .sub-indicator {
  left: 50%;
}

    Next steps

    • Map the --text-active and color variables to your local design tokens in theme.css.
    • Replace the placeholder IDs with unique scoped identifiers if using multiple instances on one page.
    • Review references/accessible.html to ensure the radio labels meet your project's WCAG requirements.

    theme.css

    CSS · design tokens

    Generated

    Example file from a real run - the skill writes it into your workspace.

    Connects securely to your tools. The creator never sees your data.

    About this skill

    Standard UI toggles often lack the visual polish and spatial context users expect from premium interfaces. This skill implements high-performance, purely CSS-driven option selectors with moving indicators and coordinated nested transitions.

    What it does

    • Nested State Logic handles complex primary-to-secondary transitions, such as selecting a "Premium" plan that smoothly expands into "Monthly/Annual" billing options.
    • Zero-JS Interactions uses native HTML radio inputs and CSS sibling selectors to manage state, ensuring instant response times and no main-thread overhead.
    • Coordinated Motion applies specific cubic-bezier curves and synchronized transitions for translation, scaling, and opacity.
    • Persistent Memory ensures secondary selections (like billing cycles) are retained even when the user toggles back to a primary state.
    • Visual Continuity implements a traveling indicator that slides between segments rather than simple color flips or layout jumps.

    How it works

    1. Analyze Project System by inspecting existing typography, spacing tokens, and motion conventions to ensure the component fits your design language.
    2. Structure Markup using the specific four-radio pattern that allows for chained :checked logic across primary and secondary groups.
    3. Apply Stylings based on the provided reference CSS, including absolute positioning for the track indicators and relative scaling for nested menus.
    4. Verify Behavior by testing rapid reversals, pointer hit targets, and keyboard focus states according to the production guidelines.

    Frameworks & tools

    This tool relies on native HTML5 and CSS3 (specifically nested CSS and advanced selectors). It is framework-agnostic and works with React, Next.js, Vue, or plain HTML/CSS environments.

    Why this beats prompting it yourself

    Generic AI prompts often produce buggy JavaScript-heavy toggles or layout shifts during expansion. This skill provides a tested, mathematically precise CSS implementation of a specific high-end interaction pattern that handles z-index stacking and nested expansion without layout thrashing.

    Use cases

    • Pricing Tables where selecting a tier expands to show billing frequency.
    • View Switchers that require a sliding physical indicator between modes.
    • Configuration Panels where a specific setting reveals sub-parameters.

    Known limitations

    The canonical interaction uses hidden inputs that require the included production-ready adaptation for full keyboard accessibility and reduced motion support.

    How to use

    Skills on Agensi run inside your AI agent. Copy the prompt, paste it into your agent, and it connects to Agensi and installs this skill for you. If a payment is needed, your agent shows it to you first.

    Reviews

    No reviews yet

    Be one of the first to try it. Every listed skill passes our trust checks below.

    Security scanned

    Passed our 8-point scan before listing

    Fresh listing

    Recently published to Agensi

    Money-back guarantee

    Doesn't do what its page promises? You get your money back.

    Trust & safety

    Security scanned

    Verified clean 3 days ago

    • Passed all security checks, Safe to install

    Requires

    None required
    Optional (verify script only): Node.js 18+
    Optional (verify script only): Playwright + Chromium

    Listed3 days ago

    What's inside

    Frequently Asked Questions