skills.rest
allenlin90
allenlin90COMMUNITY
Explore all skills by this author →
GitHub

frontend-ui-components

Render and compose UI primitives from the @eridu/ui library.

1|Updated Jan 2, 2025
Search Tags:#ui#accessibility#react#tailwind#design-system#shadcn#shared-components
One-click install
npx skills add https://github.com/allenlin90/eridu-services --skill frontend-ui-components
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-ui-components
Source: https://github.com/allenlin90/eridu-services/tree/main/.agent/skills/frontend-ui-components
Command: npx skills add https://github.com/allenlin90/eridu-services --skill frontend-ui-components

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill provides guidelines for building and using shared UI primitives from the @eridu/ui package, ensuring consistency, accessibility, and maintainability across apps.

Core Features & Use Cases

  • Unified component library: Leverages the central @eridu/ui package to prevent duplication and maintain visual consistency across erify_creators and erify_studios.
  • Styling patterns: Emphasizes Tailwind CSS v4 with cn utility for safe class merging and predictable theming.
  • Composition-first design: Encourages building apps by composing small primitives rather than large monoliths, enabling reuse and simpler testing.
  • Usage guidance: Includes examples like Button, Input, DatePicker usage, and wrapping 3rd party components to fit the design system.

Quick Start

Import and use a shared Button from @eridu/ui in your component to begin building UI.

Frequently Asked Questions about frontend-ui-components

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

FAQPage Schema
How do I build consistent React UI components with Tailwind and Shadcn?▼

Build consistent React UI components by rendering and composing primitives from the shared @eridu/ui library, which enforces Shadcn design conventions and accessible styling patterns across your application.

What is the best way to share UI primitives between multiple React applications?▼

Share UI primitives by importing them from a central component library like @eridu/ui, preventing duplication and ensuring visual consistency across applications like erify_creators and erify_studios.

How do I safely merge Tailwind CSS classes in a shared component library?▼

Safely merge Tailwind CSS classes using the cn utility provided by the @eridu/ui package, which ensures predictable theming and prevents style conflicts when composing shared UI primitives.

Can I wrap third-party React components to fit my design system?▼

Yes, you can wrap third-party React components to fit your design system by applying the composition-first approach and styling patterns outlined by the shared @eridu/ui primitives.

Does this component library approach support accessible styling patterns?▼

Yes, the component library approach supports accessible styling patterns by enforcing adherence to project design conventions and utilizing Tailwind CSS v4 within the shared @eridu/ui primitives.

When should I compose small UI primitives instead of building large monolith components?▼

Compose small UI primitives instead of large monoliths to enable component reuse, simplify testing, and ensure maintainability across apps built with React and Tailwind.

Related Skills

Explore More Software Engineering Skills→
yurkennyurkenn
1

tailwind-setup

Configure Tailwind CSS v4 in Expo projects with NativeWind and react-native-css.

Community
Intermediate
kentojekentoje
2

ui-skills

Enforce UI constraints for accessible agent interfaces using Tailwind defaults.

Community
Basic
Ben1821Ben1821

ui-styling

Automate UI component installation, styling, and theming with shadcn/ui and Tailwind CSS.

Community
Advanced
NammDevNammDev
2

ui-styling

Integrate shadcn/ui with Tailwind CSS for React UI styling.

Community
Intermediate