Component

Scaffold SolidJS UI components following CoRATES conventions.

3|Updated Nov 21, 2025

Search Tags:#scaffold #component #ui-patterns #solidjs #prop-destructuring

Ready to run

npx skills add https://github.com/InfinityBowman/corates --skill component-infinitybowman

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: Component
Source: https://github.com/InfinityBowman/corates/tree/main/.claude/skills/component
Command: npx skills add https://github.com/InfinityBowman/corates --skill component-infinitybowman

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps teams rapidly scaffold SolidJS UI components that adhere to the CoRATES conventions, ensuring consistency, readability, and maintainability across the frontend.

Core Features & Use Cases

Enforces no prop destructuring and direct store imports to reduce prop drilling.
Promotes small, focused components (1-5 local props) and clear state patterns (createSignal, createMemo, createStore).
Use cases include creating dashboard widgets, feature UI blocks, and reusable controls aligned to project patterns.

Quick Start

Use this skill to scaffold a new SolidJS component named MyButton under packages/web/src/components/feature/MyButton.jsx following CoRATES conventions.

Frequently Asked Questions about Component

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

FAQPage Schema

How do I scaffold SolidJS components without prop destructuring?▼

To scaffold SolidJS components without prop destructuring, use this Skill to generate UI elements following CoRATES conventions, which enforces direct store imports and requires accessing props directly to reduce prop drilling.

What is the best way to manage derived state in SolidJS components?▼

The best way to manage derived state in SolidJS components is using createMemo and createStore. This Skill scaffolds components with these patterns to ensure clear state management and readability across your frontend features.

Can I use this Skill to create dashboard widgets and feature UI blocks in SolidJS?▼

Yes, you can use this Skill to create dashboard widgets, feature UI blocks, and reusable controls in SolidJS. It guides rapid scaffolding of focused components with 1-5 local props for your UI patterns.

Does this Skill work with SolidJS projects outside of the CoRATES frontend?▼

This Skill is specifically designed for the CoRATES frontend and enforces its conventions. While it scaffolds standard SolidJS components using createSignal and createStore, its strict rules for direct store imports and no prop destructuring are tailored for CoRATES.

Why should I avoid prop destructuring when building SolidJS components?▼

You should avoid prop destructuring in SolidJS components to prevent loss of reactivity and reduce prop drilling. This Skill enforces direct prop access and direct store imports to maintain consistency and maintainability across the project.

How do I quickly generate a new SolidJS UI component for a feature?▼

To quickly generate a new SolidJS UI component, use this Skill to scaffold a file like MyButton.jsx under packages/web/src/components/feature/. It automatically applies CoRATES patterns, including state management and prop handling.