Design System

What it does

This skill automates the generation and documentation of design system components from Figma designs, specifically for frontend development at Sentry. It leverages core components from @sentry/scraps to ensure consistent styling, responsive design, and maintainability across the codebase. The skill provides implementations for layout primitives (Container, Flex, Grid, Stack) and typography primitives (Text, Heading).

When to use it

• When building frontend applications that require a consistent design system.
• To quickly generate reusable UI components from Figma designs.
• To ensure adherence to established styling guidelines and best practices within the @sentry/scraps component library.
• For developers needing reference documentation on available props for layout and typography components.

Key capabilities

• Layout Component Generation: Creates Container, Flex, Grid, and Stack layout primitives.
• Typography Component Generation: Generates Text and Heading typography primitives.
• Prop Documentation: Provides detailed information on supported props for each component, with references to implementation files.
• Core Component Usage Enforcement: Promotes the use of @sentry/scraps components over custom styled components (e.g., using Emotion).
• Inheritance: Flex, Grid, and Stack components inherit all properties from the Container component.

Example prompts

• "Generate a Flex layout with horizontal direction and centered alignment."
• "Show me the available props for the Container component."
• "Create a heading primitive using the 'primary' surface variant."

Tips & gotchas

• Prioritize Core Components: Always use components from @sentry/scraps instead of creating custom styled components.
• Container Inheritance: Remember that Flex, Grid, and Stack inherit all Container props, providing a wide range of styling options.
• Prop Documentation Reference: Consult the implementation files (linked in the documentation) for complete lists of supported props and their types.