frontend-components_skill

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