skills.rest
jorggerojas
jorggerojasCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

components-ui

Organize React UI components with standardized folder structure and central exports.

1|Updated Jan 12, 2026
Search Tags:#typescript#testing#ui#react#components#organize#export
One-click install
npx skills add https://github.com/jorggerojas/next-skeleton-page --skill components-ui
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: components-ui
Source: https://github.com/jorggerojas/next-skeleton-page/tree/main/.cursor/skills/components-ui
Command: npx skills add https://github.com/jorggerojas/next-skeleton-page --skill components-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Organizes and standardizes UI components across projects by enforcing a consistent folder structure, default exports, and a centralized export surface.

Core Features & Use Cases

  • Centralizes custom components in a standardized folder structure: src/ui/custom/[ComponentName]/ with a default export, tests, and an index file.
  • Enforces a central export surface at src/ui/custom/index.ts for convenient imports across the app.
  • Encourages tests for each component to ensure reliability and prevent regressions.

Quick Start

Place a new component under src/ui/custom/ComponentName/, ensure it exports by default and add a test and an entry in the central export.

Frequently Asked Questions about components-ui

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

FAQPage Schema
How do I organize React components into a reusable library structure?▼

To organize React components, place each component in a dedicated folder like src/ui/custom/[ComponentName]/ with a default export, tests, and an index file. Centralize these exports at src/ui/custom/index.ts for predictable imports across projects.

What is a barrel file and how does it centralize UI component exports?▼

A barrel file centralizes UI component exports by aggregating default exports from individual component folders into a single index.ts file, allowing consumers to import any component from one path, ensuring consistent access across the React application.

Does this React component organization approach require TypeScript?▼

This React component organization approach is designed for a modern TypeScript workflow, enforcing folder structures and default exports that align with TypeScript projects building reusable component libraries.

How do I set up tests for individual React UI components?▼

Set up tests for React UI components by placing a test file alongside the component within its dedicated folder structure, such as src/ui/custom/[ComponentName]/, ensuring reliability and preventing regressions for each component.

What is the best way to standardize UI component imports across multiple React projects?▼

Standardize UI component imports by enforcing a consistent folder structure with default exports and a central export surface at src/ui/custom/index.ts, allowing teams to maintain predictable imports across multiple projects.

Related Skills

Explore More Software Engineering Skills→
JimmyTranDevJimmyTranDev
1

meta-structure

Standardize TypeScript/React project layouts with directory and file placement rules.

Community
Intermediate
ogc-mapsogc-maps

add-map-component

Scaffold Storybook UI components with TSX, stories, and barrel exports.

Official
Intermediate
vietlinhh02vietlinhh02

Vitest

Run Vitest unit, integration, and React component tests with mocking and coverage analysis.

Community
Intermediate
WesleySmitsWesleySmits
6

scaffolding-react-components

Generate React/Next.js component scaffolds with TypeScript, CSS modules, tests, and Storybook.

Community
Advanced