# Frontend Components > Design reusable, composable UI components with single responsibility, clear interfaces, and proper state management. Use this skill when creating or refactoring React, Vue, Svelte, or other framework components. When defining component props, interfaces, or APIs. When managing component state or lifting state up to parent components. When building reusable UI elements like buttons, cards, forms, modals, or lists. When implementing component composition patterns. When working with component files (.jsx, .tsx, .vue, .svelte). When documenting component usage or creating component libraries. Use when this capability is needed. - Skill: `tomevault-io/frontend-components` (Agent Skill, multi-file: 2 files) - Install (CLI): `npx skillmds@latest add tomevault-io/frontend-components` - Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/frontend-components/raw - Safety review: pending (external: skill-scanner PASS, skillspector PASS) - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: tomevault-io (https://skillmd.com/u/tomevault-io) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/tomevault-io/frontend-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 new UI components in React, Vue, Svelte, or similar frameworks - When refactoring existing components to improve reusability or composability - When defining component props, interfaces, TypeScript types, or default values - When managing local component state or deciding whether to lift state up - When building reusable UI elements (buttons, cards, inputs, modals, dropdowns) - When implementing component composition patterns (children, slots, render props) - When working with component files (.jsx, .tsx, .vue, .svelte, .js) - When splitting large components into smaller, focused sub-components - When documenting component usage, props, or creating component libraries - When encapsulating component logic and keeping internal details private ## Instructions For details, refer to the information provided in this file: [frontend components](../../../agent-os/standards/frontend/components.md) --- > Converted and distributed by [TomeVault](https://tomevault.io/claim/coreyja) — claim your Tome and manage your conversions.