linear-ui-skills

Enforce Linear-inspired UI design constraints for dark mode, Inter font, and 4px grid.

73|9|Updated Jan 25, 2026

Search Tags:#typography #design system #linear #ui design #dark mode #spacing

Ready to run

npx skills add https://github.com/ihlamury/design-skills --skill linear-ui-skills

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: linear-ui-skills
Source: https://github.com/ihlamury/design-skills/tree/main/skills/linear
Command: npx skills add https://github.com/ihlamury/design-skills --skill linear-ui-skills

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides opinionated constraints for building interfaces that are visually consistent with Linear's design system, ensuring a polished and professional look.

Core Features & Use Cases

Dark Mode Implementation: Enforces dark backgrounds and appropriate text contrast.
Consistent Typography: Utilizes the 'Inter' font family with defined heading and body text styles.
Grid-Based Spacing: Adheres to a 4px grid for consistent spacing and layout.
Use Case: When designing a new feature for a project management tool that needs to match the aesthetic of Linear, use this skill to guide the UI development.

Quick Start

Apply Linear's UI design system to create a dark mode interface using the Inter font and a 4px grid.

Frequently Asked Questions about linear-ui-skills

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

FAQPage Schema

How do I build a dark mode interface with Linear's UI design system?▼

To build a Linear-style dark mode interface, enforce dark backgrounds, appropriate text contrast, the Inter font family, and a 4px grid system for spacing and layout. This skill provides specific guidelines for colors, typography, borders, and components to ensure visual consistency.

What typography and spacing constraints are needed for Linear-style UI design?▼

Linear-style UI design requires using the Inter font family with defined heading and body text styles, alongside a strict 4px grid system for consistent spacing and layout. These constraints ensure a polished and professional look across the interface.

Can I use this Linear UI design system skill for a project management tool interface?▼

Yes, you can use this skill to design new features for a project management tool that needs to match Linear's aesthetic. It enforces design constraints for dark mode, typography, spacing, borders, layout, components, and interactive states.

Does the Linear UI design skill provide guidelines for interactive states and animations?▼

Yes, the Linear UI design skill provides specific guidelines for interactive states, interaction patterns, animation, and performance optimization. These constraints ensure visual consistency and adherence to the design system.

What is the best way to ensure visual consistency when building Linear-inspired interfaces?▼

The best way to ensure visual consistency in Linear-inspired interfaces is to apply opinionated constraints for colors, typography, spacing, borders, and layout. This skill enforces a 4px grid, Inter font, and dark mode to achieve a professional look.

Why does my Linear-style interface lack visual consistency across components?▼

Your interface may lack consistency if it does not adhere to a 4px grid system, defined Inter typography styles, and specific dark mode color guidelines. Applying these opinionated design constraints ensures borders, layout, and components match Linear's aesthetic.