skills.rest
keystone-ui
keystone-uiOFFICIAL
Explore all skills by this author →
GitHub

component-architecture

Define structural conventions for Keystone UI component files.

3|Updated Feb 24, 2026
Search Tags:#architecture#react#components#registry#storybook#tailwind#subpath-exports
One-click install
npx skills add https://github.com/keystone-ui/react --skill component-architecture-keystone-ui
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: component-architecture
Source: https://github.com/keystone-ui/react/tree/main/.claude/skills/component-architecture
Command: npx skills add https://github.com/keystone-ui/react --skill component-architecture-keystone-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill prevents inconsistent component structure in the Keystone UI library by defining how every UI component should be organized, imported, exported, tested, and documented.

Core Features & Use Cases

  • Flat component layout: Keeps each component in a single top-level TypeScript file for predictable maintenance and discoverability.
  • Safe composition patterns: Enforces React 19 ref handling, sibling-relative imports, and no barrel files to reduce coupling.
  • Library integration rules: Covers package exports, registry updates, hover gating, and the no Radix UI constraint so new components fit the ecosystem cleanly.
  • Use case: Apply this Skill when adding a new button, dialog, or form component to packages ui src and you need the implementation to match Keystone UI conventions end to end.

Quick Start

Use this Skill to review or create a Keystone UI component so it follows the required file structure, imports, exports, and registry conventions.

Frequently Asked Questions about component-architecture

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

FAQPage Schema
How do I structure a React component in Keystone UI to pass code review?▼

Keystone UI components must be flat single-file TypeScript files using sibling-relative imports, subpath exports, updated _registry.ts entries, and co-located tests to pass review.

What are the import and export rules for Keystone UI components?▼

Keystone UI components must use sibling-relative imports and subpath exports instead of barrel files to reduce coupling and ensure predictable package consumption across the library.

Can I use Radix UI primitives when building Keystone UI components?▼

No, you cannot use Radix UI primitives when building Keystone UI components. The architecture explicitly enforces a no Radix UI constraint to keep the library self-contained.

How do I handle refs in React 19 for Keystone UI components?▼

Keystone UI components require React 19 ref handling patterns to ensure safe composition. You must apply the specific ref handling conventions defined by the library for forward compatibility.

Does adding a new component to Keystone UI require updating a registry?▼

Yes, adding a new component requires updating the _registry.ts file. This registry update ensures the new component fits cleanly into the Keystone UI ecosystem and remains discoverable.

Related Skills

Explore More Software Engineering Skills→
JoseCortezz25JoseCortezz25
4

react-19

Remove manual useMemo and useCallback with React 19 compiler patterns.

Community
Advanced
matthewharwoodmatthewharwood
1

storybook-stories

Enforce co-located CSF 3 Storybook stories with stable IDs for Playwright tests.

Community
Intermediate
raugadhraugadh
63

tailwindcss-development

Style components with Tailwind CSS v4 utilities for responsive design and dark mode.

Community
Intermediate
keystone-uikeystone-ui
3

keystoneui-react

Build and fix Keystone UI React components using subpath imports and Tailwind CSS v4 tokens.

Official
Advanced