·component-architecture
*

component-architecture

✓
mgd34msu/goodvibes-pluginGitHub: mgd34msu/goodvibes-pluginSource: mgd34msu/goodvibes-plugin

Load PROACTIVELY when task involves designing or building UI components. Use when user says "build a component", "create a form", "add a modal", "design the layout", or "refactor this page". Covers component composition and hierarchy, prop design and typing, render optimization (memo, useMemo, useCallback), compound component patterns, controlled vs uncontrolled forms, file organization, and accessibility for React, Vue, and Svelte.

mgd34msu·component·architecture
45Installs·1Trend·@mgd34msu

Installation

GitHub: mgd34msu/goodvibes-plugin
$npx skills add https://github.com/mgd34msu/goodvibes-plugin --skill component-architecture

How to Install component-architecture

Quickly install component-architecture AI skill to your development environment via command line

  1. Open Terminal: Open your terminal or command line tool (Terminal, iTerm, Windows Terminal, etc.)
  2. Run Installation Command: Copy and run this command: npx skills add https://github.com/mgd34msu/goodvibes-plugin --skill component-architecture
  3. Verify Installation: Once installed, the skill will be automatically configured in your AI coding environment and ready to use in Claude Code, Cursor, or OpenClaw

Source: mgd34msu/goodvibes-plugin.

SKILL.md

View raw

This skill guides you through designing and implementing UI components using GoodVibes precision and analysis tools. Use this workflow when building React, Vue, or Svelte components with proper composition, state management, and performance optimization.

Trigger phrases: "build component", "create UI", "component structure", "render optimization", "state lifting", "component composition".

Before building components, understand existing patterns in the codebase.

Load PROACTIVELY when task involves designing or building UI components. Use when user says "build a component", "create a form", "add a modal", "design the layout", or "refactor this page". Covers component composition and hierarchy, prop design and typing, render optimization (memo, useMemo, useCallback), compound component patterns, controlled vs uncontrolled forms, file organization, and accessibility for React, Vue, and Svelte. Source: mgd34msu/goodvibes-plugin.

Facts (cite-ready)

Stable fields and commands for AI/search citations.

Install command
npx skills add https://github.com/mgd34msu/goodvibes-plugin --skill component-architecture
Source
mgd34msu/goodvibes-plugin
Category
*Creative Media
Verified
✓
First Seen
2026-02-25
Updated
2026-03-10
URL
https://www.learn-skills.dev/en/skills/mgd34msu/goodvibes-plugin/component-architecture

Browse more skills from mgd34msu/goodvibes-plugin

Quick answers

What is component-architecture?

Load PROACTIVELY when task involves designing or building UI components. Use when user says "build a component", "create a form", "add a modal", "design the layout", or "refactor this page". Covers component composition and hierarchy, prop design and typing, render optimization (memo, useMemo, useCallback), compound component patterns, controlled vs uncontrolled forms, file organization, and accessibility for React, Vue, and Svelte. Source: mgd34msu/goodvibes-plugin.

How do I install component-architecture?

Open your terminal or command line tool (Terminal, iTerm, Windows Terminal, etc.) Copy and run this command: npx skills add https://github.com/mgd34msu/goodvibes-plugin --skill component-architecture Once installed, the skill will be automatically configured in your AI coding environment and ready to use in Claude Code, Cursor, or OpenClaw

Where is the source repository?

https://github.com/mgd34msu/goodvibes-plugin

Details

Category
*Creative Media
Source
skills.sh
First Seen
2026-02-25

Related Skills

error-recovery
55 Installs
code-review
52 Installs
project-onboarding
51 Installs
task-orchestration
51 Installs
security-audit
49 Installs
goodvibes-memory
48 Installs