raphaelsalaja/userinterface-wikiMIT157 files

Userinterface Wiki

Name: Userinterface Wiki
Availability: InStock
Author: raphaelsalaja

UI/UX best practices for web interfaces. Use when reviewing animations, CSS, audio, typography, UX patterns, prefetching, or icon implementations. Covers 11 categories from animation principles to typography. Outputs file:line findings.

Use this skill View repository View on skills.sh

Specification

Skill ID: raphaelsalaja/userinterface-wiki/userinterface-wiki
Publisher: raphaelsalaja
Repository: userinterface-wiki
Installs: 0
Files: 157
License: MIT
Synced: Sep 23, 2026

How to use it

Open any RiverX project, open the Skills panel in the chat, and search for this identifier. The files are fetched from the source repository at install time.

raphaelsalaja/userinterface-wiki/userinterface-wikiInstalls these files

AGENTS.md
SKILL.md
metadata.json
rules/_sections.md
rules/_template.md
rules/a11y-reduced-motion-check.md
rules/a11y-toggle-setting.md
rules/a11y-visual-equivalent.md
rules/a11y-volume-control.md
rules/appropriate-confirmations-only.md
rules/appropriate-errors-warnings.md
rules/appropriate-no-decorative.md
rules/appropriate-no-high-frequency.md
rules/appropriate-no-punishing.md
rules/container-callback-ref.md
rules/container-guard-initial-zero.md
rules/container-no-excessive-use.md
rules/container-overflow-hidden.md
rules/container-transition-delay.md
rules/container-two-div-pattern.md
rules/container-use-resize-observer.md
rules/context-cleanup-nodes.md
rules/context-resume-suspended.md
rules/context-reuse-single.md
rules/design-filter-for-character.md
rules/design-noise-for-percussion.md
rules/design-oscillator-for-tonal.md
rules/duration-max-300ms.md
rules/duration-press-hover.md
rules/duration-shorten-before-curve.md
rules/duration-small-state.md
rules/easing-entrance-ease-out.md
rules/easing-exit-ease-in.md
rules/easing-for-state-change.md
rules/easing-linear-only-progress.md
rules/easing-natural-decay.md
rules/easing-no-linear-motion.md
rules/easing-transition-ease-in-out.md
rules/envelope-exponential-decay.md
rules/envelope-no-zero-target.md
rules/envelope-set-initial-value.md
rules/exit-key-required.md
rules/exit-matches-initial.md
rules/exit-prop-required.md
rules/exit-requires-wrapper.md
rules/impl-default-subtle.md
rules/impl-preload-audio.md
rules/impl-reset-current-time.md
rules/mode-pop-layout-for-lists.md
rules/mode-sync-layout-conflict.md
rules/mode-wait-doubles-duration.md
rules/morphing-aria-hidden.md
rules/morphing-consistent-viewbox.md
rules/morphing-group-variants.md
rules/morphing-jump-non-grouped.md
rules/morphing-reduced-motion.md
rules/morphing-spring-rotation.md
rules/morphing-strokelinecap-round.md
rules/morphing-three-lines.md
rules/morphing-use-collapsed.md
rules/native-backdrop-styling.md
rules/native-placeholder-styling.md
rules/native-selection-styling.md
rules/nested-consistent-timing.md
rules/nested-propagate-required.md
rules/none-context-menu-entrance.md
rules/none-high-frequency.md
rules/none-keyboard-navigation.md
rules/param-click-duration.md
rules/param-filter-frequency-range.md
rules/param-q-value-range.md
rules/param-reasonable-gain.md
rules/physics-active-state.md
rules/physics-no-excessive-stagger.md
rules/physics-spring-for-overshoot.md
rules/physics-subtle-deformation.md
rules/prefetch-hit-slop.md
rules/prefetch-keyboard-tab.md
rules/prefetch-not-everything.md
rules/prefetch-touch-fallback.md
rules/prefetch-trajectory-over-hover.md
rules/prefetch-use-selectively.md
rules/presence-disable-interactions.md
rules/presence-hook-in-child.md
rules/presence-safe-to-remove.md
rules/pseudo-content-required.md
rules/pseudo-first-line-styling.md
rules/pseudo-hit-target-expansion.md
rules/pseudo-marker-styling.md
rules/pseudo-over-dom-node.md
rules/pseudo-position-relative-parent.md
rules/pseudo-z-index-layering.md
rules/spring-for-gestures.md
rules/spring-for-interruptible.md
rules/spring-params-balanced.md
rules/spring-preserves-velocity.md
rules/staging-dim-background.md
rules/staging-one-focal-point.md
rules/staging-z-index-hierarchy.md
rules/timing-consistent.md
rules/timing-no-entrance-context-menu.md
rules/timing-under-300ms.md
rules/transition-name-cleanup.md
rules/transition-name-required.md
rules/transition-name-unique.md
rules/transition-over-js-library.md
rules/transition-style-pseudo-elements.md
rules/type-antialiased-on-retina.md
rules/type-disambiguation-stylistic-set.md
rules/type-font-display-swap.md
rules/type-justify-with-hyphens.md
rules/type-letter-spacing-uppercase.md
rules/type-no-font-synthesis.md
rules/type-oldstyle-nums-for-prose.md
rules/type-opentype-contextual-alternates.md
rules/type-optical-sizing-auto.md
rules/type-proper-fractions.md
rules/type-slashed-zero.md
rules/type-tabular-nums-for-data.md
rules/type-text-wrap-balance-headings.md
rules/type-text-wrap-pretty.md
rules/type-underline-offset.md
rules/type-variable-weight-continuous.md
rules/ux-aesthetic-usability.md
rules/ux-cognitive-load-reduce.md
rules/ux-common-region-boundaries.md
rules/ux-doherty-perceived-speed.md
rules/ux-doherty-under-400ms.md
rules/ux-fitts-hit-area.md
rules/ux-fitts-target-size.md
rules/ux-goal-gradient-progress.md
rules/ux-hicks-minimize-choices.md
rules/ux-jakobs-familiar-patterns.md
rules/ux-millers-chunking.md
rules/ux-pareto-prioritize-features.md
rules/ux-peak-end-finish-strong.md
rules/ux-postels-accept-messy-input.md
rules/ux-pragnanz-simplify.md
rules/ux-progressive-disclosure.md
rules/ux-proximity-grouping.md
rules/ux-serial-position.md
rules/ux-similarity-consistency.md
rules/ux-teslers-complexity.md
rules/ux-uniform-connectedness.md
rules/ux-von-restorff-emphasis.md
rules/ux-zeigarnik-show-incomplete.md
rules/visual-animate-shadow-pseudo.md
rules/visual-border-alpha-colors.md
rules/visual-button-shadow-anatomy.md
rules/visual-concentric-radius.md
rules/visual-consistent-spacing-scale.md
rules/visual-layered-shadows.md
rules/visual-no-pure-black-shadow.md
rules/visual-shadow-direction.md
rules/visual-shadow-matches-elevation.md
rules/weight-duration-matches-action.md
rules/weight-match-action.md

