# design-system

> Claude/Codex skill by [@getsentry](https://omgskills.com/library/getsentry/index.md) · 45k stars · Updated 2026-09-11

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.

Tags: apm, crash-reporting, crash-reports, csp-report, devops, django, error-logging, error-monitoring, fair-source, hacktoberfest, monitor, monitoring, python, sentry, tag-production

## Install

```sh
git clone https://github.com/getsentry/sentry /tmp/sentry && ln -s /tmp/sentry/.agents/skills/design-system ~/.claude/skills/design-system
```

## From 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.

## Links

- HTML page: https://omgskills.com/skills/getsentry/sentry/design-system/
- GitHub: https://github.com/getsentry/sentry
- Author: [@getsentry](https://omgskills.com/library/getsentry/index.md)

## More from this repo

- [cell-architecture](https://omgskills.com/skills/getsentry/sentry/cell-architecture/index.md) — Reference and active migration guide for Sentry's cell architecture.
   - [@getsentry](https://omgskills.com/library/getsentry/index.md) · 45k stars
- [cmdk-actions](https://omgskills.com/skills/getsentry/sentry/cmdk-actions/index.md) — Guide for adding new actions to Sentry's Command+K palette.
   - [@getsentry](https://omgskills.com/library/getsentry/index.md) · 45k stars
- [django-models](https://omgskills.com/skills/getsentry/sentry/django-models/index.md) — Used to design Django ORM models for Sentry following architectural conventions for silos, replication, relocation, and...
   - [@getsentry](https://omgskills.com/library/getsentry/index.md) · 45k stars