skills.rest
Harigithub11
Harigithub11COMMUNITY
Explore all skills by this author →
GitHub

design-system

Enforce Sentry core layout and typography primitives in frontend components.

Updated Apr 1, 2026
Search Tags:#typography#consistency#layout#frontend#react#design-system#ui-primitives
One-click install
npx skills add https://github.com/Harigithub11/sentry --skill design-system-harigithub11
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system
Source: https://github.com/Harigithub11/sentry/tree/main/.agents/skills/design-system
Command: npx skills add https://github.com/Harigithub11/sentry --skill design-system-harigithub11

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The design-system guide helps teams build UI using Sentry's core primitives to ensure visual consistency, accessibility, and maintainability across the codebase. It discourages ad-hoc styling with styled components and promotes reuse of layout and typography primitives.

Core Features & Use Cases

  • Layout primitives: Container, Flex, Grid, Stack to compose responsive layouts.
  • Typography primitives: Text and Heading to standardize typography across components.
  • Info components: InfoTip and InfoText to provide contextual help consistently.
  • Abstraction guidelines: Promote thin abstractions with user confirmation to improve readability without over-abstracting.
  • Token guidance: Use responsive props and tokens for spacing, color, and typography, ensuring a single source of truth.

Quick Start

Start by importing core primitives from @sentry/scraps and compose a simple responsive layout using Flex and Text.

Frequently Asked Questions about design-system

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

FAQPage Schema
How do I enforce UI primitives for consistent frontend layouts in React?▼

To enforce UI primitives for consistent frontend layouts, standardize component development using Container, Flex, Grid, and Stack. This ensures responsive layouts and discourages ad hoc styled components across your codebase.

What is the best way to standardize typography across a React codebase?▼

The best way to standardize typography is by enforcing Text and Heading primitives. These typography components ensure visual consistency, maintainability, and accessibility while discouraging ad-hoc styling.

How do I build responsive React layouts without ad hoc styled components?▼

Build responsive React layouts by composing layout primitives like Flex and Grid with responsive props. Using tokens for spacing and color provides a single source of truth, preventing ad hoc styled components.

When should I use InfoTip and InfoText components in frontend development?▼

Use InfoTip and InfoText components in frontend development when you need to provide contextual help consistently. They standardize the display of contextual information across your user interfaces.

Does this design system approach support thin abstractions for UI components?▼

Yes, this design system approach supports thin abstractions for UI components. It promotes thin abstractions with user confirmation to improve code readability without over-abstracting the underlying primitives.

Why does my frontend UI lose visual consistency when scaling?▼

Frontend UI loses visual consistency when scaling due to ad hoc styled components. Enforcing layout and typography primitives with responsive props and tokens ensures a single source of truth for spacing and color.

Related Skills

Explore More Design & Creative Skills→
wildbitcawildbitca
1

common-ui-design

Define UI aesthetic and design system tokens before frontend implementation.

Official
Advanced
dylantarredylantarre
38

layout-primitives

Create reusable layout primitives with CSS flexbox, grid, and React components.

Community
Basic
KuassKuass
1

ui-ux-research

Analyzes UI patterns, design systems, and accessibility compliance across codebases.

Community
Intermediate
snake-dev-teamsnake-dev-team

ck:ui-styling

Style React interfaces with shadcn/ui components and Tailwind CSS.

Official
Intermediate