Frontend Components

Standardize reusable frontend component design across Vue, React, and web components.

Updated Oct 31, 2025

Search Tags:#React #frontend #design system #components #UI #reusability #Vue

Ready to run

npx skills add https://github.com/FlorianRiquelme/statamic-assets --skill frontend-components-florianriquelme

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: Frontend Components
Source: https://github.com/FlorianRiquelme/statamic-assets/tree/main/.claude/skills/frontend-components
Command: npx skills add https://github.com/FlorianRiquelme/statamic-assets --skill frontend-components-florianriquelme

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill streamlines UI development by guiding the creation of modular, reusable components, reducing duplication, and improving maintainability and consistency across your application.

Core Features & Use Cases

Reusability: Designs components for use across different contexts, adhering to the single responsibility principle.
Clear APIs: Defines clear prop interfaces with sensible defaults and consistent naming conventions for predictable interaction.
Use Case: When building a new button component, this skill ensures it adheres to the single responsibility principle, has clear props for text and click handlers, and is easily composable within various parts of the application.

Quick Start

Create a reusable Vue.js button component with props for text, variant, and a click event handler.

Frequently Asked Questions about Frontend Components

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I reduce UI component duplication in React and Vue applications?▼

Reduce duplication by standardizing component design with single-responsibility principles, clear prop interfaces, and consistent naming conventions. This approach ensures components are reusable across different contexts while maintaining encapsulation and composability.

What's the best way to design reusable frontend components with clear APIs?▼

Design components with sensible prop defaults, minimal required props, and predictable interfaces. Define clear prop names and event handlers so components compose easily and work across Vue, React, and web components without ambiguity.

How do I create a design system library with consistent components?▼

Build a design system by enforcing single-responsibility, composability, and encapsulation across all components. Use consistent naming conventions, document prop interfaces and events, and apply the same patterns to every component in your library.

Can I apply component reusability patterns to both React and Vue?▼

Yes. The same reusability principles—single responsibility, clear prop APIs, sensible defaults, and consistent naming—apply across React, Vue, and web components, enabling you to standardize component design regardless of framework.

When should I refactor existing components for reusability?▼

Refactor when components duplicate logic, props, or event handling across your application. Standardizing design and API surfaces eliminates duplication, improves maintainability, and makes components predictable and composable throughout your codebase.