'components' 검색 결과

Build modern Next.js 13+ applications using App Router architecture with Server Components, Client Components, and advanced routing patterns. Use when implementing server-first rendering, creating nested layouts, building parallel routes, implementing intercepting routes, using React Server Components, optimizing data fetching with server-side async components, implementing streaming with Suspense, managing client-side interactivity boundaries, or leveraging Next.js 13+ app directory features for performant, SEO-friendly React applications.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Build reusable, composable, and maintainable React/Vue/Angular components following established design patterns like compound components, render props, custom hooks, and HOCs. Use when creating component libraries, implementing component composition, building reusable UI elements, designing prop APIs, managing component state patterns, implementing controlled vs uncontrolled components, creating compound components, using render props or children as functions, building custom hooks, or establishing component architecture standards.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

여러 화면 디자인 이미지를 Vue 3 페이지와 공통 컴포넌트로 일괄 변환합니다. Vant 등 UI 라이브러리 연결과 화면 이동의 초기 코드 생성도 다룹니다.

• 디자인 이미지를 Vue 3로 변환
• 목록과 로딩 상태를 한 페이지로 통합
• 반복 화면 영역을 공통 컴포넌트로 추출

사용자 조작과 화면 결과를 중심으로 React 컴포넌트와 훅을 테스트합니다. 통신 응답 모의와 접근성 점검을 지원하고 실제 브라우저에서 검증할 범위도 정리합니다.

• React 폼과 컴포넌트 테스트 추가
• 사용자 정의 훅과 비동기 갱신 검증
• API 성공 및 실패 응답 모의

웹사이트와 업무 화면의 목적 및 사용자에 맞는 디자인 방향을 정하고 글꼴, 색상, 배치, 움직임을 조정합니다. 기존 구성 요소를 활용하며 화면 너비별 표시도 확인합니다.

• 작동 중인 업무 화면의 외관 개선
• 새 사이트의 디자인 방향 결정
• 모바일 표시와 긴 레이블 개선

React와 Next.js 화면의 구현과 검토를 지원합니다. 컴포넌트 조합, 상태 관리, 데이터 가져오기, 표시 속도, 폼 검증과 키보드·포커스 동작 개선 패턴을 제공합니다.

• 재사용하기 쉬운 React 컴포넌트 정리
• 상태 관리와 데이터 가져오기 검토
• 긴 목록의 표시 속도 개선

Angular 화면과 서비스를 만들고 상태 관리, 폼, 화면 이동을 설계합니다. 프로젝트 버전에 맞는 구현 방식을 선택하고 테스트 작성과 빌드 확인을 지원합니다.

• 새 Angular 앱을 시작할 때
• 폼과 상태 관리를 구현할 때
• 화면 이동과 접근 제어를 설계할 때

Build complex interactive artifacts for claude.ai with React, Tailwind CSS, and shadcn/ui. Start from a configured project, develop interfaces with state management or navigation, and bundle the result into one shareable HTML file.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Building interactive interfaces with multiple components
• Creating artifacts with state management and navigation
• Developing interfaces with shadcn/ui components

shadcn/ui와 Tailwind CSS로 사용하기 편한 폼, 표, 화면 크기에 맞는 레이아웃을 구현합니다. 색상과 다크 모드도 통일합니다.

• 키보드로 조작할 수 있는 폼 제작
• 휴대폰과 컴퓨터의 화면 배치 조정
• 색상과 다크 모드 통일

코드나 글로 된 설명을 바탕으로 Figma 화면을 만들고 갱신합니다. 디자인 시스템의 구성 요소와 색상, 여백 등의 공통 설정으로 앱 화면을 재현합니다.

• 앱 코드를 Figma 디자인으로 옮깁니다
• 글로 된 설명에서 화면을 만듭니다
• 공통 구성 요소로 화면을 갱신합니다

React나 Next.js에서 GSAP 애니메이션 구현과 코드 검토를 돕습니다. 대상 요소와 컴포넌트 범위를 지정하고, 의존 값 변경과 컴포넌트 제거 시 정리 처리까지 다룹니다.

