skills.rest
Fivents
FiventsOFFICIAL
Explore all skills by this author →
WebsiteGitHub

totem-ui-design

Design touch-first check-in interfaces for event totems with accessible components.

Updated Feb 16, 2026
Search Tags:#accessibility#ui-design#design-patterns#touch#kiosk#totem#event-checkin
One-click install
npx skills add https://github.com/Fivents/one-id --skill totem-ui-design
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: totem-ui-design
Source: https://github.com/Fivents/one-id/tree/main/.claude/skills/totem-ui-design
Command: npx skills add https://github.com/Fivents/one-id --skill totem-ui-design

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill provides production-ready Totem UI design patterns that ensure check-in interfaces are beautiful, accessible, and performant for event-based kiosks.

Core Features & Use Cases

  • Touch-first design with large, easily tappable targets and clear feedback.
  • Accessible UI with high contrast, visible focus states, and keyboard/screen-reader compatibility.
  • Performance-conscious animations and smooth transitions across portrait and landscape tot em setups.
  • Use Case: Deploy a kiosk UI at an event that guides attendees through check-in with immediate visual feedback and minimal cognitive load.

Quick Start

Prototype a touch-friendly totem screen with large targets, clear feedback, and accessible contrast to validate the design.

Frequently Asked Questions about totem-ui-design

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

FAQPage Schema
How do I design an accessible kiosk UI for event check-in?▼

Totem check-in UI design requires touch-first interactions with large tappable targets, high contrast for accessibility, and clear visual feedback. It supports portrait and landscape orientations to provide production-grade kiosk experiences across various event environments.

Can I build a touch-first kiosk interface that supports both portrait and landscape orientations?▼

Yes, you can build touch-first kiosk interfaces supporting both portrait and landscape orientations. The design patterns include performance-conscious animations and reusable design tokens that adapt smoothly across different physical totem setups.

What is the best way to ensure high performance and accessibility for physical totem screens?▼

The best way to ensure high performance and accessibility for physical totem screens is to implement reusable design tokens, respect user motion preferences, and maintain keyboard compatibility alongside large touch targets for seamless attendee interactions.

How do I prototype a touch-friendly totem screen to validate my event check-in design?▼

You prototype a touch-friendly totem screen by applying accessible contrast, large touch targets, and immediate visual feedback. This validates the event check-in design by ensuring smooth transitions and minimal cognitive load for attendees.

Does totem UI design require screen-reader and keyboard compatibility for event kiosks?▼

Yes, totem UI design requires screen-reader and keyboard compatibility for event kiosks. Accessible UI patterns ensure visible focus states and high contrast, allowing users with diverse needs to navigate the check-in process effectively.

Related Skills

Explore More Design & Creative Skills→
FiventsFivents

kiosk-browser-control

Configures browser kiosk mode to disable navigation, context menus, and keyboard shortcuts.

Official
Intermediate
h4vzzh4vzz
33

Frontend Design

Generate accessible React, Vue, Svelte, or HTML components with design tokens.

Community
Advanced
SylphxAISylphxAI
4

billing

Integrate Stripe payments with webhook signature verification and idempotent event processing.

Official
Intermediate
toddmoytoddmoy
1

responsive layout

Build mobile-first responsive layouts with Tailwind CSS, Grid, and Flexbox.

Community
Advanced