Skip to content

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

Open
HazAT wants to merge 3 commits intomasterfrom
feat/agent-skills-callout-redesign
Open

feat: Redesign Agent Skills callout with copy-prompt UX#16684
HazAT wants to merge 3 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 5, 2026 10:06am
sentry-docs Ready Ready Preview, Comment Mar 5, 2026 10:06am

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>
@HazAT HazAT force-pushed the feat/agent-skills-callout-redesign branch from 78ec599 to ac6293a Compare March 5, 2026 09:55
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.

1 participant