playbooks

home / skills / tlabs-xyz / tbtc-v2-performance / frontend-components

frontend-components skill

/.claude/skills/frontend-components

This skill helps you design and refactor reusable UI components across frameworks with clear interfaces and robust state management.

npx playbooks add skill tlabs-xyz/tbtc-v2-performance --skill frontend-components

Review the files below or copy the command above to add this skill to your agents.

Files (1)
SKILL.md
2.0 KB
---
name: Frontend Components
description: Design and build reusable, composable UI components following single responsibility principle with clear interfaces and proper state management. Use this skill when creating new React components, Vue components, Angular components, or any UI component files, refactoring existing components for reusability, implementing component props or interfaces, managing component state (useState, data properties), building component composition patterns, creating custom hooks or composables, implementing component lifecycle methods, documenting component APIs, splitting large components into smaller ones, or working with component files (.jsx, .tsx, .vue, .svelte, .component.ts). Use when working with component directories like components/, views/, pages/, or widgets/ in any frontend framework.
---

## When to use this skill

- When creating new UI components (React, Vue, Angular, Svelte, etc.)
- When refactoring existing components for reusability or clarity
- When implementing component props, interfaces, or type definitions
- When managing component state (useState, data properties, observables)
- When building component composition patterns
- When creating custom hooks, composables, or component utilities
- When implementing component lifecycle methods or effects
- When documenting component usage, props, and examples
- When splitting large components into smaller, focused components
- When working with component files (.jsx, .tsx, .vue, .svelte, .component.ts)
- When working with component directories (components/, views/, pages/, widgets/)
- When creating reusable component libraries or design systems
- When implementing component variants or theming

# 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.

## Instructions

For details, refer to the information provided in this file:
[frontend components](../../../agent-os/standards/frontend/components.md)

Overview

This skill helps design and build reusable, composable UI components that follow the single responsibility principle and expose clear interfaces. It focuses on maintainable state management, predictable lifecycle behavior, and component composition across React, Vue, Angular, Svelte, and similar frameworks.

How this skill works

The skill inspects component code and project structure to recommend splitting, typing, and interface improvements. It suggests concrete refactors: extracting props/interfaces, isolating state, creating custom hooks/composables, and replacing duplicated logic with reusable utilities. It also guides documentation of component APIs, usage examples, and tests to ensure reliable reuse.

When to use it

  • Creating new UI components (.jsx, .tsx, .vue, .svelte, .component.ts)
  • Refactoring large components into smaller, focused units
  • Implementing or improving props, TypeScript interfaces, or typings
  • Managing component state (useState, reactive data, observables)
  • Building composition patterns, custom hooks, or composables
  • Documenting component APIs and usage examples for a design system

Best practices

  • Keep each component focused on a single responsibility and name it clearly
  • Define explicit props/interfaces with TypeScript and prefer immutable inputs
  • Lift state up or use context/hooks/composables for shared behavior
  • Extract side effects into lifecycle/effect hooks and keep render logic pure
  • Create small, well-documented public APIs and keep internals private
  • Write usage examples and unit/interaction tests for critical behaviors

Example use cases

  • Turn a page-sized component into a composition of presentational and container components
  • Create a typed Button component with variants, accessibility attributes, and theme tokens
  • Extract form logic into a reusable custom hook/composable and typed form model
  • Refactor duplicated data-fetching logic into a single effect hook with caching
  • Add prop types and docs to a library component for consumption across apps
  • Split a monolithic widget into smaller components with clear interfaces and tests

FAQ

How do I decide what belongs in a component prop vs internal state?

If a value affects rendering and should be controlled by a parent, expose it as a prop; if it is internal UI state or derived transient state, keep it internal and provide callbacks for important events.

When should I create a custom hook or composable?

Create a hook/composable when logic is reusable across components or when extraction improves testability and readability of the component.