Frontend Components

Design reusable frontend components with TypeScript props and state management.

6|1|Updated Nov 12, 2022

Search Tags:#state management #React #frontend #UI/UX #components #reusability #Vue

Ready to run

npx skills add https://github.com/coreyja/coreyja.com --skill frontend-components-coreyja

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: Frontend Components
Source: https://github.com/coreyja/coreyja.com/tree/main/.claude/skills/frontend-components
Command: npx skills add https://github.com/coreyja/coreyja.com --skill frontend-components-coreyja

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill streamlines the creation of high-quality, reusable UI components, ensuring consistency, maintainability, and proper state management across the frontend.

Core Features & Use Cases

Single Responsibility Principle: Guides the design of components with clear interfaces and focused functionality.
State Management: Ensures proper handling of component state, props, and data flow for predictable behavior.
Use Case: When developing a new user profile card, use this skill to ensure it's a reusable component with clearly defined props for user data, handles its own loading state, and can be easily integrated into different parts of the application.

Quick Start

Apply the Frontend Components skill to create a new 'Alert' component that accepts 'type' (success, error, info) and 'message' props, and manages its own visibility state.

Frequently Asked Questions about Frontend Components

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

FAQPage Schema

How do I design reusable React and Vue components with proper state management?▼

Reusable components require clear prop interfaces, local state handling, and composition patterns. Define props with TypeScript, manage component state internally or lift it up when shared, and use composition techniques like slots or render props to maximize flexibility across different parts of your application.

When should I lift state up versus manage it locally in a component?▼

Lift state up when multiple sibling or parent components need to share data; keep state local when only that component uses it. Use props to pass data down and callbacks to pass events up, ensuring predictable data flow and avoiding unnecessary re-renders.

How do I document component usage and interfaces for my team?▼

Document props, their types, default values, and usage examples alongside your component files. Use TypeScript interfaces to define prop shapes, include JSDoc comments, and provide quick-start examples showing common use cases like accepting user data or managing visibility state.

What's the difference between slots and render props for component composition?▼

Slots (Vue) and render props (React) both enable flexible composition. Slots use template placeholders for simpler cases; render props pass a function as a prop for more dynamic control. Choose based on your framework and whether you need conditional rendering or scoped data.

Can I apply component design patterns across React, Vue, and Svelte?▼

Yes. Core principles like single responsibility, clear prop interfaces, local state management, and composition patterns apply across frameworks. Implementation differs—React uses render props, Vue uses slots, Svelte uses context—but the design philosophy remains consistent.

What TypeScript types should I define for component props?▼

Define interfaces or types for all props, specifying required fields, optional fields with defaults, and union types for constrained values. This enables IDE autocomplete, catches errors at build time, and documents expected input formats for developers using your components.