component-patterns

Define and apply standardized criteria for web component UI abstraction levels.

1|Updated Apr 6, 2026
One-click install
npx skills add https://github.com/Hyeonjun0527/yeon --skill component-patterns-hyeonjun0527
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: component-patterns
Source: https://github.com/Hyeonjun0527/yeon/tree/main/.codex/skills/component-patterns
Command: npx skills add https://github.com/Hyeonjun0527/yeon --skill component-patterns-hyeonjun0527

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

웹 컴포넌트의 추상화 레벨을 표준화하고, 팀 간 의사결정을 일관되게 만드는 기준을 제공합니다. 이 기준을 따르면 컴포넌트 설계의 일관성 및 재사용성을 높일 수 있습니다.

Core Features & Use Cases

  • UI 추상화 레벨 정의: 웹 컴포넌트의 추상화 스코프를 명확히 구분하고, 구성요소의 책임 범위를 제시합니다.
  • 일관성 있는 설계 시스템 지원: 디자인 시스템과 컴포넌트 라이브러리의 개발 방향을 일관되게 정렬합니다.
  • 실무 적용 사례: 대규모 UI 라이브러리에서 컴포넌트 추상화 레벨을 기준으로 레이어를 나누고 의사결정을 촉진합니다.

Quick Start

Read the Source of Truth at .claude/commands/component-patterns.md and follow its steps exactly to execute the workflow.

Frequently Asked Questions about component-patterns

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

FAQPage Schema
How do I standardize web component abstraction levels in a design system?

To standardize web component abstraction levels, define explicit scopes and responsibility boundaries for each component layer. This ensures consistent UI architecture decisions, higher reusability, and aligned development across teams maintaining large component libraries.

What is the best way to structure component granularity for a frontend architecture?

The best way to structure component granularity is to apply standardized criteria for UI abstraction levels, categorizing web components by their functional scope. This enforces consistent design system architecture and facilitates reproducible evaluation workflows during library refactoring.

How does defining UI abstraction levels improve component library refactoring?

Defining UI abstraction levels improves component library refactoring by providing standardized criteria to divide layers and guide architectural decisions. This enforces explicit pattern definitions and reproducible evaluation workflows, reducing inconsistency during large-scale UI updates.

When do I need to define explicit pattern definitions for web components?

You need to define explicit pattern definitions for web components when standardizing UI abstraction scopes for a design system or making component granularity decisions. This ensures that team-level architectural decisions remain consistent and reproducible across frontend projects.

Can I use these component patterns for design system alignment across multiple teams?

Yes, you can use these component patterns for design system alignment across multiple teams. The standardized abstraction criteria enforce consistent development direction and provide a shared vocabulary for component responsibility boundaries, facilitating unified decision-making.

What are the limitations of relying on standardized UI abstraction levels?

A limitation of relying on standardized UI abstraction levels is the strict requirement to follow explicit documentation references and predefined workflows. Teams must enforce these reproducible evaluation steps strictly, which may introduce overhead for highly dynamic or unconventional frontend architectures.