skills.rest
Valynt
ValyntOFFICIAL
Explore all skills by this author →
GitHub

sdui-component

Create, export, and register SDUI React components with lint validation.

Updated Nov 17, 2025
Search Tags:#typescript#ui#react#component#registry#registration#sdui
One-click install
npx skills add https://github.com/Valynt/ValueOS --skill sdui-component
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: sdui-component
Source: https://github.com/Valynt/ValueOS/tree/main/.windsurf/skills/sdui-component
Command: npx skills add https://github.com/Valynt/ValueOS --skill sdui-component

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This guide solves the challenge of turning UI component concepts into a complete, registerable SDUI module by enforcing a standardized workflow that covers component file creation, export, and dual registry updates.

Core Features & Use Cases

  • Component file creation: place the React component at packages/sdui/src/components/SDUI/<ComponentName>.tsx with a named export and a typed Props interface.
  • Barrel export: update packages/sdui/src/components/SDUI/index.ts to export the new component.
  • Dual registration: implement registry entry in packages/sdui/src/registry.tsx and an intent in scripts/config/ui-registry.json.
  • Validation & QA: run lint and dev to verify proper rendering and no runtime fallbacks.

Quick Start

Follow the workflow to create a new SDUI component: implement the component file, export it in the barrel, register it in registry.tsx and ui-registry.json, and verify with lint and dev.

Frequently Asked Questions about sdui-component

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

FAQPage Schema
How do I register a new React component in an SDUI system?▼

Registering a React component in SDUI requires creating the component file with a typed Props interface, updating the barrel export in index.ts, and adding dual entries to registry.tsx and ui-registry.json.

What is the standard SDUI component creation workflow?▼

The standard SDUI component workflow covers component file creation, barrel export updates, dual registration in registry.tsx and ui-registry.json, and validation using lint and dev to ensure proper rendering without runtime fallbacks.

Why do my SDUI components show runtime fallbacks during development?▼

Runtime fallbacks in SDUI components often occur when the component is missing from the barrel export or not properly registered in registry.tsx and ui-registry.json, requiring validation with lint and dev to resolve.

Does SDUI component registration require updating multiple registries?▼

SDUI component registration requires dual registration: implementing a registry entry in packages/sdui/src/registry.tsx and adding a corresponding intent in scripts/config/ui-registry.json to function correctly.

Where should I place React component files for server-rendered UI integration?▼

React component files for server-rendered UI integration belong at packages/sdui/src/components/SDUI/<ComponentName>.tsx with a named export and a typed Props interface.

What prerequisites are needed to automate SDUI component creation?▼

Automating SDUI component creation requires a valid SKILL.md frontmatter with a defined name and description, plus a references directory containing templates and guidance for the workflow.

Related Skills

Explore More Software Engineering Skills→
soq123soq123

skill-authoring

Define reusable agent skills in SKILL.md with YAML frontmatter.

Community
Intermediate
andy4917andy4917

dont-even-try

Review AI outputs and workflows to detect hidden fallbacks and verify claims.

Community
Intermediate
SandroBeatzSandroBeatz

new-component

Generate Vue/Quasar component structures with TypeScript interfaces and barrel exports.

Community
Intermediate
BuilderIOBuilderIO
11

fusion-to-publish-v2

Register React components for Builder.io Publish visual editing workflows.

Official
Advanced