skills.rest
getsentry
getsentryOFFICIAL
Explore all skills by this author →
Website𝕏@sentryGitHub

design-system

Guide UI development using Sentry's @sentry/scraps layout and typography primitives.

44.5k|4.8k|Updated Aug 30, 2010
Search Tags:#typography#layout#react#design system#frontend development#ui components#sentry scraps
One-click install
npx skills add https://github.com/getsentry/sentry --skill design-system-getsentry
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system
Source: https://github.com/getsentry/sentry/tree/main/.claude/skills/design-system
Command: npx skills add https://github.com/getsentry/sentry --skill design-system-getsentry

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill ensures that all UI development adheres to Sentry's established design system, preventing the creation of inconsistent or unmaintainable UI components.

Core Features & Use Cases

  • Enforces Core Components: Guides developers to use Sentry's @sentry/scraps primitives instead of custom styled components.
  • Provides Layout & Typography Guidance: Details the usage of Container, Flex, Grid, Stack, Text, and Heading components.
  • Use Case: When building a new feature, use this Skill to ensure all new UI elements correctly leverage the design system's layout and text primitives, maintaining visual consistency and code quality.

Quick Start

Use the design-system skill to understand how to implement a responsive layout using the Flex primitive.

Frequently Asked Questions about design-system

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I implement a responsive layout using Sentry's UI design system?▼

Sentry's UI design system provides layout primitives like Flex, Grid, and Stack from `@sentry/scraps` to build responsive layouts. Using these predefined components ensures visual consistency and maintainability instead of custom styled solutions.

What components are available for typography in Sentry frontend development?▼

Sentry frontend development uses the `Text` and `Heading` typography primitives from `@sentry/scraps`. These components enforce predefined UI design standards, preventing the creation of inconsistent text styling across features.

Can I use custom styled components instead of Sentry's scraps primitives?▼

Sentry's design system enforces the adoption of predefined `@sentry/scraps` primitives over custom styled components. This strict enforcement prevents the creation of inconsistent or unmaintainable UI components in your React application.

When do I need to use the Sentry design system layout components?▼

Use Sentry design system layout components like Container, Flex, Grid, and Stack when building new React features. This ensures all new UI elements correctly leverage the design system's layout primitives, maintaining code quality and visual consistency.

What are the limitations of using custom styled solutions over a React design system?▼

Custom styled solutions lack the predefined props and responsive design patterns found in a React design system. Bypassing `@sentry/scraps` primitives leads to unmaintainable UI components and breaks established visual consistency standards.

Related Skills

Explore More Software Engineering Skills→
cameronapakcameronapak
1

bknd-client-setup

Configure the Bknd TypeScript SDK with host URL and localStorage token persistence.

Community
Intermediate
hieutrtrhieutrtr
8

ui-design-system

Apply design tokens and UI primitives to React/TypeScript projects.

Community
Intermediate
Higashi-KotaHigashi-Kota

ui-component

Build accessible React UI components with design tokens and ARIA patterns.

Community
Advanced
jubalmjubalm
1

shadcn-init

Initialize shadcn/ui in React projects with Tailwind CSS v4 configuration.

Community
Advanced