• React 화면에 움직임 추가하기
• 컴포넌트 제거 시 애니메이션 정리하기
• 애니메이션 대상 범위 검토하기

Apple 제품의 화면과 조작을 설계할 때 관련 지침을 찾는 안내입니다. iOS와 macOS 등에서 설계 기초, 구성 요소, 조작 방식을 다루는 14개 스킬을 소개합니다.

• iOS 앱 설계 지침을 확인합니다
• macOS 화면 구성 요소를 찾아봅니다
• visionOS 조작 설계를 살펴봅니다

Set up a working preview file and stories, examples showing real components, in an existing Storybook project. Check the installed version first, then follow the setup instructions produced by Storybook’s command.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Set up a preview file in an existing Storybook project
• Prepare stories for real components
• Check Storybook prerequisites before setup

Set up an existing Storybook installation with a working preview file and stories that display real components. The skill checks prerequisites, then uses Storybook’s setup command and the instructions it provides.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Configuring preview settings in an existing Storybook installation
• Adding stories for real project components
• Checking Storybook version requirements before setup

Analyze project code, configuration, and documentation to build a graph for interactive architecture exploration. It maps components and dependencies, supports Japanese descriptions, and can update the analysis based on changes since the previous analyzed commit.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Understand the structure of an unfamiliar project
• Explore dependencies between components
• Generate architecture descriptions in Japanese

Analyze a Figma file and turn its pages, screens, components, instances, and design tokens—shared design values—into an interactive graph. Open the dashboard to explore the file's structure and relationships.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Review the structure of a Figma file
• Explore components, variants, and instances
• Inspect how shared design values are used

Analyze Git changes or pull requests against a knowledge graph, a map of code components and relationships. Identify modified files, nearby dependencies, affected architectural layers, and review risks, then save data for a dashboard visualization.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Understanding a pull request before review
• Checking the impact of uncommitted changes
• Reviewing changes across architectural layers

Build complex claude.ai artifacts with React, Tailwind CSS, and shadcn/ui. Create interfaces with multiple components, state management for changing data, and routing between views, then package the app into one self-contained HTML file for sharing.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Creating interfaces with multiple components
• Building artifacts with changing data and multiple views
• Sharing a React app as a single HTML file

Review JavaScript error handling in source code and browser behavior. Find unhandled asynchronous failures, improve logs with useful context, and add React Error Boundaries, components that handle rendering errors, so failures are handled explicitly and are easier to investigate.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Reviewing error handling in asynchronous code
• Adding Error Boundaries to React components
• Improving logs for debugging

Bring Figma logos, brand colors, and components into HyperFrames as local assets and editable HTML. Reconstruct animation from storyboard states, with additional motion import options when a compatible connector or native export is available.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Import a Figma logo as a video asset
• Apply brand colors across imported components
• Turn a Figma frame into editable HTML

Improve Remotion Studio rendering performance by limiting which components update with every frame. The skill guides on-demand timeline reads and React.memo usage, helping keep stable components from rerendering unnecessarily while preserving updates where the displayed frame matters.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Reduce unnecessary rerenders on every frame
• Read the current frame only when an event needs it
• Move frame-dependent rendering into a small child component

Guides Avalonia interface layout with Zafiro.Avalonia, using shared styles, reusable components, and purpose-specific containers. Helps reduce repeated XAML, the markup used to define interfaces, and simplify deeply nested layouts.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Simplifying deeply nested screen layouts
• Sharing styles across multiple screens
• Extracting reusable interface components

Create and organize Claude Code plugins with guidance on configuration files, commands, agents, skills, hooks, and MCP servers. Learn where components belong, how automatic loading works, and how to reference files across different installation locations.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Create the directory structure for a new plugin
• Organize commands, agents, skills, and hooks
• Make file references work across installation locations

Modernize existing React applications through version upgrades and migration from class components to Hooks, functions for state and lifecycle behavior. Includes React 18 rendering APIs, grouped state updates, and features for prioritizing interface updates.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Plan an upgrade from React 16 through React 18
• Rewrite class components with Hooks
• Extract shared logic into custom Hooks