design-system
Guide for using Sentry's layout and text primitives. Use when implementing UI components, layouts, or typography. Enforces use of core components over styled components.
Install
With your agent
Install OMGSkills skill "getsentry/sentry:design-system" into this agent's normal skills directory: call the OMGSkills MCP get_install_plan tool for your agent and run the script it returns (it installs only the pinned commit and verifies SKILL.md), and stop if MCP or the pin is unavailable. Do not overwrite or change existing skills without asking me.
Manual command
git clone https://github.com/getsentry/sentry /tmp/sentry && ln -s /tmp/sentry/.agents/skills/design-system ~/.claude/skills/design-systemFrom README
Layout and Text Primitives at Sentry Core Principle ALWAYS use core components from @sentry/scraps instead of creating styled components with Emotion. Core components provide consistent styling, responsive design, and better maintainability across the codebase. Component Implementation Reference For the complete list of supported props and their types, refer to the implementation files: Layout Components: /static/app/components/core/layout/ container.tsx - Base container with all layout props flex.tsx - Flex layout primitive grid.tsx - Grid layout primitive stack.tsx - Stack layout primitive (Flex with column direction by default) Typography Components: /static/app/components/core/text/ text.tsx - Text primitive heading.tsx - Heading primitive Layout Primitives Important: Flex, Grid, and Stack all extend Container. This means every prop available on Container is also available on Flex, Grid, and Stack.
More from this repo
backend-conventions
Sentry backend conventions for logging, tracing/spans, span/tag attribute naming, metrics tags, and the options system.
feature-flags
Gate a Sentry feature behind a FlagPole feature flag.
generate-frontend-forms
Guide for creating forms using Sentry's new form system.