skills.rest
joshribakoff
joshribakoffCOMMUNITY
Explore all skills by this author →
Website𝕏@joshribakoffGitHub

react-ui

Standardize React UI components with functional patterns and JSDoc prop typing.

2|Updated Nov 28, 2025
Search Tags:#testing#frontend#react#components#state-management#jsx#ui-patterns
One-click install
npx skills add https://github.com/joshribakoff/surfsim --skill react-ui-joshribakoff
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-ui
Source: https://github.com/joshribakoff/surfsim/tree/main/.claude/skills/react-ui
Command: npx skills add https://github.com/joshribakoff/surfsim --skill react-ui-joshribakoff

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Standardizes UI component development by applying React patterns and conventions to UI work, helping teams build consistent, reusable components and safer state management across JSX projects.

Core Features & Use Cases

  • Functional components only with guidance on props and state
  • Props interface via JSDoc for typing in JSX without TypeScript
  • State management patterns and performance considerations
  • File organization, stories for component development, and testing conventions
  • Guidelines for migrating from Canvas-only UI to React + Canvas integration

Quick Start

Start by refactoring UI components to functional React components and apply the documented patterns to your JSX files.

Frequently Asked Questions about react-ui

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

FAQPage Schema
How do I standardize React UI component development across a team?▼

Standardize React UI component development by refactoring to functional components, applying JSDoc prop typing, state-management patterns, file organization, and testing conventions to ensure reusable and consistent JSX architecture.

Can I type React component props in JSX without TypeScript?▼

Yes, you can type React component props in JSX without TypeScript by using JSDoc annotations to define props interfaces, ensuring safer state management and functional component usage.

What is the best way to migrate Canvas-only UI to React components?▼

Migrate Canvas-only UI to React by refactoring elements into functional React components and applying established patterns for Canvas integration, state management, and component architecture.

What state management patterns should I use for React functional components?▼

Use state management patterns tailored for functional components that emphasize performance considerations, JSDoc prop typing, and standardized file organization to maintain safe JSX state handling.

Does this approach require TypeScript for React component architecture?▼

No, TypeScript is not required. The approach relies on JSDoc-based prop typing within standard JSX projects to achieve functional component usage and structured component architecture guidance.

Related Skills

Explore More Software Engineering Skills→
paulotkspaulotks

react-component

Create React components with TypeScript and CSS Modules.

Community
Intermediate
george-popescugeorge-popescu

react

Define React 19 development conventions for components, hooks, state, routing, and testing.

Community
Advanced
EIS-ITSEIS-ITS

Frontend Components

Create reusable, composable UI components for React, Vue, Svelte, and web components.

Official
Intermediate
BenjaminGBenjaminG
3

frontend-developer

Generate consistent React/TypeScript frontend code with strict typing and accessibility.

Community
Basic