skills.rest
TorbenMerrald
TorbenMerraldCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

Frontend Components

Design and standardize reusable frontend components across React, Vue, and Svelte.

1|Updated Jan 9, 2026
Search Tags:#architecture#frontend#react#vue#ui-components#design-systems
One-click install
npx skills add https://github.com/TorbenMerrald/StableManager --skill frontend-components-torbenmerrald
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Frontend Components
Source: https://github.com/TorbenMerrald/StableManager/tree/main/.claude/skills/frontend-components
Command: npx skills add https://github.com/TorbenMerrald/StableManager --skill frontend-components-torbenmerrald

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designing and maintaining consistent, reusable UI components across frameworks to reduce duplication and improve maintainability.

Core Features & Use Cases

  • Establish component architectures, naming conventions, and public APIs for React, Vue, Svelte, and other frameworks.
  • Refactor large components into smaller, focused units to improve composability and testability.
  • Document component usage, props, and examples to facilitate cross-team collaboration.

Quick Start

Create a base Button component with well-typed props and reusable styling to start a component library.

Frequently Asked Questions about Frontend Components

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

FAQPage Schema
How do I design reusable UI components with clear APIs across React and Vue?▼

To design reusable UI components with clear APIs, establish consistent naming conventions, define well-typed prop interfaces, and document public APIs explicitly to ensure encapsulation and maintainability across React and Vue codebases.

What is the best way to refactor large frontend components into smaller, composable units?▼

Refactoring large frontend components involves breaking them into smaller, focused units by clarifying state ownership decisions and standardizing prop interfaces, which directly improves component composability and testability across frameworks.

Does this approach to component architecture work with Svelte and other frameworks?▼

Yes, this component architecture approach works with Svelte and other frameworks by applying framework-agnostic standards for encapsulation, naming conventions, and explicit public API documentation to satisfy cross-framework reusability requirements.

How do I document component usage and props for cross-team collaboration?▼

Document component usage and props by defining explicit public APIs, recording clear state ownership decisions, and providing usage examples that outline prop interfaces to facilitate cross-team collaboration in multi-framework codebases.

When should I standardize frontend component architecture instead of building per-feature?▼

You should standardize frontend component architecture when reducing duplication across multi-framework codebases becomes necessary, ensuring maintainability through clear public APIs, encapsulation, and consistent naming conventions across teams.

Related Skills

Explore More Software Engineering Skills→
effiemincereffiemincer

extract

Identify reusable UI patterns, components, and design tokens for consolidation into centralized systems.

Community
Intermediate
guichefferguicheffer
3

component-patterns

Guide React component development with TypeScript prop typing and composition patterns.

Community
Intermediate
hulusi-tunchulusi-tunc
3

naming-convention

Establish naming conventions for design elements, components, and tokens.

Community
Intermediate
KurrawongKurrawong
1

nuxt-ui

Provide pre-built Vue components for Nuxt 4 applications with Tailwind CSS v4.

Official
Intermediate