Skip to content

feat: Redesign Agent Skills callout with copy-prompt UX#16684

Merged
HazAT merged 8 commits intomasterfrom
feat/agent-skills-callout-redesign
Mar 7, 2026
Merged

feat: Redesign Agent Skills callout with copy-prompt UX#16684
HazAT merged 8 commits intomasterfrom
feat/agent-skills-callout-redesign

Conversation

@HazAT
Copy link
Member

@HazAT HazAT commented Mar 4, 2026

Redesign Agent Skills Callout

Replaces the old Expandable-based "Sentry Agent Skills" callout with a new AgentSkillsCallout component across all platform docs.

New design

image
  • "Agent-Assisted Setup" card with "Recommended" badge
  • One-line prompt users copy directly into their coding agent (points to skills.sentry.gg short URLs)
  • Collapsed by default with expandable section for full skills package installation
  • Uses existing CodeTabs/CodeBlock components for the install commands (dotagents / npx skills tabs)
  • Purple color scheme with light/dark mode support

How it works

The component takes just two props — everything else is derived internally:

  • skill → generates prompt URL, dotagents --name, npx skills --skill
  • platformName → used in description text
  • No children needed — install commands with CodeTabs rendered internally

Changes

  • New AgentSkillsCallout component (src/components/agentSkillsCallout/)
  • Replaced all 23 old Expandable-based agent skills callouts
  • Updated repo references from sentry-agent-skills to sentry-for-ai
  • All prompt URLs point to skills.sentry.gg/{skill}/SKILL.md
  • Added .yarn/install-state.gz to .gitignore

Platforms covered

Platform Skill
Next.js sentry-nextjs-sdk
Node.js sentry-node-sdk
React sentry-react-sdk
Python sentry-python-sdk
.NET sentry-dotnet-sdk
Ruby sentry-ruby-sdk
AI monitoring sentry-setup-ai-monitoring
Generic/default (none — skills.sentry.gg/)

Co-Authored-By: Claude noreply@anthropic.com

@vercel
Copy link

vercel bot commented Mar 4, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
develop-docs Ready Ready Preview, Comment Mar 6, 2026 10:52pm
sentry-docs Ready Ready Preview, Comment Mar 6, 2026 10:52pm

Request Review

Introduce a new AgentSkillsCallout component that replaces the generic
Expandable for the Next.js getting-started page. The new design features:

- A prominent "Agent-Assisted Setup" card with a "Recommended" badge
- A one-line prompt users can copy directly into their coding agent
  (points to skills.sentry.gg short URL)
- Collapsed by default with an expandable section for full skills
  package installation (dotagents + npx skills)
- Purple color scheme matching the Sentry brand palette with proper
  light/dark mode support

This is a POC applied only to the Next.js platform include
(javascript.nextjs.mdx). Other platforms still use the old Expandable
component and will be migrated separately.

Also updates repo references from sentry-agent-skills to sentry-for-ai.

Co-Authored-By: Claude <noreply@anthropic.com>
Move install command rendering into the component using the existing
CodeTabs and CodeBlock components instead of custom tab/pre markup.
All MDX files now use self-closing <AgentSkillsCallout /> tags with
no children — the component generates everything from the skill prop.

Also replace raw <a> tags with next/link <Link> to fix lint warnings.

Co-Authored-By: Claude <noreply@anthropic.com>
…PHP, Nest.js, Svelte

Add AgentSkillsCallout to platform getting-started pages that were
missing it:

- Apple/iOS (sentry-cocoa-sdk) via shared include
- Android (sentry-android-sdk)
- React Native (sentry-react-native-sdk)
- Go (sentry-go-sdk)
- PHP (sentry-php-sdk)
- Nest.js (sentry-nestjs-sdk)
- Svelte/SvelteKit (sentry-svelte-sdk)

Co-Authored-By: Claude <noreply@anthropic.com>
@HazAT HazAT force-pushed the feat/agent-skills-callout-redesign branch from c1317a2 to b1696b5 Compare March 5, 2026 15:16
@codeowner-assignment codeowner-assignment bot requested review from a team March 5, 2026 15:16
Co-Authored-By: Claude <noreply@anthropic.com>
@HazAT HazAT force-pushed the feat/agent-skills-callout-redesign branch from 2f4e13e to fe1e3de Compare March 6, 2026 12:00
Copy link

@cursor cursor bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cursor Bugbot has reviewed your changes and found 1 potential issue.

Autofix Details

Bugbot Autofix prepared a fix for the issue found in the latest run.

  • ✅ Fixed: Potentially nonexistent skill names generate broken prompt URLs
    • Removed the three AgentSkillsCallout components that referenced nonexistent skills (sentry-nestjs-sdk, sentry-android-sdk, sentry-php-sdk) from the NestJS, Android, and PHP index pages.

Create PR

Or push these changes by commenting:

