skills.rest
529-studio
529-studioOFFICIAL
Explore all skills by this author →
GitHub

kiosk-component

Standardize mobile-first PWA components for industrial shop-floor environments.

2|1|Updated Mar 25, 2026
Search Tags:#react#mobile-first#nextjs#pwa#ui-components#kiosk#factory-automation
One-click install
npx skills add https://github.com/529-studio/Vmarble-Warehouse-Management-Client --skill kiosk-component
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: kiosk-component
Source: https://github.com/529-studio/Vmarble-Warehouse-Management-Client/tree/main/.agents/skills/kiosk-component
Command: npx skills add https://github.com/529-studio/Vmarble-Warehouse-Management-Client --skill kiosk-component

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill addresses the challenge of building high-usability, mobile-first interfaces for factory workers operating in demanding, high-noise, and dusty environments.

Core Features & Use Cases

  • Standardized UI Components: Provides pre-built, touch-optimized components like BigButton and ScannerView that meet strict accessibility and ergonomic requirements.
  • Workflow Guardrails: Enforces mobile-first design patterns, such as 3-tap task completion limits and immediate sonner toast feedback, ensuring consistent user experiences.
  • Use Case: When developing a new shop-floor reporting screen, use these guidelines to ensure the interface is operable with gloves, uses correct input modes for mobile keyboards, and provides instant visual feedback for scanning operations.

Quick Start

Use the kiosk-component skill to generate a new mobile-first page structure that includes a scanner view and a primary action button for reporting cut results.

Frequently Asked Questions about kiosk-component

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

FAQPage Schema
How do I build mobile-first React components for factory shop-floor environments?▼

To build mobile-first React components for factory shop-floor environments, standardize development with touch-optimized UI elements, QR scanning workflows, and consistent feedback mechanisms ensuring accessibility and ergonomic touch target compliance for Next.js applications.

What is the best way to implement touch-optimized UI for gloved factory workers?▼

Implementing touch-optimized UI for gloved factory workers requires standardized components with strict ergonomic touch targets, immediate sonner toast feedback, and 3-tap task completion limits ensuring high-usability in high-noise and dusty industrial environments.

Does this approach work with Next.js to create PWA components for industrial automation?▼

Yes, this approach works with Next.js to create PWA components for industrial automation by facilitating mobile-specific input handling, correct keyboard input modes, and standardized QR scanning workflows directly within your Next.js application structure.

How do I add a QR scanning workflow to a mobile-first shop-floor reporting screen?▼

To add a QR scanning workflow to a mobile-first shop-floor reporting screen, generate a page structure including a ScannerView and a primary action button, ensuring instant visual feedback for scanning operations and strict accessibility compliance.

What are the limitations of using standard UI components in high-noise industrial environments?▼

Standard UI components often lack the strict accessibility standards, immediate sonner toast feedback, and mobile-specific input handling required to maintain high-usability and operability with gloves in high-noise, dusty factory automation environments.

Related Skills

Explore More Software Engineering Skills→
parisgroup-aiparisgroup-ai
1

mobile-pwa-usability

Validates mobile usability and PWA readiness for React/Next.js projects.

Official
Advanced
shogo-labsshogo-labs
12

revenue-snapshot

Fetch Stripe balance and payments to render a revenue dashboard.

Official
Intermediate
congiuluccongiuluc

notification-frontend

Implement accessible toast notifications and alert systems in React applications.

Community
Intermediate
T1nker-1220T1nker-1220

mobile-ui-standards

Enforce mobile-first UI standards with compact spacing and touch-friendly targets.

Community
Basic