skills.rest
MolcajeteAI
MolcajeteAIOFFICIAL
Explore all skills by this author →
GitHub

react-components

Guide React UI component development with Atomic Design and shadcn/ui conventions.

2|1|Updated Nov 13, 2025
Search Tags:#react#responsive design#atomic design#shadcn/ui#monorepo#ui components#radix ui
One-click install
npx skills add https://github.com/MolcajeteAI/plugin --skill react-components-molcajeteai
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-components
Source: https://github.com/MolcajeteAI/plugin/tree/main/molcajete/skills/react-components
Command: npx skills add https://github.com/MolcajeteAI/plugin --skill react-components-molcajeteai

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill streamlines the creation, modification, and review of React UI components by providing clear guidelines and best practices for modern web development.

Core Features & Use Cases

  • Atomic Design: Enforces a structured component hierarchy (Atoms to Pages) for maintainability.
  • shadcn/ui & Radix UI: Integrates popular libraries for accessible, customizable UI elements.
  • Responsive Design: Guides implementation of mobile-first, responsive layouts.
  • Monorepo Placement: Defines rules for shared vs. app-specific component organization.
  • Use Case: When developing a new feature, use this Skill to ensure all new React components adhere to the project's design system, are built with accessibility in mind, and are correctly placed within the monorepo structure.

Quick Start

Use the react-components skill to generate a new Button component following Atomic Design principles and shadcn/ui conventions.

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 components using Atomic Design principles?▼

Atomic Design structures React components into a clear hierarchy from Atoms to Pages, ensuring maintainability and consistent UI development across your project.

What's the best way to organize shared UI components in a monorepo?▼

Monorepo placement rules define where shared versus app-specific UI components should live, ensuring maintainable organization and consistent imports across different applications.

Does shadcn/ui work with Radix UI for building accessible React components?▼

Yes, shadcn/ui integrates with Radix UI to provide accessible, customizable React UI elements, combining Radix's accessibility primitives with shadcn's styling conventions.

How do I implement responsive design patterns in React?▼

Implement responsive design in React using mobile-first layout patterns, ensuring your UI components adapt fluidly across different screen sizes and devices.

When do I need to define naming conventions and component classification for a React design system?▼

Defining naming conventions and component classification is needed when establishing a React design system to enforce consistency, accessibility, and structured Atomic Design hierarchy across teams.

Related Skills

Explore More Software Engineering Skills→
vessuxvessux
1

using-git-worktrees

Create an isolated Git worktree workspace for feature development.

Community
Advanced
ManuLostaManuLosta

shadcn-ui

Install and customize accessible React UI components using the shadcn CLI.

Community
Intermediate
AppleLampsAppleLamps

new-component

Generate React component scaffolds with server/client templates and TypeScript props interfaces.

Community
Intermediate
dawsonblockdawsonblock

frontend-design

Design and implement responsive UI interfaces for web applications using React and CSS frameworks.

Community
Advanced