web-component-design작성자 Seth Hobson

Web Component Design 스킬.

UI 디자인을 위한 Claude Code 및 Codex 스킬: 재사용 가능한 React, Vue, Svelte 컴포넌트 패턴 및 구성 전략입니다.

Web & UI
UI 코드

wshobson/agents · plugins/ui-design/skills/web-component-design/SKILL.mdSKILL.md

--- name: web-component-design description: Master React, Vue, and Svelte component patterns including CSS-in-JS, composition strategies, and reusable component architecture. Use when building UI component libraries, designing component APIs, or implementing frontend design systems. --- ## When to Use This Skill ## Core Concepts ## Quick Start: React Component with Tailwind ## Framework Patterns ## Best Practices

2026-09-14에 업스트림 파일에서 읽은 전면부 및 섹션 제목 · 전체 7,475자

01 기능

Claude Code와 Codex에서 web-component-design Skill이 하는 일

요약, 워크플로, 산출물을 모두 해당 스킬의 SKILL.md에서 그대로 읽어 정리한 내용입니다.

SKILL.md에서2026-09-14 읽음 · 실행 기록 아님

스킬 자체의 표현으로

현대적인 조합 패턴, CSS-in-JS 솔루션, 컴포넌트 API 설계 원칙을 사용하여 React, Vue, Svelte 전반에서 재사용 가능한 UI 컴포넌트를 구축합니다. 복합 컴포넌트, 렌더 프롭, 슬롯과 함께 React context, Vue composables, Svelte runes 같은 프레임워크별 패턴을 다룹니다. 컴포넌트 라이브러리, 디자인 시스템, 레거시 컴포넌트 리팩터링에 적용됩니다.

시맨틱 프롭, 단일 책임, ref 포워딩, 제어형과 비제어형 패턴의 구분을 통해 기본적으로 접근 가능한 컴포넌트를 강조합니다. class-variance-authority, Tailwind CSS, 스코프 스타일링 방식을 사용한 버튼, 아코디언, 셀렉트, 탭의 구체적인 구현을 포함합니다.

산출물

class-variance-authority와 Tailwind CSS로 버튼, 아코디언, 셀렉트, 탭, 카드를 구현하는 디자인 시스템 컴포넌트입니다.

예시 프롬프트 보기 ↗

작동 방식

01
CSS-in-JS 방식 선택하기
빠른 프로토타이핑을 위한 Tailwind CSS, 스코프 스타일을 위한 CSS Modules, 동적인 React 스타일링을 위한 styled-components, SSR 친화적인 유연성을 위한 Emotion, 또는 런타임 없는 성능을 위한 Vanilla Extract 중에서 선택합니다.
02
컴포넌트 API 설계하기
loading 대신 isLoading 같은 시맨틱한 프롭 이름을 사용하고, 합리적인 기본값을 제공하며, children을 통한 조합을 지원하고, className이나 style 프롭을 통해 스타일 재정의를 허용합니다.
03
프레임워크별 패턴 구현하기
복합 컴포넌트에는 React context를, provide와 inject를 사용하는 Vue 3 composables를, 또는 반응형 상태를 위해 $props와 $derived를 사용하는 Svelte 5 runes를 사용합니다.

02 적합성 확인

web-component-design 스킬을 사용해야 하는 경우

이러한 종류의 UI 디자인 작업에서 Claude Code 또는 Codex의 web-component-design 스킬을 사용합니다. 적합성 및 제한 사항은 스킬 자체 파일에서 가져왔습니다.

적합한 경우

제품이나 조직 전체에서 일관된 UI 패턴을 위해 재사용 가능한 컴포넌트 라이브러리 또는 디자인 시스템을 설계하는 경우.
유연한 컴포넌트 API를 위해 복합 컴포넌트, 렌더 프롭, 슬롯과 같은 복잡한 컴포넌트 조합 패턴을 구현하는 경우.
prop 이름, 기본값, 스타일링 규칙을 표준화하기 위해 코드베이스 전체에서 일관된 컴포넌트 API를 만드는 경우.
현재 프레임워크의 기능과 조합 전략을 활용하여 레거시 컴포넌트를 최신 패턴으로 리팩터링하는 경우.
처음부터 ARIA 지원과 키보드 내비게이션이 내장된 접근성 있는 반응형 UI 컴포넌트를 구축하는 경우.

한계 인지하기

prop이 지나치게 많은 컴포넌트는 단일 복잡 컴포넌트 대신 조합 패턴이 필요하다는 신호입니다.

03 스킬 내부

web-component-design Skill이 Claude Code와 Codex에 부여하는 규칙

SKILL.md가 에이전트에게 설정하는 3가지 구체적인 지침, 기본값과 제한 사항 — 결과를 바꾸는 파일의 부분입니다.

합리적인 기본값 제공
컴포넌트 API는 button 예제의 defaultVariants에서 볼 수 있듯이 선택적 prop에 대해 합리적인 기본값을 포함해야 합니다.
children을 통한 조합 지원
컴포넌트는 유연한 조합 및 재사용 패턴을 가능하게 하기 위해 children prop을 받아야 합니다.
스타일 오버라이드 허용
모든 컴포넌트는 부모 컴포넌트가 className 또는 style prop을 통해 스타일을 오버라이드할 수 있도록 허용해야 합니다.

