skills.rest
xizot
xizotCOMMUNITY
Explore all skills by this author →
GitHub

shared-ui-components

Reuse shared-ui components in TypeScript React projects with explicit import paths.

Updated Aug 23, 2026
Search Tags:#accessibility#React#Tailwind#Radix#import-patterns#UI-components#shared-ui
One-click install
npx skills add https://github.com/xizot/shared-ui --skill shared-ui-components
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shared-ui-components
Source: https://github.com/xizot/shared-ui/tree/main/.shared/skills/shared-ui-components
Command: npx skills add https://github.com/xizot/shared-ui --skill shared-ui-components

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a centralized, practical guide for AI agents to reuse installed shared-ui components located in src/shared/. It prevents re-creation of UI elements and promotes consistency, accessibility, and maintainability across projects.

Core Features & Use Cases

  • Guidance on locating components in src/shared/components/ui/[component-name].tsx.
  • Import pattern clarity: always import from '@/shared/components/ui/[component-name]' to ensure consistency across codebases.
  • Usage best practices for common components like Button, Input, Card, and Layout pieces, including accessibility and theming with Tailwind + Radix.
  • Use Case: quickly scaffold a new page by reusing pre-installed components instead of building from scratch.

Quick Start

To begin, verify the required component exists in src/shared/components/ui/, install missing components with: npx @xizot/shared-ui add [component-name], and import from '@/shared/components/ui/[component-name]'.

Frequently Asked Questions about shared-ui-components

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

FAQPage Schema
How do I import shared UI components in a React project without recreating them?▼

Import shared UI components using explicit paths like '@/shared/components/ui/[component-name]'. This enforces consistency across your React codebase by reusing pre-installed elements instead of building from scratch.

What's the best way to scaffold a new React page using existing UI components?▼

Scaffold React pages by verifying required elements exist in src/shared/components/ui/ and importing them directly. This prevents re-creation of UI elements and promotes maintainability, accessibility, and consistent design across projects.

Does this shared UI component approach work with Tailwind and Radix?▼

Yes, this approach works with Tailwind and Radix. It provides usage best practices for common components like Button, Input, and Card, including accessibility and theming guidance tailored for this stack.

How do I add a missing UI component to my shared components directory?▼

Add missing components to your shared directory by running npx @xizot/shared-ui add [component-name]. Verify the component exists in src/shared/components/ui/ before importing it into your React project.

Why should I use explicit import paths for shared UI components in TypeScript?▼

Use explicit import paths for shared UI components to ensure consistency across codebases. Centralized imports from '@/shared/components/ui/[component-name]' prevent duplication, maintain accessibility standards, and streamline maintainability in TypeScript React projects.

Related Skills

Explore More Software Engineering Skills→
IDEA-on-ActionIDEA-on-Action

react-component

Generate React component files with PascalCase names and shadcn/ui integration.

Official
Intermediate
sgcarstrendssgcarstrends
21

heroui-components

Integrate and customize HeroUI components in web applications using TypeScript examples.

Official
Advanced
Thanh-aperoThanh-apero
1

ck:ui-styling

Create accessible React UI components with Radix UI and Tailwind CSS.

Community
Advanced
Lev-itLev-it

gpt-taste

Generate creative UI designs with Python randomization, AIDA structure, and GSAP animations.

Official
Advanced