skills.rest
Jem-Open
Jem-OpenOFFICIAL
Explore all skills by this author →
GitHub

jem-ui-patterns

Compose app-level UI patterns with @jem-open/jem-ui components.

3|1|Updated Mar 9, 2026
Search Tags:#accessibility#react#data-table#ui-patterns#component-composition#jem-ui
One-click install
npx skills add https://github.com/Jem-Open/jem-agent-skills --skill jem-ui-patterns
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: jem-ui-patterns
Source: https://github.com/Jem-Open/jem-agent-skills/tree/main/skills/jem-ui-patterns
Command: npx skills add https://github.com/Jem-Open/jem-agent-skills --skill jem-ui-patterns

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Guide AI agents in composing app-level UI patterns using @jem-open/jem-ui components to build forms, data views, modals, drawers, navigation, and feedback with consistent wiring and accessibility.

Core Features & Use Cases

  • Pattern-driven composition: Form layout, Data view, Modal workflow, Drawer panel, Navigation structure, and Feedback & notifications.
  • Accessibility-first: keyboard navigation, proper labeling, and screen reader friendly structure.
  • Real-world integration: promotes consistent UX across projects and accelerates feature delivery.

Quick Start

Install or import @jem-open/jem-ui and apply the described patterns across forms, data lists, and settings pages to achieve a cohesive UI system.

Frequently Asked Questions about jem-ui-patterns

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

FAQPage Schema
How do I build accessible React data tables and forms with consistent UI patterns?▼

Build accessible React data tables and forms by composing app-level UI patterns using @jem-open/jem-ui components like InputField and DataTable. This ensures keyboard navigation, proper labeling, and screen reader friendly structure across your project.

What is the best way to manage state and wiring for React modal and drawer workflows?▼

Manage state and wiring for React modal and drawer workflows by applying pattern-driven composition with Dialog and Drawer components. This approach provides consistent, accessible interfaces for real-world integration.

How do I add accessible navigation and feedback notifications to a React application?▼

Add accessible navigation and feedback notifications by composing UI patterns using Tabs, Alert, and Toaster components. This enforces logical spacing and keyboard navigation for a cohesive UX system.

Do I need specific dependencies to use jem-ui component composition patterns?▼

You need to install or import @jem-open/jem-ui to apply the component composition patterns. There are no other dependencies required to enforce accessible labeling and consistent interfaces.

Why should I use pattern-driven UI composition instead of building custom React components from scratch?▼

Pattern-driven UI composition accelerates feature delivery and promotes consistent UX across projects. It leverages pre-built patterns for forms, data views, and modals to enforce accessibility without building custom components.

When do I need to follow UI pattern composition guidelines for React interfaces?▼

Follow UI pattern composition guidelines when building forms, data views, modals, drawers, navigation, and feedback systems to ensure accessible labeling, logical spacing, and keyboard navigation across real-world projects.

Related Skills

Explore More Software Engineering Skills→
Jem-OpenJem-Open
3

jem-ui-components

Document @jem-open/jem-ui React component props, variants, and design tokens.

Official
Intermediate
vecearvecear

state-ux-flow-builder

Standardize loading, error, empty, and success states for data-fetching views.

Community
Advanced
thec3ukthec3uk

Frontend Accessibility

Guide frontend code to meet accessibility standards like ARIA and keyboard navigation.

Official
Basic
mgd34msumgd34msu
4

mantine

Develop React user interfaces with Mantine components and hooks.

Community
Intermediate