skills.rest
ihlamury
ihlamuryCOMMUNITY
Explore all skills by this author →
𝕏@yagizihlamurGitHub

liveblocks-ui-skills

Enforce Liveblocks UI design constraints for dark mode, Inter font, and 4px grid.

73|9|Updated Jan 25, 2026
Search Tags:#typography#design system#ui design#dark mode#spacing#liveblocks
One-click install
npx skills add https://github.com/ihlamury/design-skills --skill liveblocks-ui-skills
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: liveblocks-ui-skills
Source: https://github.com/ihlamury/design-skills/tree/main/skills/liveblocks
Command: npx skills add https://github.com/ihlamury/design-skills --skill liveblocks-ui-skills

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides opinionated constraints for building interfaces that are visually consistent with Liveblocks's design system, ensuring a polished and branded user experience.

Core Features & Use Cases

  • Dark Mode Implementation: Enforces dark backgrounds and specific color palettes suitable for dark themes.
  • Typography Consistency: Mandates the use of the 'Inter' font family with specific heading and body text styles.
  • Spacing and Grid Adherence: Ensures UI elements are aligned to a 4px grid for a clean and organized layout.
  • Use Case: When designing a new feature for a real-time collaboration tool that needs to match the existing Liveblocks aesthetic, use these guidelines to maintain visual harmony.

Quick Start

Apply the liveblocks-ui-skills to ensure the new interface uses dark mode, the Inter font, and a 4px grid.

Frequently Asked Questions about liveblocks-ui-skills

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

FAQPage Schema
How do I enforce a 4px grid spacing system in UI design?▼

Enforcing a 4px grid spacing system involves applying specific design system constraints that align all UI elements to a 4px base unit. This approach ensures clean layouts and consistent spacing across interface components.

What typography hierarchy rules should I use for dark mode interfaces?▼

Typography hierarchy for dark mode interfaces should mandate the 'Inter' font family with specific heading and body text styles. This enforces visual consistency and readability when paired with dark backgrounds.

Can I use these UI design system guidelines for real-time collaboration tools?▼

Yes, these UI design system guidelines apply to real-time collaboration tools. They provide opinionated constraints ensuring a polished, branded user experience with dark mode aesthetics and consistent visual harmony.

What's the best way to maintain color contrast in dark theme UI design?▼

The best way to maintain color contrast in dark theme UI design is to enforce specific dark background palettes and color contrast requirements. This ensures accessibility and visual consistency in dark mode.

Do I need specific border-radius scales for a consistent design system?▼

Yes, specific border-radius scales are needed for a consistent design system. Applying defined border-radius scales alongside spacing and typography constraints ensures visual harmony and structural uniformity across interface elements.

Related Skills

Explore More Design & Creative Skills→
ihlamuryihlamury
73

wise-ui-skills

Enforce Wise UI design constraints for light-mode interfaces with Inter font and 4px grid.

Community
Intermediate
abzhawabzhaw

dashboard-design

Design responsive Next.js dashboards with layout patterns and real-time status indicators.

Community
Intermediate
jonathanbelolojonathanbelolo
3

composable-svelte-chat

Implement streaming chat with presence tracking for Composable Svelte apps.

Community
Advanced
ihlamuryihlamury
73

mailchimp-ui-skills

Enforce Mailchimp UI design constraints with light mode, Inter font, and 4px grid.

Community
Intermediate