04 활용하기

Claude Code 또는 Codex에 web-component-design을 설치합니다

npx skills add 명령 한 번 실행 후, 에이전트에서 첫 번째 작업을 수행하고 결과 체크리스트를 확인합니다.

Claude Code, Codex 또는 귀하의 Agent에 web-component-design을 추가합니다

프로젝트에서 실행합니다. 설치 프로그램이 어떤 에이전트에 추가할지 묻습니다.

Terminal

npx skills add https://github.com/wshobson/agents --skill web-component-design

plugins/ui-design/skills/web-component-design/SKILL.md에 대한 일반적인 skills CLI 형식입니다. 저장소에서 자체 경로를 문서화할 수도 있습니다.

스킬에 첫 UI 디자인 작업 부여하기

스킬 자체의 용어로 작성되었습니다. 대괄호 부분은 각자의 자료로 교체합니다.

Starter prompt

Build a reusable Card component for our React design system that supports compound composition with Card.Header, Card.Content, and Card.Footer subcomponents. Use Tailwind CSS for styling with variants for different card sizes (sm, md, lg) and visual styles (default, outlined, elevated). Include forwardRef support and ensure the component is accessible with proper ARIA labels. Set md size and default style as the defaults.

출처: 스킬 자체의 용어로 SKILL.md에서 작성했습니다.

첫 번째 결과 확인

SKILL.md 자체가 올바른 결과의 모습으로 제시하는 내용:

스크린 리더로 컴포넌트를 테스트하고 접근성 준수를 위해 전체 키보드 내비게이션 지원을 확인합니다.
React DevTools로 렌더링 성능을 프로파일링하고, 불필요한 리렌더링을 방지하기 위해 적절한 곳에 메모이제이션을 적용합니다.

OpenDesign에서 web-component-design을 SKILL.md 링크에서 가져옵니다: Plugins → Add → Skill → Import from link, 그런 다음 상단 바에서 선택합니다.

OpenDesign 다운로드 빠른 시작 가이드 읽기

05 오픈 소스, 추적 가능

출처, 라이선스 및 검증

이 페이지의 사실이 어디에서 왔으며 언제 마지막으로 확인되었는지 안내합니다.

Author: Seth Hobson
Repository: github.com/wshobson/agents Branch main
스킬 파일: plugins/ui-design/skills/web-component-design/SKILL.md 검증 시 콘텐츠 체크섬이 기록되었습니다; 커밋 4236bb9
License: MIT LICENSE에서.
리포지토리 스타: 39,635 이 카탈로그에 18개의 스킬을 포함하는 전체 wshobson/agents 리포지토리에 대해 2026-09-14에 촬영된 GitHub 스냅샷입니다. web-component-design의 평가 또는 사용 횟수가 아닙니다.
OpenDesign에서 검증됨: 2026-09-14 소스 파일, 경로, 라이선스 텍스트 및 스타 수가 확인되었습니다. OpenDesign 메인에 번들로 포함되지 않음(2026-08-28 확인); 이 페이지에 실제 실행 기록이 없습니다.

SKILL.md 내부

이 Skill을 사용해야 할 때컴포넌트 라이브러리, 조합 패턴, CSS-in-JS, 접근성, 리팩터링을 포함한 일곱 가지 시나리오를 나열합니다.
핵심 개념조합 패턴, CSS-in-JS 솔루션 비교표, prop 이름 지정을 포함한 컴포넌트 API 설계 원칙을 다룹니다.
빠른 시작: Tailwind를 사용한 React 컴포넌트forwardRef, class-variance-authority, variants, 로딩 상태가 있는 size prop을 사용한 완전한 Button 구현입니다.
프레임워크 패턴context를 사용한 React 복합 Accordion, composables와 inject를 사용한 Vue 3 tabs, runes를 사용한 Svelte 5 button입니다.
모범 사례단일 책임, context 사용, 접근성 기본값, 제어 패턴, ref 전달, 메모이제이션을 포함한 일곱 가지 사례입니다.
흔한 문제다섯 가지 함정: prop 폭증, 스타일 충돌, 재렌더링 연쇄, 접근성 공백, 번들 크기 문제.

스킬 자체 설명

"CSS-in-JS, 조합 전략 및 재사용 가능한 컴포넌트 아키텍처를 포함한 React, Vue 및 Svelte 컴포넌트 패턴을 숙달합니다. UI 컴포넌트 라이브러리를 구축하거나, 컴포넌트 API를 설계하거나, 프론트엔드 디자인 시스템을 구현할 때 사용합니다."

SKILL.md의 머리말 설명입니다. 전체 파일은 약 7,475자입니다. GitHub에서 전체 파일 읽기.

Web Component Design

실제 UI 디자인 작업에서 web-component-design을 실행합니다.

OpenDesign을 다운로드하고, SKILL.md 링크에서 web-component-design을 가져오고, 위의 프롬프트를 붙여넣은 다음 결과를 보기 전에 계획을 읽습니다.

OpenDesign 다운로드 모든 스킬 보기

터미널

npx skills add https://github.com/wshobson/agents --skill web-component-design