@cursor push fc26e663a6
Preview (fc26e663a6)
diff --git a/docs/platforms/android/index.mdx b/docs/platforms/android/index.mdx
--- a/docs/platforms/android/index.mdx
+++ b/docs/platforms/android/index.mdx
@@ -11,8 +11,6 @@
   - ndk
 ---
 
-<AgentSkillsCallout skill="sentry-android-sdk" platformName="Android" />
-
 On this page, we get you up and running with Sentry's Android SDK, automatically reporting errors and exceptions in your application.
 
 <Alert>

diff --git a/docs/platforms/javascript/guides/nestjs/index.mdx b/docs/platforms/javascript/guides/nestjs/index.mdx
--- a/docs/platforms/javascript/guides/nestjs/index.mdx
+++ b/docs/platforms/javascript/guides/nestjs/index.mdx
@@ -9,8 +9,6 @@
   - server-node
 ---
 
-<AgentSkillsCallout skill="sentry-nestjs-sdk" platformName="Nest.js" />
-
 <PlatformContent includePath="getting-started-prerequisites" />
 
 ## Step 1: Install

diff --git a/docs/platforms/php/index.mdx b/docs/platforms/php/index.mdx
--- a/docs/platforms/php/index.mdx
+++ b/docs/platforms/php/index.mdx
@@ -9,8 +9,6 @@
 og_image: /og-images/platforms-php.png
 ---
 
-<AgentSkillsCallout skill="sentry-php-sdk" platformName="PHP" />
-
 ## Prerequisites
 
 * You need a [Sentry account](https://sentry.io/signup/) and project
This Bugbot Autofix run was free. To enable autofix for future PRs, go to the Cursor dashboard.

- server-node
---

<AgentSkillsCallout skill="sentry-nestjs-sdk" platformName="Nest.js" />
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Potentially nonexistent skill names generate broken prompt URLs

Medium Severity

Three new callouts reference skill names (sentry-nestjs-sdk, sentry-android-sdk, sentry-php-sdk) that are not listed in the canonical skill table in docs/ai/agent-skills.mdx. These pages never had agent skills callouts before (they're new additions, not replacements of old Expandable blocks), so if these skills don't exist in the sentry-for-ai repo, the generated prompt URLs (e.g. https://skills.sentry.gg/sentry-nestjs-sdk/SKILL.md) will 404, and users copying the prompt will get a broken experience.

Additional Locations (2)

Fix in Cursor Fix in Web

Redesign the callout to fit title, prompt, and copy button on one row.
Remove the Recommended badge. Smaller padding and font sizes throughout.
Description and View docs link sit in a compact sub-row below.

Co-Authored-By: Claude <noreply@anthropic.com>
@HazAT HazAT force-pushed the feat/agent-skills-callout-redesign branch from 892c203 to dedce37 Compare March 6, 2026 22:36
No value in showing the agent prompt on small screens where users
aren't using coding agents.

Co-Authored-By: Claude <noreply@anthropic.com>
@HazAT HazAT force-pushed the feat/agent-skills-callout-redesign branch from 56216d8 to c5d12e4 Compare March 6, 2026 22:38
Co-Authored-By: Claude <noreply@anthropic.com>
@HazAT HazAT force-pushed the feat/agent-skills-callout-redesign branch from 62e9c24 to b1724ba Compare March 6, 2026 22:40
Copy link

@cursor cursor bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cursor Bugbot has reviewed your changes and found 2 potential issues.

Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.

- server
---

<AgentSkillsCallout skill="sentry-flutter-sdk" platformName="Dart" />
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Dart platform incorrectly uses Flutter skill name

Medium Severity

The Dart platform page uses skill="sentry-flutter-sdk" which generates a prompt URL pointing to https://skills.sentry.gg/sentry-flutter-sdk/SKILL.md and install commands referencing the Flutter skill. Plain Dart (server-side) is a distinct SDK (sentry.dart) from Flutter (sentry.dart.flutter), so Dart users would receive Flutter-specific setup instructions that may not apply to their non-Flutter Dart application. The description says "set up Sentry in your Dart app" but the linked skill content is Flutter-specific.

Fix in Cursor Fix in Web

See the [full list of available skills](https://skills.sh/getsentry/sentry-for-ai) and [installation docs](/ai/agent-skills/) for more details.

</Expandable>
<AgentSkillsCallout skill="sentry-setup-ai-monitoring" />
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Missing platformName on AI monitoring callout

Low Severity

The AI Agent Monitoring callout uses <AgentSkillsCallout skill="sentry-setup-ai-monitoring" /> without a platformName, so the description reads the generic "Your agent will set up Sentry automatically" instead of mentioning the specific platform context. The old Expandable mentioned "your application" explicitly. This is inconsistent with other JavaScript-section callouts and the Python AI monitoring page at docs/platforms/python/integrations/openai-agents/index.mdx which does pass platformName="Python".

Fix in Cursor Fix in Web

@HazAT HazAT merged commit c1769a3 into master Mar 7, 2026
19 checks passed
@HazAT HazAT deleted the feat/agent-skills-callout-redesign branch March 7, 2026 08:39
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants