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

arc-ui-skills

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

73|9|Updated Jan 25, 2026
Search Tags:#design system#ui design#light mode#inter font#4px grid#arc browser
One-click install
npx skills add https://github.com/ihlamury/design-skills --skill arc-ui-skills
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: arc-ui-skills
Source: https://github.com/ihlamury/design-skills/tree/main/skills/arc
Command: npx skills add https://github.com/ihlamury/design-skills --skill arc-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 the Arc browser's aesthetic, ensuring a familiar and polished user experience.

Core Features & Use Cases

  • Consistent Design Language: Enforces Arc's specific use of light mode, Inter font, and a 4px grid for UI elements.
  • Accessibility Compliance: Mandates minimum text contrast ratios for better readability.
  • Use Case: When developing a new feature for a web application that needs to match the look and feel of the Arc browser, use this Skill to guide the design and development process, ensuring pixel-perfect accuracy and adherence to Arc's design principles.

Quick Start

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

Frequently Asked Questions about arc-ui-skills

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

FAQPage Schema
How do I build a UI that matches the Arc browser design system?▼

To build an Arc browser-inspired UI, apply this design system specifying light mode, Inter font, and a 4px grid. It provides exact color palettes, typography scales, spacing rules, and border-radius values for pixel-perfect visual consistency.

What are the core constraints for creating Arc-inspired light mode interfaces?▼

Core constraints for Arc-inspired light mode interfaces include using the Inter font, a strict 4px grid for layout, and specific border-radius values. The system also mandates minimum text contrast ratios to ensure accessibility compliance.

Does this Arc UI design system include guidelines for interactive states and animations?▼

Yes, the Arc UI design system includes guidelines for interactive states, component styling, and animations. These specifications ensure that interface elements behave and transition according to Arc's polished aesthetic principles.

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

No, this design system is explicitly built for light-mode interfaces. It enforces Arc's specific light mode aesthetic, including dedicated color palettes and contrast rules, and does not support dark mode themes.

Do I need any external dependencies or component libraries to apply the Arc UI guidelines?▼

No external dependencies or component libraries are required. The Skill provides the opinionated constraints and guidelines directly, allowing you to apply the Arc design rules to your existing web application development process.

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
elsolalelsolal
1

figma-implement-design

Translate Figma designs into UI components and code with design tokens.

Community
Advanced
ihlamuryihlamury
73

convertkit-ui-skills

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

Community
Intermediate
ihlamuryihlamury
73

readwise-ui-skills

Apply Readwise's UI design system constraints to light-mode web interfaces.

Community
Intermediate