skills.rest
wibus-wee
wibus-weeCOMMUNITY
Explore all skills by this author →
Website𝕏@wibus_weeGitHub

userinterface-wiki

Guide web UI/UX design with animation, typography, and CSS best practices.

54|7|Updated May 29, 2026
Search Tags:#typography#ui/ux#visual design#web design#animation principles#audio feedback#css pseudo-elements#timing functions#exit animations
One-click install
npx skills add https://github.com/wibus-wee/cradle-app --skill userinterface-wiki-wibus-wee
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: userinterface-wiki
Source: https://github.com/wibus-wee/cradle-app/tree/main/.agents/skills/userinterface-wiki
Command: npx skills add https://github.com/wibus-wee/cradle-app --skill userinterface-wiki-wibus-wee

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill provides a comprehensive guide to UI/UX best practices for web interfaces, ensuring consistency and best user experience.

Core Features & Use Cases

  • Animation Principles: Covers Disney's 12 principles adapted for web animations.
  • Timing Functions: Explains the use of timing functions for various motion scenarios.
  • Exit Animations: Guidelines for proper AnimatePresence usage and exit animations.
  • CSS Pseudo Elements: Best practices for using pseudo-elements in CSS for visual effects.
  • Audio Feedback: When and how to use sound in UI for accessibility and feedback.
  • Typography: CSS typography best practices for readability and consistency.
  • Visual Design: CSS design fundamentals for visual polish and clarity.
  • Use Case: Use this Skill to improve the UI/UX of your web application by following the guidelines for animations, transitions, and visual design principles.

Quick Start

Use the 'userinterface-wiki' skill to review the UI/UX guidelines for web interfaces.

Frequently Asked Questions about userinterface-wiki

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

FAQPage Schema
What are the best practices for web animation timing functions and exit animations?▼

Web animation timing functions and exit animations should follow Disney's 12 adapted principles, utilizing proper AnimatePresence usage and appropriate timing functions for various motion scenarios to ensure consistent interface transitions.

How do I apply Disney's 12 animation principles to web interface design?▼

Disney's 12 animation principles can be applied to web interface design by adapting them to CSS timing functions and exit animations, ensuring motion scenarios enhance user experience and maintain visual consistency.

When should I use CSS pseudo-elements for visual effects in web design?▼

CSS pseudo-elements should be used for visual effects in web design when you need to optimize interface quality, applying best practices for visual polish and clarity without compromising structural semantics.

How do I use audio feedback in UI for accessibility and user interaction?▼

Audio feedback in UI should be implemented for accessibility and feedback by following specific guidelines on when and how to use sound, ensuring it enhances user experience without causing unnecessary distraction.

What CSS typography best practices should I follow for web readability?▼

CSS typography best practices for web readability involve applying consistent typographic rules and visual design fundamentals, ensuring text clarity and uniformity across your interface to optimize overall user experience.

Do I need prior web development knowledge to use these UI/UX guidelines?▼

Yes, applying these UI/UX guidelines requires knowledge of web design principles and implementation techniques, as the skill focuses on optimizing interface quality through advanced CSS and animation best practices.

Related Skills

Explore More Design & Creative Skills→
Free-The-AiFree-The-Ai
833

emil-design-eng

Guide UI design with animation, accessibility, and performance principles.

Official
Advanced
gavin100305gavin100305
1

userinterface-wiki

Enforce web UI best practices for motion, styling, accessibility, and UX heuristics during code review.

Community
Intermediate
dylantarredylantarre
38

animation-principles

Map Disney's 12 animation principles to UI motion guidelines.

Community
Basic
distribucionesfayosmoreno-sysdistribucionesfayosmoreno-sys

ui-visual-validator

Validate UI modifications for visual regression, compliance, and accessibility.

Community
Advanced