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

keystoneui-react

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

3|Updated Feb 24, 2026
Search Tags:#theming#react#mcp#component library#base ui#tailwind css v4#keystone ui
One-click install
npx skills add https://github.com/keystone-ui/react --skill keystoneui-react
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: keystoneui-react
Source: https://github.com/keystone-ui/react/tree/main/skills/keystoneui-react
Command: npx skills add https://github.com/keystone-ui/react --skill keystoneui-react

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

It helps teams and AI assistants build, install, debug, and compose Keystone UI React components without guessing at the API, styling rules, or documentation paths.

Core Features & Use Cases

  • Discover components, examples, blocks, and source through the bundled CLI, MCP server, and docs routes.
  • Install or vendor components with the correct subpath imports, Tailwind CSS v4 setup, and semantic tokens.
  • Follow Keystone UI composition rules for forms, dialogs, cards, icons, and theming.
  • Example: ask it to create a sign-in form, a confirmation modal, or a dashboard card grid using the documented patterns.

Quick Start

Ask the skill to build or fix a Keystone UI component while following subpath imports, semantic tokens, and the documented form, modal, or card composition rules.

Frequently Asked Questions about keystoneui-react

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

FAQPage Schema
How do I install and set up Keystone UI components with Tailwind CSS v4?▼

Installing Keystone UI requires configuring Tailwind CSS v4 semantic tokens and using correct subpath imports. This ensures proper styling integration and deterministic component discovery within your React project.

What's the best way to compose forms and dialogs using a React component library?▼

Composing React forms and dialogs requires following Base UI render-prop patterns and documented composition rules. This approach ensures correct component structure, API usage, and theming for your UI blocks.

How do I discover available React components and examples for my project?▼

You can discover React components and examples through the bundled CLI, MCP server, and docs routes. These workflows provide deterministic source lookup and block selection for your project.

Does Keystone UI work with Base UI render-prop patterns?▼

Keystone UI requires Base UI render-prop patterns for component composition. This ensures flexible rendering behavior while maintaining strict structural and theming rules.

Why are my Tailwind CSS v4 semantic tokens not applying to my React components?▼

Tailwind CSS v4 semantic tokens fail when subpath imports are incorrect or project configuration is incomplete. You must verify installation paths and ensure token setup matches documented Keystone UI rules.

Related Skills

Explore More Software Engineering Skills→
justinlevinedotmejustinlevinedotme
7

vite-shadcn-tailwind4

Initialize shadcn/ui with Tailwind v4 in Vite projects.

Community
Advanced
remiconnessonremiconnesson

frontend-design

Design distinctive frontend interfaces with cohesive typography, color, motion, and code.

Community
Advanced
jaimedhenriquesjaimedhenriques

mcp-cli

Commands MCP server tools from the terminal with JSON arguments.

Community
Basic
keystone-uikeystone-ui
3

docs-writer

Inspect React component source and Storybook stories to write concise technical documentation.

Official
Intermediate