Add skills install callouts and rework product navigation#349
Merged
Conversation
moritzhartmeier
requested changes
May 18, 2026
raffaelefarinaro
changed the title
Introduce an inline callout that points integrators at the official AI
agent skills published in scandit/scandit-sdk-skills, so coding agents
(Claude Code, Codex, Cursor, etc.) can speed up product integration
following Scandit's recommended patterns.
- New SkillsCallout component with two variants:
- product: auto-detects product+framework from /sdks/<fw>/<product>/
URL on intro / get-started pages and renders the matching
`npx skills add ... --skill <product-fw> --skill data-capture-sdk`
command. Injected via a wrap-swizzle of @theme/DocItem/Content.
- shared: rendered on the homepage as a disambiguation prompt for
visitors who haven't picked a product yet, installing only the
`data-capture-sdk` skill.
- Self-contained CommandBlock (no @theme/CodeBlock dependency) so the
callout works on the custom homepage which doesn't wrap children in
ColorModeProvider.
- New src/data/skills.json drives product/framework -> skill-slug
mapping; extending it as new skills publish requires no code change.
- Extract FRAMEWORK_MAPPING to src/components/utils/frameworks.ts
and reuse it from FeatureList.
- Register SkillsCallout globally in src/theme/MDXComponents.js so
authors can also place it manually inside MDX.
- Remove the unused FrameworkExplore section from the homepage.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
- Replace the single command block with a tabbed install picker: Any AI coding assistant (npx skills add ...), Claude Code (paste-in /plugin marketplace + install commands), and Cursor (one-click Install in Cursor button to https://cursor.com/marketplace/scandit). - Pass the resolved skill slug into the tabs so Claude Code and Cursor hints explain how to invoke the specific skill explicitly (/<slug> for Claude Code, mention <slug> for Cursor) while noting the marketplace install bundles every Scandit skill and is auto-picked. - Simplify the homepage shared-variant description. - Add URL-slug -> product-key mapping for `matrixscan` -> `matrixscan-batch` so the auto-detect picks up MatrixScan Batch pages served at /sdks/<fw>/matrixscan/. - Extend src/data/skills.json with all skills currently published in scandit/scandit-sdk-skills: barcode-capture, smart-label-capture, matrixscan-ar, matrixscan-batch, matrixscan-count for Cordova / Capacitor / Flutter / React Native, plus label-capture-web. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
- Move shared callout below the product cards on the homepage so it acts as a fallback after users have seen the product list. - Show per-product callout on every framework/product doc page (not just intro/get-started) where a matching skill exists. - Simplify tab copy and unify wording across Any AI, Claude Code, and Cursor; rename "coding assistant" to "coding agent". - Drop the shared skill from per-product npx command and remove the trailing data-capture-sdk explainer paragraph. - Remove the GitHub footer link entirely. - Soften CommandBlock styling in light mode (white surface with lavender border) to match the rest of the docs' code blocks; keep dark surface in dark mode. - Allow inline code in admonitions to wrap with overflow-wrap: anywhere. - Inline the Label Definition card content into the prose and link "define the labels" to the label-definitions page. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Adds a searchable "Agent Skills" landing page in each Data Capture SDK sidebar (above Samples), so docs visitors and search engines can discover the Scandit/scandit-sdk-skills catalog without leaving the docs. Pages share a single SkillsPage component driven by skills.json — the 9 MDX files are thin route stubs for per-platform URLs/SEO. Also extracts InstallTabs into a shared file so SkillsCallout and SkillsPage render the same install UI (Any agent / Claude Code / Cursor), splits the two Claude Code plugin commands into separate copy boxes per the repo's "one at a time" instruction, and adds a "More info →" link from each product callout to the relevant SDK's Agent Skills page.
The /connector-guides/windsurf and /connector-guides/cursor pages are outdated — the new per-SDK Agent Skills pages cover the same intent and include install instructions for any AI agent. Both URLs now redirect to /sdks/ios/agent-skills.
Surface the cross-platform .NET MAUI Barcode Capture skill on both .NET iOS and .NET Android Agent Skills pages — no dedicated MAUI docs section exists, and MAUI devs typically land on one of those.
The skills repo was renamed from scandit/scandit-sdk-skills to scandit/skills. Updates the npx install URL, Claude Code marketplace command, Learn more link, and aria-labels to match.
- Homepage SkillsCallout: new banner variant (full-width within the body), framework-aware 'More info' link reading ?framework= query. - Bump callout text sizes to match the doc body; copy text 'Copy' swapped for a clipboard icon, vertically centered. - Cursor 'Install in Cursor' button: center label horizontally and vertically. - Claude Code plugin commands split into two boxes per the repo's 'one at a time' wording. - Cap homepage body at 1680px and Data Capture Basics cards on a 5/4/ 3/2/1-column grid at defined breakpoints, so the last card no longer stretches to fill a half-empty row.
Align the docs site with the categorization on scandit.com/products/all-products/ and SDC-31756. Sidebar (per SDK in sidebars.ts): - Rename Single Scanning -> Single Barcode Scanning - Rename Batch Scanning -> Multiple Barcode Scanning - Rename ID Capture and Validation -> ID Scanning - Promote Label Scanning out of Barcode Scanning to a top-level peer between Barcode Scanning and ID Scanning. Additional Functionalities stays nested. - Update overview page H1s and ID intro title to match. Doc IDs/URLs unchanged. - Rename MatrixScan intro to "About MatrixScan Batch" across SDKs and the shared partial. Homepage: - Remove the "Get started" CTA from every section header. - Narrow content max-width from 1680px to 1280px. - Reduce Frameworks bottom margin from 140px to 90px. - New layout: Barcode Scanning (full width) -> ID Scanning + Label Scanning side-by-side (50/50, equal-height) -> Plug & Play Solutions (ID Bolt + Scandit Express) using the teal ID gradient. - Add APIs: line under each product tile. - Data Capture Basics grid: rename "Supported Documents" to "Supported ID Documents" and add "Supported Labels" (new docs/label-definitions.mdx redirect). Switch to a 3-column 2-row grid. versioned_sidebars/* left untouched.
Add stable data-skills-install attributes to the four install entry points (CLI, Claude Code marketplace, Claude Code plugin, Cursor) so click events can be targeted from autocapture without relying on hashed CSS module class names.
Fire skills_command_copied from both the copy button and the text-selection onCopy handler with method, variant, product, and framework properties so PostHog can break installs down by product/framework/method without parsing elements_chain. Plumb product+framework from SkillsCallout through InstallTabs and onto data-skills-callout-* attributes as a fallback.
Adds 13 entries to skills.json `products` so the inline SkillsCallout renders on every product/framework docs page that has a matching skill in scandit/skills. For multi-skill combos (barcode-capture .NET iOS/ Android, matrixscan-ar iOS) the callout points at the primary skill; variants stay surfaced on the per-framework agent-skills listing page.
Sidebar (per SDK in sidebars.ts):
- Drop the Label Scanning landing page; the category links straight to
its first child instead. Removes the stub label-scanning.md pages and
the _label-scanning.mdx partial, and adds redirects from
/sdks/{platform}/label-scanning to /sdks/{platform}/label-capture/intro.
- Introduce a top-level "Plug & Play Solutions" section that groups the
ID Bolt and Scandit Express documentation links, matching the homepage
Plug & Play grid. Titanium gets Express only.
- Rename the top group from "Data Capture SDK for {Platform}" to just
"Data Capture SDK"; the platform is already in the navbar tab.
- Inline the Data Capture Basics subcategory (core-concepts,
features-by-framework, system-requirements move one level up).
Styling:
- Reduce sidebar margin-bottom on top-level items from 40px to 16px so
expanded sections sit closer together.
llms config:
- Drop "label-scanning.md" from llmsSharedPartialPageNames now that the
per-SDK stubs are gone.
Rename homepage card API label to "Smart Label Capture" and tighten its typography so the APIs line reads as metadata, not body copy. Show a concrete example skill slug on the agent-skills page and pass the framework into InstallTabs so bundle-install copy events are tagged in PostHog.
Swap "Core Concepts" and "Features by Framework" for Release Notes and Sample Apps on GitHub, with links that follow the selected framework (read from the same ?framework= URL param as CardsPart). Rename the section to "Quick Reference" so it matches the new content.
Replaces the homepage GitHub Samples button with an Agent Skills link, adds a matching nav link injected via a client module, and adopts a consistent SVG logo across the homepage and navbar. Aligns header font-family and line-height with the navbar, renames sidebar "Samples" to "GitHub Samples", and swizzles dropdown navbar items to surface version tags and section headers.
Pages remain in docs/ so direct URLs still resolve; only the sidebar entries are removed across the main and per-SDK sidebars.
React Router's <Link to=...> handles plain clicks, so patching the DOM href alone left navigation pointing at the static /sdks/ios path. Add a capture-phase click handler that intercepts left-clicks and navigates to the framework-aware URL; modifier/middle clicks still use the patched href for correct new-tab behavior.
raffaelefarinaro
force-pushed
the
feature/skills-callout
branch
from
d143f62 to
02d5f76
Compare
added 3 commits
May 20, 2026 14:29
Fix uneven card titles caused by SVG icons of different intrinsic heights, tighten Card typography, and drop the divider above Quick Reference.
The earlier font/line-height bump made the SDK cards heavier than the skills callout tile below them. Restore the original Card typography so both sit at the same visual weight. Keeps the .cardIcon row alignment from the previous commit.
Replace clamp() font-sizes on the SDK card title/description/APIs row and section title with the fixed desktop values, and stack the ID/Label scanning row at the same 1050px breakpoint the inner cards already use so the row collapses to one column instead of showing two cramped cards.
lucatorella
reviewed
May 20, 2026
lucatorella
reviewed
May 20, 2026
- Type frameworkCards as FrameworkCardType[] so labelScanning narrows correctly and findFrameworkData stays type-safe across additional entries; default isActive to false. - Exclude docs/label-definitions.mdx (client-side redirect) from llms.txt. - Reorder MatrixScan capabilities on the homepage card.
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
3 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
This PR makes two changes aimed at helping developers find and adopt the right Scandit product faster.
1. Install-skill callout on every product/framework docs page. A new
SkillsCalloutcomponent appears inline on each product+framework documentation page, offering a one-click install command for the matching skill fromscandit/skills(Any AI / Claude Code / Cursor tabs). The same callout, in its "shared" variant, sits below the product cards on the homepage so users who haven't picked a product yet can install thedata-capture-sdkpicker skill and ask their coding agent which Scandit product fits their use case. Coverage is complete: every product+framework intersection that has a skill in the repo now renders the callout, including the multi-skill .NET and MatrixScan AR iOS combinations. Install actions emit a unifiedskills_command_copiedPostHog event so we can measure adoption.2. Homepage and sidebar reworked to match the new product marketing direction. Products are recategorized in the left sidebar and on the homepage grid so the navigation mirrors the way the products are now positioned (Data Capture grouping, skills banner placement, refined Smart Label Capture intro). The aim is to make it obvious which product to start with and where to find it, without users having to know the legacy internal naming.
Plus smaller polish carried along: tightened tab copy ("coding agent", "integrate, debug, and customize"), softer
CommandBlockstyling in light mode, inline-code wrapping in admonitions, and updated references to the renamedscandit/skillsrepo.