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

lattice-ui-skills

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides opinionated constraints for building user interfaces that are visually consistent with the Lattice design system, ensuring brand alignment and a polished user experience.

Core Features & Use Cases

  • Design System Adherence: Enforces Lattice's specific color palette, typography (Inter font), and spacing (4px grid).
  • Accessibility Compliance: Ensures text contrast ratios meet WCAG AA standards.
  • Use Case: When developing a new feature for a Lattice product, use this Skill to guide the AI in creating UI components that perfectly match the existing design language, from button styles to form layouts.

Quick Start

Apply the lattice-ui-skills to ensure the new dashboard uses the Lattice design system's light mode, Inter font, and 4px grid.

Frequently Asked Questions about lattice-ui-skills

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

FAQPage Schema
How do I enforce a 4px grid and Inter font for light mode UI design?▼

The Lattice design system specifies semantic color tokens, heading and body typography styles using the Inter font, and spacing rules on a 4px scale to build light-mode interfaces with consistent visual output.

Does this UI design system include accessibility compliance for text contrast?▼

Yes, this UI design system includes accessibility compliance by ensuring text contrast ratios meet WCAG AA standards. This guarantees readable light-mode interfaces while maintaining Lattice brand alignment.

How do I apply Lattice design system constraints to generate consistent UI components?▼

Apply Lattice design system constraints to generate consistent UI components by guiding the AI with specified border-radius applications, layout dimensions, and semantic color tokens for polished user experiences.

Can I use this design system Skill for dark mode interfaces?▼

No, you cannot use this design system Skill for dark mode interfaces. It specifically enforces constraints for building light-mode interfaces using Lattice's semantic color tokens and 4px grid spacing.

What are the limitations of using a 4px grid spacing scale for layout dimensions?▼

The limitations of using a 4px grid spacing scale involve strict adherence requirements for layout dimensions and border-radius application. You must follow these opinionated constraints to maintain visual consistency.

Related Skills

Explore More Design & Creative Skills→
cshyangcshyang

trigger-setup

Initialize Trigger.dev with npx trigger init and generate trigger.config.ts.

Community
Intermediate
DVNghiemDVNghiem
20

design-tokens

Standardize color, typography, spacing, and border tokens across platforms.

Community
Intermediate
ChoreShoreChoreShore

color-contrast

Validate WCAG 2.1 color contrast ratios and suggest compliant alternatives.

Official
Intermediate
truongnattruongnat

ui-stack-pro

Validate UI components against 8px grid, color, typography, dark mode, and 5-state rules.

Community
Advanced