skills.rest
FlorianRiquelme
FlorianRiquelmeCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

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
One-click install
npx skills add https://github.com/FlorianRiquelme/statamic-assets --skill frontend-components-florianriquelme
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
brixtonphambrixtonpham

remix-icon

Integrate RemixIcon webfonts and SVG icons into HTML, React, and Vue projects.

Community
Advanced
X-School-AcademyX-School-Academy
9

dev-swarm-npm-publish

Publish npm packages with semantic versioning and release notes.

Official
Advanced
AppleLampsAppleLamps

new-component

Generate React component scaffolds with server/client templates and TypeScript props interfaces.

Community
Intermediate
JosiahSiegelJosiahSiegel
51

tailwindcss-advanced-design-systems

Create advanced Tailwind CSS design systems with CSS variables and the @theme directive.

Community
Advanced