What this skill tells the agent

User Interface Wiki

Comprehensive UI/UX best practices guide for web interfaces. Contains 152 rules across 12 categories, prioritized by impact to guide automated code review and generation.

When to Apply

Reference these guidelines when:

Implementing or reviewing animations (CSS transitions, Motion/Framer Motion)
Choosing between springs, easing curves, or no animation
Working with AnimatePresence and exit animations
Writing CSS with pseudo-elements or View Transitions API
Adding audio feedback or procedural sound to UI
Building morphing icon components
Animating container width/height with dynamic content
Designing UI that respects cognitive psychology (Fitts's, Hick's, Miller's laws)
Implementing predictive prefetching for perceived performance
Setting up typography, OpenType features, or numeric formatting

Rule Categories by Priority

Priority	Category	Impact	Prefixes
1	Animation Principles	CRITICAL	`timing-`, `physics-`, `staging-`
2	Timing Functions	HIGH	`spring-`, `easing-`, `duration-`, `none-`
3	Exit Animations	HIGH	`exit-`, `presence-`, `mode-`, `nested-`
4	CSS Pseudo Elements	MEDIUM	`pseudo-`, `transition-`, `native-`
5	Audio Feedback	MEDIUM	`a11y-`, `appropriate-`, `impl-`, `weight-`
6	Sound Synthesis	MEDIUM	`context-`, `envelope-`, `design-`, `param-`
7	Morphing Icons	LOW	`morphing-`
8	Container Animation	MEDIUM	`container-`
9	Laws of UX	HIGH	`ux-`
10	Predictive Prefetching	MEDIUM	`prefetch-`
11	Typography	MEDIUM	`type-`
12	Visual Design	HIGH	`visual-`

Quick Reference

1. Animation Principles (CRITICAL)

timing-under-300ms - User animations must complete within 300ms
timing-consistent - Similar elements use identical timing values
timing-no-entrance-context-menu - Context menus: no entrance animation, exit only
easing-natural-decay - Use exponential ramps for natural decay, not linear
easing-no-linear-motion - Linear easing only for progress indicators
physics-active-state - Interactive elements need :active scale transform
physics-subtle-deformation - Squash/stretch in 0.95-1.05 range
physics-spring-for-overshoot - Springs for overshoot-and-settle, not easing
physics-no-excessive-stagger - Stagger delays under 50ms per item
staging-one-focal-point - One prominent animation at a time
staging-dim-background - Dim modal/dialog backgrounds
staging-z-index-hierarchy - Animated elements respect z-index layers

2. Timing Functions (HIGH)

spring-for-gestures - Gesture-driven motion (drag, flick) must use springs
spring-for-interruptible - Interruptible motion must use springs
spring-preserves-velocity - Springs preserve input energy on release
spring-params-balanced - Avoid excessive oscillation in spring params
easing-for-state-change - System state changes use easing curves
easing-entrance-ease-out - Entrances use ease-out
easing-exit-ease-in - Exits use ease-in
easing-transition-ease-in-out - View transitions use ease-in-out
easing-linear-only-progress - Linear only for progress/time representation
duration-press-hover - Press/hover: 120-180ms
duration-small-state - Small state changes: 180-260ms
duration-max-300ms - User-initiated max 300ms
duration-shorten-before-curve - Fix slow feel with shorter duration, not curve
none-high-frequency - No animation for high-frequency interactions
none-keyboard-navigation - Keyboard navigation instant, no animation
none-context-menu-entrance - Context menus: no entrance, exit only

3. Exit Animations (HIGH)

exit-requires-wrapper - Conditional motion elements need AnimatePresence wrapper
exit-prop-required - Elements in AnimatePresence need exit prop
exit-key-required - Dynamic lists need unique keys, not index
exit-matches-initial - Exit mirrors initial for symmetry
presence-hook-in-child - useIsPresent in child, not parent
presence-safe-to-remove - Call safeToRemove after async cleanup
presence-disable-interactions - Disable interactions on exiting elements
mode-wait-doubles-duration - Mode "wait" doubles duration; halve timing
mode-sync-layout-conflict - Mode "sync" causes layout conflicts
mode-pop-layout-for-lists - Use popLayout for list reordering
nested-propagate-required - Nested AnimatePresence needs propagate prop
nested-consistent-timing - Coordinate parent-child exit durations

4. CSS Pseudo Elements (MEDIUM)

pseudo-content-required - ::before/::after need content property
pseudo-over-dom-node - Pseudo-elements over extra DOM nodes for decoration
pseudo-position-relative-parent - Parent needs position: relative
pseudo-z-index-layering - Z-index for correct pseudo-element layering
pseudo-hit-target-expansion - Negative inset for larger hit targets
pseudo-marker-styling - Use ::marker for custom list bullet styles
pseudo-first-line-styling - Use ::first-line for typographic treatments
transition-name-required - View transitions need view-transition-name
transition-name-unique - Each transition name unique during transition
transition-name-cleanup - Remove transition name after completion
transition-over-js-library - Prefer View Transitions API over JS libraries
transition-style-pseudo-elements - Style ::view-transition-group for custom animations
native-backdrop-styling - Use ::backdrop for dialog backgrounds
native-placeholder-styling - Use ::placeholder for input styling
native-selection-styling - Use ::selection for text selection styling

5. Audio Feedback (MEDIUM)

a11y-visual-equivalent - Every sound must have a visual equivalent
a11y-toggle-setting - Provide toggle to disable sounds
a11y-reduced-motion-check - Respect prefers-reduced-motion for sound
a11y-volume-control - Allow independent volume adjustment
appropriate-no-high-frequency - No sound on typing or keyboard nav
appropriate-confirmations-only - Sound for payments, uploads, submissions
appropriate-errors-warnings - Sound for errors that can't be overlooked
appropriate-no-decorative - No sound on hover or decorative moments
appropriate-no-punishing - Inform, don't punish with harsh sounds
impl-preload-audio - Preload audio files to avoid delay
impl-default-subtle - Default volume subtle (0.3), not loud
impl-reset-current-time - Reset currentTime before replay
weight-match-action - Sound weight matches action importance
weight-duration-matches-action - Sound duration matches action duration

6. Sound Synthesis (MEDIUM)

context-reuse-single - Reuse single AudioContext, don't create per sound
context-resume-suspended - Resume suspended AudioContext before playing
context-cleanup-nodes - Disconnect audio nodes after playback
envelope-exponential-decay - Exponential ramps for natural decay
envelope-no-zero-target - Exponential ramps target 0.001, not 0
envelope-set-initial-value - Set initial value before ramping
design-noise-for-percussion - Filtered noise for clicks/taps
design-oscillator-for-tonal - Oscillators with pitch sweep for tonal sounds
design-filter-for-character - Bandpass filter to shape percussive sounds
param-click-duration - Click sounds: 5-15ms duration
param-filter-frequency-range - Click filter: 3000-6000Hz
param-reasonable-gain - Gain under 1.0 to prevent clipping
param-q-value-range - Filter Q: 2-5 for focused but natural

7. Morphing Icons (LOW)

morphing-three-lines - Every icon uses exactly 3 SVG lines
morphing-use-collapsed - Unused lines use collapsed constant
morphing-consistent-viewbox - All icons share same viewBox (14x14)
morphing-group-variants - Rotational variants share group and base lines

Use this skill in a project

Open any RiverX project, search the Skills panel for raphaelsalaja/userinterface-wiki/userinterface-wiki, and install it in one click.

Use this skill