'interaction' 검색 결과

Paperclip의 화면과 구성 요소를 기존 색상, 글자, 상태 표시, 조작 규칙에 맞춰 만들거나 수정하고, 재사용 구성 요소와 예시 페이지도 정리합니다.

• 기존 디자인 규칙에 맞는 페이지 추가
• 재사용할 수 있는 UI 구성 요소 제작
• 상태 색상과 우선순위 아이콘 통일

새 웹페이지 제작이나 기존 UI 검토에서 구조, 색상, 글꼴을 정리합니다. URL과 이미지의 디자인 분석 및 개선 사항의 우선순위 지정도 지원합니다.

• 새 랜딩 페이지를 설계합니다
• 기존 UI 개선 사항의 우선순위를 정합니다
• 참고 페이지나 이미지를 분석합니다

글자 배치, 색상, 여백, 움직임의 구체적인 규칙에 따라 React나 Next.js 화면을 구현합니다. 정보 밀도와 레이아웃을 조정하고 정형화된 외형을 피합니다.

• 글자 배치가 돋보이는 홍보 페이지를 만듭니다
• 대시보드 표시와 조작감을 조정합니다
• 정보 밀도와 움직임의 강도를 조정합니다

버튼과 알림 등의 세부 동작을 검토하고 조작에 맞는 움직임과 반응을 설계합니다. 애니메이션 필요성부터 CSS 구현, 접근성까지 살펴봅니다.

• 애니메이션이 필요한지 판단합니다
• 버튼과 알림의 조작감을 다듬습니다
• 변경 전후의 UI 코드를 비교합니다

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

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

AgentDB로 대화 기록과 사용자 선호를 저장하고 검색하는 단기·장기 기억을 구현해, AI 에이전트가 다음 세션에서도 해당 정보를 참조하도록 돕습니다.

• 채팅에 대화 기록 추가
• 세션 간 사용자 선호 기억
• 성공한 상호작용 패턴 재사용

일차 출처에서 최신 공개 정보를 조사하고, 필요하면 브라우저를 조작해 근거 문구와 날짜, URL을 확인합니다. 중요한 주장을 교차 검토하고 사실과 추론을 구분합니다.

• 공식 출처로 최신 현황 확인
• 여러 페이지의 근거 비교
• 브라우저 조작이 필요한 페이지 조사

Build AI agents that retain conversation history, user preferences, and useful interaction patterns with AgentDB. The skill covers persistent storage, meaning memories survive between sessions, plus retrieval, context management, and ReasoningBank integration.

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

• Add conversation history to a chat system
• Remember user preferences across sessions
• Reuse patterns from successful interactions

Review stylesheets for a CSS reset or normalization layer that reduces differences in browser defaults. Check import order, framework provisions, and rendered layouts across screen sizes and interaction states, then suggest changes for a consistent styling foundation.

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

• Investigating layout differences between browsers
• Choosing a reset for a new site's styles
• Checking reset coverage in a CSS framework

Audit CSS class names for inconsistency and ambiguity, then organize them using BEM, a convention that names components, their elements, and variations. Check the rendered interface across screen sizes and interaction states when reviewing changes.

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

• Auditing inconsistent CSS class names
• Renaming component classes using BEM
• Separating utility classes and JavaScript hooks

Review CSS spacing, borders, and positioning for conversion to logical properties, which follow writing direction. Check rendered layouts across screen sizes and interaction states to support right-to-left languages and vertical text.

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

• Adapting layouts for Arabic or Hebrew
• Replacing fixed left and right spacing in CSS
• Reviewing layouts for vertical writing

Identify and test critical workflows where APIs, services, databases, and interface components work together. Review normal behavior, important failures, and CI checks to find gaps that isolated unit tests can miss and keep those interactions continuously verified.

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

• Testing interactions between APIs, services, and databases
• Checking components connected to state management
• Reviewing CI coverage for critical workflows

Review and fix Flexbox layouts with overflowing text, uneven item widths, or inconsistent spacing. Check rendered results across screen sizes and interaction states, then adjust sizing rules, spacing, and text overflow settings.

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

• Fixing overflowing text in a horizontal layout
• Making items share available width equally
• Replacing margins between items with gap

Review and implement dark mode using CSS variables and the user's operating system preference. Check fixed colors, contrast, responsive layouts, and interaction states, with guidance for adding a manual theme switch that remembers the user's choice.

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

• Match site colors to the operating system's dark mode
• Find fixed colors that break the dark theme
• Add a manual theme switch that remembers the user's choice

Review repeated event listeners and consolidate them on a shared parent element. This approach, called event delegation, handles dynamically added items and reduces individual listeners while preserving the intended interaction behavior.

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

• Fixing interactions on dynamically added list items
• Consolidating listeners across table rows
• Reviewing click target detection

Review how a page loads CSS, the rules that control its appearance. Inline the styles needed for the first visible content and load the rest asynchronously, while checking layouts across screen sizes and interaction states.

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

• Reviewing CSS that delays initial page rendering
• Extracting styles needed for the first visible screen
• Moving noncritical CSS to asynchronous loading

Review component styles to find where CSS containment, which isolates rendering work, can limit layout recalculation and repainting. Identify suitable components and off-screen list items, then check their appearance across screen sizes and interaction states.

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

• Reviewing pages with many independent components
• Reducing rendering work for off-screen list items
• Checking containment across screen sizes

Review CSS animations for properties that cause costly layout updates, then suggest changes using transform and opacity. Check how effects look across screen sizes and interaction states, including support for users who prefer reduced motion.

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

• Reviewing animations that stutter
• Replacing position and size animations
• Checking reduced motion support

Turn written descriptions or Mermaid code into diagrams showing processes, interactions, and data relationships. Choose a color theme and save both SVG files, which stay sharp when enlarged, and high-resolution PNG images.

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

• Illustrating workflows and decision trees
• Diagramming API interactions
• Visualizing database relationships

Record website interactions with Playwright to create demo clips, app walkthroughs, and footage for Remotion videos. The guidance covers screen dimensions, action timing, visible click effects, and converting recorded WebM files to MP4.

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

• Recording app walkthroughs
• Demonstrating form submission and login
• Preparing browser footage for Remotion

Create charts and dashboards with a consistent approach to chart selection, color validation, labels, and interaction. Includes a palette checker and accessibility rules for readable visualizations in both light and dark modes.

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

• Choose a chart type that fits the data
• Validate chart colors for color vision differences
• Build charts for light and dark modes

Create diagrams in Artifacts that explain data flow, system interactions, and differences between options. Guides diagram structure and inline SVG, a vector image format embedded in HTML, with readable labels and support for light and dark themes.

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

• Illustrating data flow and component interactions
• Comparing system designs side by side
• Explaining changes before and after a migration

Prepare a design handoff package for a developer using Claude Code. It documents screen layouts, visual details, interactions, and state requirements in a README.md, alongside reference files for implementation in the target app.

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

• Handing HTML prototypes to a developer
• Documenting precise visual details for implementation
• Explaining screen interactions and state requirements

Plan HyperFrames videos so motion flows continuously between scenes. Match movement direction and speed across cuts, connect actions through visible causes, and verify scene boundaries while keeping each scene active through meaningful reveals or interactions.

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

• Plan consistent movement across scene transitions
• Connect scenes with a shared visual element
• Replace idle motion with reveals or interactions