pajamas

Implement GitLab UIs using Pajamas components and design tokens.

34|9|Updated Mar 12, 2026

Search Tags:#design system #component library #design tokens #frontend development #vue.js #pajamas #gitlab ui

One-click install

npx skills add https://github.com/gitlabhq/orbit-knowledge-graph --skill pajamas

Or copy as Structured Prompt for Agent▼

Please help me install this Agent Skill.
Skill: pajamas
Source: https://github.com/gitlabhq/orbit-knowledge-graph/tree/main/.claude/skills/pajamas
Command: npx skills add https://github.com/gitlabhq/orbit-knowledge-graph --skill pajamas

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill provides expert guidance and resources for implementing user interfaces that strictly adhere to GitLab's Pajamas Design System, ensuring consistency, accessibility, and a high-quality user experience.

Core Features & Use Cases

Component Implementation: Guides the selection and usage of @gitlab/ui components (e.g., GlButton, GlAlert).
Design Token Adherence: Enforces the use of design tokens for all visual properties, preventing hardcoded values.
Figma to Code Translation: Assists in translating Figma designs into Pajamas-compliant code, working with tools like implement-design.
Use Case: When building a new feature in GitLab, use this Skill to ensure all buttons, forms, and layout elements match the official Pajamas specifications and use the correct design tokens for colors and spacing.

Quick Start

Use the pajamas skill to find the correct @gitlab/ui component for a Figma button element.

Frequently Asked Questions about pajamas

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

FAQPage Schema

How do I translate Figma designs into Vue.js UI components?▼

To translate Figma designs into Vue.js UI components, you need to map design elements to @gitlab/ui components like GlButton. This skill guides the translation process by leveraging Figma MCP tools and enforcing Pajamas Design System patterns.

What are design tokens and when should I use them in frontend development?▼

Design tokens are centralized variables for visual properties like color and spacing. You should use them in frontend development instead of hardcoded values to maintain UI consistency. This skill enforces using design tokens for all visual properties in Pajamas components.

How do I select and configure GitLab UI components for accessibility?▼

To select and configure GitLab UI components for accessibility, use the @gitlab/ui library and follow the Pajamas Design System specifications. This skill provides expert guidance on component usage, variants, categories, and accessibility requirements.

Does the Pajamas design system work with implement-design and Figma MCP tools?▼

Yes, the Pajamas design system works directly with the implement-design skill and Figma MCP tools. This integration allows you to seamlessly translate Figma designs into Pajamas-compliant code using @gitlab/ui components and design tokens.

Why should I use Pajamas design tokens instead of absolute values for UI components?▼

You should use Pajamas design tokens instead of absolute values to ensure visual consistency and maintainability across your UI. This skill enforces design token adherence for all visual properties, preventing hardcoded values in your Vue.js frontend development.