ui-skills

Name: ui-skills
Availability: InStock
Author: gjwroot

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

Ready to run

npx skills add https://github.com/gjwroot/trae-skills-collection --skill ui-skills-gjwroot

💬 Prompt for ChatGPT / Claude Chat▼

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.