skills.rest
Abdullahmohammadaref
AbdullahmohammadarefCOMMUNITY
Explore all skills by this author →
GitHub

react-components

Build and audit React UI components using Atomic Design and Radix primitives.

Updated May 6, 2026
Search Tags:#accessibility#react#monorepo#shadcn-ui#ui-components#radix-ui#atomic-design
One-click install
npx skills add https://github.com/Abdullahmohammadaref/acar --skill react-components-abdullahmohammadaref
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-components
Source: https://github.com/Abdullahmohammadaref/acar/tree/main/.agents/skills/react-components
Command: npx skills add https://github.com/Abdullahmohammadaref/acar --skill react-components-abdullahmohammadaref

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Streamline the creation, modification, and review of React UI components by codifying design patterns, accessibility primitives, and monorepo conventions.

Core Features & Use Cases

  • Atomic Design guidance: atoms, molecules, organisms, templates, and pages
  • shadcn/ui integration and customization, Radix UI primitives, and responsive patterns
  • Monorepo placement rules for shared vs app-specific components across teams

Quick Start

Identify a component you want to standardize and apply the Atomic Design taxonomy and Radix/shadcn UI guidelines to implement or revise it.

Frequently Asked Questions about react-components

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

FAQPage Schema
How do I structure React UI components using Atomic Design in a monorepo?▼

Apply Atomic Design taxonomy to categorize React UI components into atoms, molecules, organisms, templates, and pages, enforcing consistent structure and reusability across shared and app-specific monorepo directories.

What is the best way to standardize shadcn/ui and Radix UI components across multiple projects?▼

Standardize shadcn/ui and Radix UI components by applying consistent accessibility primitives, styling conventions, and monorepo placement rules to ensure uniform UI component behavior across multiple projects.

How does Atomic Design improve accessibility in React applications?▼

Atomic Design improves React accessibility by codifying Radix UI primitives into base atoms and molecules, ensuring foundational accessible behaviors propagate consistently upward through complex organisms and page layouts.

Can I use this approach to audit existing React component libraries?▼

Yes, you can audit existing React UI components by reviewing them against Atomic Design taxonomy, shadcn/ui conventions, and Radix UI accessibility primitives to identify structural inconsistencies and accessibility gaps.

When should I place a React component in a shared monorepo package versus an app-specific directory?▼

Place React components in shared monorepo packages when they enforce cross-team reusability and standardized accessibility, and use app-specific directories for localized UI components that do not require global taxonomy consistency.

Related Skills

Explore More Software Engineering Skills→
LimaTechnologiesLimaTechnologies

shadcn-ui

Implement shadcn/ui components in React and Next.js projects.

Community
Advanced
WellApp-aiWellApp-ai
341

test-hardening

Convert QA Contract criteria into Jest, Storybook, and Playwright regression tests.

Official
Advanced
lexand-devlexand-dev

expo-tailwind-setup

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

Community
Intermediate
mgd34msumgd34msu
4

chakra-ui

Provides reusable, themeable, accessible React UI components for Chakra UI v3 projects.

Community
Intermediate