Collapse Agent Skills callouts by default and add product-disambiguation fallback#357
Merged
Conversation
added 18 commits
May 21, 2026 14:00
Without this, framework-level pages like /sdks/ios/add-sdk are parsed as if 'add-sdk' were a product, so the swizzle renders the product variant (which then no-ops because skills.json has no entry for it) instead of falling through to the fallback disclosure.
- Both product and shared variants now render as a collapsed <details>
with the existing blue callout chrome. Both consolidate behind a small
internal CalloutDetails wrapper so the toggle handling and tracking
stay in one place.
- The `fallback` variant is removed; non-product/non-denylist doc pages
now render the shared variant directly.
- A `details.callout` rule with !important overrides Docusaurus's
`[class^=docMainContainer_] details { background-color: transparent }`
selector, which was wiping the blue background on doc pages.
- Homepage shared callout moves above the slogan and product cards so
it's the first thing on the page.
- Extract `capturePostHogEvent` into its own module and fire
`skills_callout_expanded` on every open of the disclosure, with
variant / pathname / product / framework as properties. PostHog can
compute the expand→copy funnel against the existing
`skills_command_copied` event.
…hover - Move the disclosure chevron to the right and pair it with a small uppercase "Show"/"Hide" hint that swaps via CSS based on the [open] state. Makes the affordance unambiguous without leaning on body copy. - Whole collapsed callout now reads as a single interactive surface: hover-tinted background, focus-visible outline on the summary. Hover styles deliberately drop once expanded — the user is reading, not clicking. - Keep padding-top constant across collapsed/open (1.3rem) so the title stays in the exact same vertical position when expanding. Only padding-bottom flexes for optical centering of the single summary line when collapsed. - Drop the .banner padding override so the homepage callout matches the docs callout height when collapsed. .banner keeps margin: 0 only. - Remove the 4px blue side-stripe in favor of a uniform 1px border on all sides. Side-stripe accents on callouts read as a SaaS-template tic; the background + soft border carry the same Scandit-blue signal without that connotation.
When the callout is collapsed and the visitor hovers it, a soft blue radial gradient follows the cursor across the surface, and the right-aligned Show + chevron hint slides 4px toward the edge with an ease-out-quart curve. Both effects fall away once the disclosure is open so the chrome doesn't compete with the content the user is now reading. Replaces the previous solid hover-tint. The cursor position is written to --callout-mx / --callout-my via a React onMouseMove handler; the gradient lives on a ::before overlay that's clipped by overflow:hidden on the callout so the spotlight respects the rounded corners. Summary and body get z-index:1 to sit above the overlay; the overlay itself is pointer-events:none. Dark-mode variant uses a higher alpha on the gradient so the spotlight remains legible against the darker base background.
Polish: - Scale the install-command monospace from 1rem to 0.9375rem so it reads at the same optical size as the surrounding proportional text. - Bump .description and .tabHint line-height from 1.5 to 1.65 so the description's wrapped lines have room to breathe — particularly important when inline <code> chips inflate the line metrics. Animation: - Use ::details-content + interpolate-size: allow-keywords + longhand transition (height, opacity, content-visibility) + transition-behavior: allow-discrete for a smooth slide-and-fade on open/close. Chrome 131+ / Edge 131+ get the animation; Firefox and older Safari gracefully snap as today. Respects prefers-reduced-motion. - The longhand transition is required because the build's CSS minifier strips `allow-discrete` from the transition shorthand. Magnetic chevron: - Drop the :not([open]) gate. The right-side hint now glides on hover in both states so the click affordance for "close" stays signaled once the disclosure is open. Spotlight stays collapsed-only so it doesn't compete with body content.
When the callout is open, body-content hover was triggering the hint translate at the top of the box where the user wasn't looking. Scope to .calloutSummary:hover (and :focus-visible for keyboard) so the animation fires precisely when the user is aiming at the click target — both collapsed and open.
Drop the :not([open]) guard on both the React mouse-move handler and the CSS hover rule so the soft blue gradient follows the cursor across the surface regardless of whether the disclosure is collapsed or open. The 0.22 alpha keeps it subtle enough not to compete with the install tabs underneath.
- Spotlight alpha: 0.22 → 0.12 (light) and 0.32 → 0.18 (dark). Still visible enough to read as cursor-tracking, no longer competes with the install tabs content underneath. - Magnetic chevron translate now only fires when collapsed. Once open, the right-side hint stays put — the user isn't aiming to expand it again, and the spotlight already signals interactivity. - Side note: keyboard focus outline on the summary now fires in both states (was incorrectly scoped to :not([open])). Keyboard users need the focus indicator regardless of disclosure state.
lucatorella
approved these changes
May 21, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
SkillsCalloutdoesn't fire (top-level concept pages, framework landings, etc.), so visitors who haven't picked a product still get a path into thedata-capture-sdkagent skill. A small URL denylist excludes release notes, migration guides, and the agent-skills page itself.<details>with the existing blue chrome. Right-alignedShow ›/Hide ‹micro-label, button-like hover with a cursor-follow spotlight, and a smooth slide-and-fade open/close animation in browsers that support::details-content+interpolate-size(Chrome/Edge 131+; Firefox/Safari snap as today).skills_callout_expandedon every open with{ variant, pathname, product?, framework? }. Dashboard 693119 has four new tiles wired to it: total expansions, expansions by variant, expansions by page (top 25), and an expand → copy funnel against the existingskills_command_copiedevent.border-leftaccent on the callout in favor of a uniform 1px border. Drops the homepage banner's larger padding so the callout height matches docs.