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

bear-ui-skills

Enforce Bear UI design constraints for light-mode interfaces using color tokens, Inter font, and 4px grid.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides opinionated constraints for building interfaces that are visually consistent with the Bear application's aesthetic, ensuring a familiar and polished user experience.

Core Features & Use Cases

  • Design System Enforcement: Enforces Bear's specific color palette, typography, spacing, and border-radius rules.
  • Light Mode Consistency: Ensures interfaces adhere to a light mode design, using specific background and text colors.
  • Font and Grid Adherence: Mandates the use of the Inter font family and a 4px grid system for layout and spacing.
  • Use Case: When developing a new feature for an application that needs to match the look and feel of Bear, use this Skill to guide the UI development process, ensuring all elements align with Bear's design language.

Quick Start

Apply the bear-ui-skills to ensure the new interface uses the Inter font and a 4px grid.

Frequently Asked Questions about bear-ui-skills

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

FAQPage Schema
How do I build light-mode UI interfaces that match Bear's design system?▼

To build light-mode UI interfaces matching Bear's design system, apply specific color tokens, the Inter font family, a 4px spacing grid, and defined border-radius scales to ensure visual consistency and accessibility.

What typography and spacing grid does Bear's UI design system use?▼

Bear's UI design system mandates the Inter font family for typography and a strict 4px grid system for layout and spacing, ensuring structured and polished interface elements.

Can I use Bear UI design constraints for dark mode interface development?▼

Bear UI design constraints are specifically enforced for light-mode interfaces, using defined background and text colors to ensure adherence to a light mode aesthetic rather than dark mode.

Does Bear's UI design system enforce accessibility standards for text contrast?▼

Yes, Bear's UI design system adheres to accessibility standards for text contrast by enforcing specific color tokens and light-mode background colors to maintain readable interfaces.

What is the best way to ensure my new application feature aligns with Bear's visual aesthetic?▼

The best way to align new application features with Bear's visual aesthetic is to enforce its opinionated design system constraints, including specific color palettes, typography rules, and border-radius scales during UI development.

Are there limitations when using Bear UI skills for interface design?▼

A limitation of Bear UI skills is that the design system constraints are strictly opinionated for light-mode interfaces, meaning the specific color tokens and rules may not apply to dark mode or alternative visual styles.

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
radioactive-labsradioactive-labs
68

plutonium-theming

Apply CSS design tokens to standardize UI theming across web application components.

Official
Advanced
ihlamuryihlamury
73

loom-ui-skills

Enforce Loom's UI design system with color tokens, Inter font, and 4px spacing grid.

Community
Intermediate
ihlamuryihlamury
73

plaid-ui-skills

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

Community
Intermediate