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

radflow-component-create

Create RadFlow-compatible UI components with TypeScript props and previews.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provides a standardized process for creating RadFlow-compatible components that integrate with the visual editor and component discovery, reducing setup friction and ensuring consistent discovery across projects.

Core Features & Use Cases

  • Enforces a default export and a TypeScript props interface so components are discoverable and typed.
  • Guides correct file placement in monorepo or consumer projects, semantic design token usage, and creation of component previews and tab configurations.
  • Supports creating new components, adapting existing ones for RadFlow compatibility, and adding variants with previews for the Components tab.

Quick Start

Create a new RadFlow-compatible component by following the template, placing it under the correct directory, and ensuring a default export, typed props, and semantic tokens.

Frequently Asked Questions about radflow-component-create

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

FAQPage Schema
How do I create UI components that can be automatically discovered by a visual editor?▼

To create discoverable UI components, you must provide a default export, define a TypeScript props interface with default values, and place the component under packages/ui/src or components/<Folder>/ so the visual editor can automatically recognize it.

How do I convert an existing UI component for RadFlow compatibility?▼

Converting an existing component for RadFlow compatibility requires adding a default export, defining a TypeScript props interface with default values, applying semantic design tokens, and generating the necessary previews and tab configurations.

What are the requirements for adding component variants with previews in the Components tab?▼

Adding component variants with previews requires defining a default export, a typed props interface with default values, correct directory placement, semantic design token usage, and specific tab configuration to ensure the preview renders in the Components tab.

Can I use custom CSS values instead of semantic design tokens when building UI components?▼

No, you cannot use custom CSS values. Building compatible UI components requires applying semantic design tokens strictly, ensuring consistent styling and automatic component recognition across projects within the design system.

Does a UI component need a TypeScript props interface to be recognized by component discovery tooling?▼

Yes, a TypeScript props interface is required. Component discovery tooling enforces a default export and a typed props interface with default values to ensure the component is properly typed and recognized across projects.

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

Your UI component may not show up because it lacks a default export, a TypeScript props interface, default prop values, correct placement under packages/ui/src, or the required previews and tab configuration for discovery.

Related Skills

Explore More Software Engineering Skills→
TophC7TophC7

sworm-design

Codify Sworm design tokens and component recipes to prevent UI drift.

Community
Advanced
manuelbrandner85manuelbrandner85

flutter-add-widget-preview

Integrate interactive widget previews into Flutter projects with custom annotations.

Community
Intermediate
TarasTsavolykTarasTsavolyk
1

scaffold-component

Create Vue 3 components with typed props, emits, design tokens, and unit tests.

Community
Intermediate
Radiants-DAORadiants-DAO
1

radtools-component-create

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

Official
Intermediate