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

jem-ui-components

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a comprehensive reference for the jem-ui component library, including prop definitions, component variants, design tokens, setup steps, and common mistakes to avoid re-implementing UI elements.

Core Features & Use Cases

  • Detailed component catalog covering forms, navigation, data display, and feedback with examples and token references.
  • Setup and integration guidance for React projects using jem-ui, including style imports and Tailwind preset configuration.
  • Practical usage scenarios and best practices to ensure consistent UI implementation across projects.

Quick Start

Provide ready-to-use React snippets and guidance for common jem-ui components.

Frequently Asked Questions about jem-ui-components

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

FAQPage Schema
How do I implement React UI components using design tokens and variants?▼

To implement React UI components using design tokens and variants, reference the component catalog for prop definitions, style imports, and practical usage examples. It covers forms, navigation, data display, and feedback elements to ensure consistent adoption.

What is the setup process for integrating a React component library with Tailwind?▼

The setup process involves configuring the Tailwind preset and importing the necessary stylesheets into your React project. This ensures the design tokens render correctly across all UI elements.

Can I use these React components for forms and navigation simultaneously?▼

Yes, you can use these React components for forms and navigation simultaneously. The reference covers multiple categories including forms, navigation, data display, and feedback, providing practical usage scenarios for each.

What's the best way to avoid re-implementing UI elements in React projects?▼

The best way to avoid re-implementing UI elements is to follow the component reference for accurate prop definitions, variants, and design tokens. Adopting these usage patterns prevents duplicate UI code.

Why does my React component styling break after importing the UI library?▼

React component styling breaks when the Tailwind preset configuration is incomplete or style imports are missing. Verify your setup steps against the integration guidance to ensure tokens apply correctly.

Related Skills

Explore More Software Engineering Skills→
somachaksomachak

modern-css-architecture

Standardize design tokens and component styling patterns for Tailwind-based React projects.

Community
Intermediate
andrewle9510andrewle9510

fd-patterns

Design cohesive page patterns for full-page UI experiences.

Community
Basic
alongor666alongor666
2

skill-quality-validator

Validate Claude skills against official quality standards and generate scored reports.

Community
Intermediate
s0lci700s0lci700
1

svelte-native

Convert bits-ui or shadcn-svelte components into native Svelte 5 with CSS and design tokens.

Community
Advanced