component

What problem does it solve?

This Skill streamlines UI component development by enforcing a pure, data-driven approach, eliminating the complexity of traditional state management and lifecycle methods. It ensures components are predictable, testable, and align with Sitebender's "everything is data" philosophy, letting you build robust UIs faster.

Core Features & Use Cases

• Pure Function Components: Guides the creation of components as pure functions that transform Props into JSX, simplifying logic and improving testability.
• Progressive Enhancement: Provides patterns for adding interactivity at the boundary, keeping core components pure and performant.
• Automated Component Scaffolding: Generates a complete component folder structure, including JSX, CSS, progressive enhancement scripts, and tests.
• Use Case: To create a UserProfileCard component, use this skill to generate the scaffold. Define Props for name, email, and avatarUrl. The component will render this data, and any interactivity (like an "Edit Profile" button) will be added via a separate progressive enhancement script, keeping the core component pure.

Quick Start

Generate a new UI component named 'ProductCard' with a title and description.