feat: Redesign Agent Skills callout with copy-prompt UX#16684
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
4eadd19 to
1fe0ab3
Compare
9bd10b4 to
0407d8b
Compare
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>
6817572 to
a58328e
Compare
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>
78ec599 to
ac6293a
Compare
…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>
c1317a2 to
b1696b5
Compare
Co-Authored-By: Claude <noreply@anthropic.com>
2f4e13e to
fe1e3de
Compare
There was a problem hiding this comment.
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.
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| - server-node | ||
| --- | ||
|
|
||
| <AgentSkillsCallout skill="sentry-nestjs-sdk" platformName="Nest.js" /> |
There was a problem hiding this comment.
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)
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>
892c203 to
dedce37
Compare
No value in showing the agent prompt on small screens where users aren't using coding agents. Co-Authored-By: Claude <noreply@anthropic.com>
56216d8 to
c5d12e4
Compare
Co-Authored-By: Claude <noreply@anthropic.com>
62e9c24 to
b1724ba
Compare
There was a problem hiding this comment.
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" /> |
There was a problem hiding this comment.
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.
| 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" /> |
There was a problem hiding this comment.
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".



Redesign Agent Skills Callout
Replaces the old Expandable-based "Sentry Agent Skills" callout with a new AgentSkillsCallout component across all platform docs.
New design
How it works
The component takes just two props — everything else is derived internally:
skill→ generates prompt URL, dotagents --name, npx skills --skillplatformName→ used in description textChanges
Platforms covered
Co-Authored-By: Claude noreply@anthropic.com