Help us improve
Share bugs, ideas, or general feedback.
From frontend
ACTIVATE when creating or refactoring React components, splitting large components, extracting hooks, or deciding Container vs Presentation. ACTIVATE for 'component split', 'Container/Presentation', 'extract hook', 'god component', 'prop drilling'. Covers: Container vs Presentation criteria, when to extract custom hooks (3+ related states), when to split markup (150+ lines), when to move logic to domain service, form section props convention, spotlight/opacity pattern. DO NOT use for: projects not using Container/Presentation (ask first), general React hooks API.
npx claudepluginhub fabiensalles/claude-marketplace --plugin frontendHow this skill is triggered — by the user, by Claude, or both
Slash command
/frontend:frontend-component-patternsThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Apply only on projects that already follow Container/Presentation patterns. If the project does not use these patterns, ask the user before refactoring.
Provides React composition patterns to refactor components avoiding boolean prop proliferation, using compound components, render props, context providers, and React 19 APIs. For building flexible libraries.
Provides React best practices for function components, props interfaces, compound components, useState, useEffect hooks, and state management. Useful for optimizing React code architecture and performance.
Guides implementation of modern React patterns: hooks, component composition, state management, performance optimizations, concurrent features. Use for building or refactoring components.
Share bugs, ideas, or general feedback.
Apply only on projects that already follow Container/Presentation patterns. If the project does not use these patterns, ask the user before refactoring.
Container components:
ReceiptFormIsland — uses useReceiptForm(), renders DocumentAsForm or success screenPresentation components:
onChange, onSubmit, onFieldFocus)BailleurSection — receives landlordName, errors, emits onChangeExtract when 3 or more related state variables are managed together:
useState + useState + useState for related concerns → useFeatureName()Do NOT extract a hook for:
useStateSplit a component when:
Each extracted section should be 30-60 lines of JSX.
Move to domain/<concern>.service.ts when:
parseFloat(), arithmetic, or formatting appears inline in JSXinterface SectionProps {
// Section-specific data
fieldName: string;
// ...
// Error display
errors: Partial<Record<string, string>>;
// Spotlight/focus system
isActive: boolean;
// Event callbacks
onChange: (field: string, value: string | boolean) => void;
onFieldFocus: (field: string) => void;
onFieldBlur: (field: string) => void;
}
Use a declarative mapping (in domain service) instead of inline prefix matching:
// Domain service — pure mapping
const SECTION_FIELDS: Record<SectionKey, string[]> = {
bailleur: ['landlordName', 'landlordEmail'],
// ...
};
function isSectionActive(currentField: string, section: SectionKey): boolean {
if (!currentField) return true;
return SECTION_FIELDS[section].includes(currentField);
}
{(parseFloat(a) + parseFloat(b)).toFixed(2)} → extract to domain service