skills.rest
gjwroot
gjwrootCOMMUNITY
Explore all skills by this author →
GitHub

ui-skills

Standardize warm, friendly UI design across mobile and web interfaces.

Updated Mar 24, 2026
Search Tags:#typography#accessibility#ui-design#design-system#color-palette#warmth
One-click install
npx skills add https://github.com/gjwroot/trae-skills-collection --skill ui-skills-gjwroot
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-skills
Source: https://github.com/gjwroot/trae-skills-collection/tree/main/.trae/skills/ui-skills
Command: npx skills add https://github.com/gjwroot/trae-skills-collection --skill ui-skills-gjwroot

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This design skill provides comprehensive guidance to create warm, friendly, and approachable user interfaces, helping teams maintain a cohesive aesthetic and accessible experience without sacrificing clarity.

Core Features & Use Cases

  • Design Philosophy: Emphasizes warmth, friendliness, approachability, and simplicity.
  • Color & Typography: Recommends a soft color system, rounded shapes, and friendly typography for comfortable reading.
  • Components & Interaction: Defines cards, buttons, forms, navigation with rounded corners, gentle shadows, and consistent micro-interactions.
  • Use Case: When building consumer apps like social, lifestyle, or educational tools, apply the guidelines to achieve a cozy, inviting UI.

Quick Start

Create a warm UI concept with rounded corners, soft colors, and clear typography for the target screen.

Frequently Asked Questions about ui-skills

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

FAQPage Schema
How do I design a warm and friendly user interface for a consumer app?▼

To design a warm and friendly user interface, use a soft color palette, rounded shapes, and comfortable typography to ensure visual approachability. This skill standardizes these elements across mobile and web apps to create a cohesive, inviting experience.

What is included in a warm UI design system?▼

A warm UI design system includes color systems, typography, components, motion guidelines, and accessibility rules. It defines cards, buttons, and forms with rounded corners and gentle shadows to maintain consistency across product interfaces.

Can I apply these UI design guidelines to both mobile and web apps?▼

Yes, these UI design guidelines apply to both mobile and web apps. They provide responsive behavior and component-level guidelines to ensure your warm and friendly interface adapts consistently across different screen sizes.

How do I ensure accessibility when using a soft color palette?▼

To ensure accessibility with a soft color palette, follow the accessibility requirements provided in the design guidance. This skill balances warm, approachable aesthetics with accessibility standards to maintain readability and inclusive interaction.

What is the best way to standardize micro-interactions for friendly components?▼

The best way to standardize micro-interactions for friendly components is to define consistent motion and navigation guidelines. This skill provides rules for gentle shadows and rounded corners to create cozy interactions for social or educational tools.

Related Skills

Explore More Design & Creative Skills→
LerianStudioLerianStudio
205

pre-dev-prd-creation

Generate a complete PRD with problem discovery, user stories, and success metrics.

Official
Basic
yrlanrteixeirayrlanrteixeira

minimalist-ui

Generate minimalist document-style web interfaces with warm monochrome palettes.

Community
Advanced
lord-vinayaklord-vinayak

contrast-checker

Calculate color contrast ratios and evaluate WCAG 2.2 compliance.

Community
Advanced
anonymouswhite07anonymouswhite07

minimalist-ui

Generate a minimalist UI protocol with strict typography and muted color rules for dashboards and editors.

Community
Advanced