Primer Design Instructions

This skill guides creation of production-grade frontend interfaces that follow the HitHub Primer brand design guidelines. Implement real working code with exceptional attention to the primer design system guidelines, Brand UI, Primer React Components and Octicons.

The user provides frontend requirements: a component, page, application, or interface to build. They may include context about the purpose, audience, or technical constraints.

Design Thinking

Before coding, understand the context and commit to a clear aesthetic direction:

• Purpose: What problem does this interface solve? Who uses it?
• Tone: Follow GitHub's professional yet friendly brand voice - clear, welcoming, and developer-focused
• Constraints: Technical requirements (framework, performance, accessibility)
• Differentiation: What makes this memorable? Focus on clean, functional design with intentional visual hierarchy

CRITICAL: Choose a clear conceptual direction and execute it with precision. The Primer design system emphasizes clarity and usability over decoration.