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

clerk-ui-skills

Enforce Clerk's UI design system for light-mode interfaces with Inter font and 4px grid.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

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

Core Features & Use Cases

  • Aesthetic Consistency: Apply Clerk's specific color palette, typography, spacing, and border-radius rules.
  • Light Mode Focus: Tailored for interfaces designed in light mode.
  • Font & Grid Adherence: Enforces the use of 'Inter' font and a 4px grid system for pixel-perfect layouts.
  • Use Case: When developing a new feature that needs to seamlessly integrate with existing Clerk-based applications, use these guidelines to maintain brand consistency and user familiarity.

Quick Start

Apply Clerk's UI design system to build a light-mode interface using the Inter font and a 4px grid.

Frequently Asked Questions about clerk-ui-skills

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

FAQPage Schema
How do I apply a consistent UI design system for light mode interfaces?▼

To apply a consistent UI design system for light mode interfaces, use predefined color tokens, typography styles, spacing rules, and border-radius scales. This enforces visual consistency and accessibility standards for text contrast and interactive states.

What typography and grid rules do I need for pixel-perfect UI layouts?▼

For pixel-perfect UI layouts, you need to enforce the Inter font family and a strict 4px grid system. These typography and spacing constraints ensure precise alignment and predictable visual structure across your interface components.

How do I maintain brand consistency when building features for existing applications?▼

To maintain brand consistency when building features for existing applications, apply opinionated design constraints including specific color palettes, border-radius scales, and layout constraints. This ensures new elements seamlessly integrate with the established visual language.

Does this UI design system support dark mode color palettes?▼

This UI design system does not support dark mode color palettes. It is specifically tailored for building interfaces designed in light mode, focusing on light-mode color tokens and accessibility standards for light backgrounds.

Are accessibility standards for text contrast included in these design constraints?▼

Accessibility standards for text contrast are included in these design constraints. The system specifies color tokens and interactive states that adhere to accessibility requirements, ensuring readable text and clear visual hierarchy in light mode.

Related Skills

Explore More Design & Creative Skills→
ihlamuryihlamury
73

gusto-ui-skills

Enforce Gusto's UI design system constraints for light-mode interfaces.

Community
Intermediate
Saifeldin2401Saifeldin2401

Design Engineering

Guide CSS transitions and motion design for accessible UI components.

Community
Intermediate
ihlamuryihlamury
73

obsidian-ui-skills

Apply Obsidian-inspired dark mode UI constraints with Inter font and a 4px grid system.

Community
Intermediate
ihlamuryihlamury
73

plaid-ui-skills

Enforce Plaid's UI design system with dark mode, Inter font, and 4px grid.

Community
Intermediate