skills.rest
oxie
oxieCOMMUNITY
Explore all skills by this author →
GitHub

reui-library

Reuse and adapt source-owned React UI components from a tested ReUI starter library.

Updated Sep 6, 2026
Search Tags:#typescript#react#component library#tailwind#ui components#form validation#reui
One-click install
npx skills add https://github.com/oxie/prime-agent-skills --skill reui-library-oxie
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: reui-library
Source: https://github.com/oxie/prime-agent-skills/tree/main/reui-library
Command: npx skills add https://github.com/oxie/prime-agent-skills --skill reui-library-oxie

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires react, react-dom, @base-ui/react, clsx, tailwind-merge, class-variance-authority, tailwindcss, vite, vitest, and includes assets (resource) components.

What problem does it solve? Building application UI from scratch or from untested snippets leads to broken form semantics, fake persistence states, and inconsistent styling. This Skill supplies actual source-owned React components—forms, panels, empty/loading/error states, and tables—that you copy into your project and adapt, rather than design advice alone. ## Core Features & Use Cases - Source-owned component starter: Six primitive families (Button, Card, Field, Input, Empty, Table) and four working compositions (ProfileForm, ResourceTable, DataState, Panel) adapted from pinned ReUI source with retained MIT notices. - Honest behavior contracts: Forms validate before dispatch, prevent duplicate pending submission, separate rejection from confirmed completion, and never fake remote persistence; tables keep stable IDs and semantic sort state. - Verified isolated demo: Locked dependencies, strict typecheck, 26 Vitest behavior tests, production build, and a local-only preview at 127.0.0.1:5179 for explicitly authorized trials. - Use Case: When asked to scaffold a settings page with a profile form and a searchable resource table, copy the relevant compositions into the host project, wire the callbacks to real application behavior, and run the project's own typecheck and tests. ## Quick Start Ask the agent to use the ReUI starter to add a profile form and resource table to your React project, adapting the source to your existing tokens and wiring the save callback to your real data layer.

Frequently Asked Questions about reui-library

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

FAQPage Schema
How do I reuse ReUI components in my React project?▼

Copy only the needed source files and their dependency closure from the starter into your project, preserving imports, tokens, and MIT notices. Inspect the actual props in src/index.ts first, then connect callbacks to your application's real behavior and run your own typecheck and tests.

What components are included in the ReUI starter?▼

The starter includes six primitive families (Button, Card, Field, Input, Empty, Table) and four compositions: ProfileForm, ResourceTable, DataState, and Panel. It is a small selected subset of the upstream ReUI catalogue, not the full library.

Does the ReUI starter work with React Server Components?▼

The interactive compositions must be imported inside an explicitly marked client component in RSC frameworks. The Vite-tested source package is not verified as a direct Server Component import and does not create that boundary for you.

What are the limitations of this ReUI starter?▼

Advanced data grids, filter trees, steppers, upload galleries, Gantt charts, and calendars are deliberately excluded due to known upstream defects. The demo's save is local memory only, and the starter does not certify a modified consumer's accessibility, security, or performance.

How do I run the ReUI starter demo and tests?▼

Copy the starter to an owned working directory, then run npm ci --ignore-scripts, npm run typecheck, npm test, npm run build, and npm run preview. The preview binds 127.0.0.1:5179 with strict port selection and requires Node ^22.22.2, ^24.15.0, or >=26.0.0.

Related Skills

Explore More Software Engineering Skills→
Silac1995Silac1995

package-list

List installed Unity Package Manager packages with name, version, source, and description.

Community
Intermediate
WishtohearWishtohear
1

flutter-building-forms

Implements validated Flutter forms using Form widgets, GlobalKey, and TextFormField validators.

Community
Basic
efekrbasefekrbas
41

deterministic-design

Audit UI layouts for balance and usability failures with annotated feedback.

Community
Advanced
Impertio-StudioImpertio-Studio

shadcn-core-architecture

Explains shadcn ui's copy-not-install CLI distribution model and upgrade workflow.

Official
Intermediate