skills.rest
Radiants-DAO
Radiants-DAOOFFICIAL
Explore all skills by this author →
Website𝕏@RadiantsDAOGitHub

radtools-component-create

Create RadTools-compatible React components with typed props and radOS tokens.

1|Updated Dec 17, 2025
Search Tags:#typescript#ui#react#discovery#component#design-system#radtools
One-click install
npx skills add https://github.com/Radiants-DAO/radtools --skill radtools-component-create
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: radtools-component-create
Source: https://github.com/Radiants-DAO/radtools/tree/main/.archive/docs-review/skills/cursor-skills/radtools-component-create
Command: npx skills add https://github.com/Radiants-DAO/radtools --skill radtools-component-create

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Creating UI components that work seamlessly with RadTools' visual editor, discovery pipeline, and token-driven design system can be error-prone and time-consuming. This skill provides a structured blueprint and checks to ensure new components are discoverable, consistent, and ready for integration across projects.

Core Features & Use Cases

  • Enforces a default export and TypeScript props interface for discovery.
  • Ensures components live under /components and use radOS design tokens.
  • Supports previews and documentation alignment to accelerate adoption.

Quick Start

Create a new UI component under /components that exports a default React component with typed props, uses only radOS design tokens, and add a matching preview to enable RadTools discovery.

Frequently Asked Questions about radtools-component-create

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

FAQPage Schema
How do I create React components that are discoverable in a design system?▼

To make React components discoverable in a design system, enforce a default export, define a TypeScript props interface, place files under /components, and use radOS design tokens to satisfy the discovery pipeline.

What's the best way to convert existing UI components to use radOS design tokens?▼

The best way to convert existing UI components is to enforce default exports, update typed props interfaces, relocate files under /components, and replace styling with radOS design tokens for visual editor integration.

Does my React component need a preview to work with RadTools discovery?▼

A matching preview is optional but recommended to enable RadTools discovery. Your component must have a default export, a TypeScript props interface, and use radOS tokens to integrate with the visual editor.

Why does my UI component not show up in the RadTools visual editor?▼

Your UI component may not show up if it lacks a default export, a typed TypeScript props interface, or correct placement under /components. It must also use radOS design tokens to satisfy the discovery pipeline.

Can I add component variants within the /components directory for a React design system?▼

Yes, you can add component variants within the /components directory. Ensure each variant maintains a default export, a typed TypeScript props interface, and uses radOS design tokens for proper discovery.

Do I need TypeScript to build RadTools-compatible UI components?▼

Yes, TypeScript is required to build RadTools-compatible UI components. You must define a typed props interface for each component to ensure it integrates with the visual editor and the discovery pipeline.

Related Skills

Explore More Software Engineering Skills→
danghungtb26danghungtb26
3

project-conventions

Enforce naming and folder structure conventions for React TypeScript admin templates.

Community
Basic
erclxerclx
2

claude-design-extract

Extract visual design tokens from source code into a structured DESIGN.md file.

Community
Intermediate
kcc989kcc989

shadcn-customization

Propagate design tokens and variants across shadcn/ui components.

Community
Advanced
gajjalaashok75-UIgajjalaashok75-UI
2

react-flow-node-ts

Create React Flow node components with TypeScript interfaces and store integration.

Community
Intermediate