Claude Code Plugins

Community-maintained marketplace

Feedback

Frontend Components

@overtimepog/AgentTheo
0
0

Design and build reusable, maintainable UI components following modern architecture patterns for React, Vue, or other frameworks. Use this skill when creating component files (.jsx, .tsx, .vue), implementing component logic, managing component state, defining props interfaces, or organizing component hierarchies in directories like components/, views/, or pages/. Apply this skill when building functional components with hooks (React), composition API components (Vue), single-file components, implementing component composition patterns, managing local vs. lifted state, or creating custom hooks for shared logic. This skill ensures components follow single responsibility principle, are properly encapsulated, have clear prop interfaces with TypeScript types, support reusability across contexts, and follow modern patterns like atomic design, container/presentational separation, and compound components.

Install Skill

1Download skill
2Enable skills in Claude

Open claude.ai/settings/capabilities and find the "Skills" section

3Upload to Claude

Click "Upload skill" and select the downloaded ZIP file

Note: Please verify skill by going through its instructions before using it.

SKILL.md

name Frontend Components
description Design and build reusable, maintainable UI components following modern architecture patterns for React, Vue, or other frameworks. Use this skill when creating component files (.jsx, .tsx, .vue), implementing component logic, managing component state, defining props interfaces, or organizing component hierarchies in directories like components/, views/, or pages/. Apply this skill when building functional components with hooks (React), composition API components (Vue), single-file components, implementing component composition patterns, managing local vs. lifted state, or creating custom hooks for shared logic. This skill ensures components follow single responsibility principle, are properly encapsulated, have clear prop interfaces with TypeScript types, support reusability across contexts, and follow modern patterns like atomic design, container/presentational separation, and compound components.

Frontend Components

This Skill provides Claude Code with specific guidance on how to adhere to coding standards as they relate to how it should handle frontend components.

When to use this skill

  • When creating or modifying React (.jsx, .tsx), Vue (.vue), or other framework component files
  • When implementing functional components with hooks (useState, useEffect, custom hooks)
  • When using Vue Composition API or Single File Components (SFC)
  • When defining component props, interfaces, or TypeScript types for components
  • When managing component state (local state, lifted state, context, or global state)
  • When building reusable UI components (buttons, cards, forms, modals, dropdowns)
  • When implementing component composition or compound component patterns
  • When organizing components in feature-based or atomic design structures
  • When creating custom hooks (React) or composables (Vue) for shared logic
  • When implementing component lifecycle logic, side effects, or data fetching
  • When optimizing component rendering with memoization (React.memo, useMemo, useCallback)
  • When working with component styling (CSS modules, styled-components, scoped styles)
  • When implementing controlled vs. uncontrolled component patterns for forms
  • When creating container/presentational component separation for better maintainability

Instructions

For details, refer to the information provided in this file: frontend components