'responsive' 검색 결과

기존 디자인 체계에 따라 스마트폰부터 큰 화면까지 대응하는 UI를 구현합니다. 컴포넌트 구조와 상태 관리, 키보드 조작, 로딩 중·빈 데이터·오류 표시를 정리합니다.

• 새 페이지와 UI 컴포넌트를 만듭니다
• 스마트폰과 컴퓨터 화면을 조정합니다
• 키보드와 화면 읽기 지원을 개선합니다

Review interface animation code for timing, natural movement, responsiveness, rendering performance, and accessibility. Receive a table of specific problems, suggested changes, and reasons, followed by a clear decision on whether the motion meets the review standards.

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

• Reviewing dropdown and tooltip transitions
• Checking responsiveness during repeated interactions
• Finding animation patterns that may hurt rendering performance

Build websites, dashboards, and application screens with a clear visual direction and working frontend code. The skill covers typography, color, layout, responsive behavior, and interaction states while following existing project conventions and brand guidance.

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

• Building a landing page with a clear visual direction
• Designing a dashboard for everyday work
• Refining the appearance and behavior of existing UI

Build and review web animations with GSAP's core API, including movement, rotation, fades, and staggered starts. Adjust timing and easing, meaning changes in speed, and adapt animations to screen size and reduced-motion preferences.

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

• Adding movement and fades to web page elements
• Animating multiple elements with staggered starts
• Adapting animations to desktop and mobile screens

Design and improve website and app interfaces, from typography, spacing, and color to task flows. Review usability, accessibility, responsive layouts, and performance, or refine interface text, error states, and reusable design elements.

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

• Planning the structure and appearance of a new interface
• Improving typography, spacing, and color in existing screens
• Reviewing accessibility and layouts across screen sizes

Review images displayed at different screen sizes and help browsers select appropriately sized files. Check srcset image options, sizes display-width hints, and CSS layout together to identify oversized mobile downloads or mismatched image variants.

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

• Reviewing responsive images in articles
• Reducing oversized image downloads on phones
• Checking image sizes in cards and galleries

Audit web images that are larger than their displayed size and help serve suitable versions for different screens. Review image dimensions, responsive image settings, and Lighthouse findings, then provide updated HTML and steps to verify the changes.

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

• Finding oversized images on mobile pages
• Reviewing srcset and sizes against the actual layout
• Adding image variants for different screen widths

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 image dimensions to find risks of layout shift, where content moves as images load. Get file-level findings and before-and-after HTML using correct width, height, and responsive CSS, while accounting for small decorations with stable sizing.

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

• Investigating content jumps while images load
• Finding images missing width or height attributes
• Preserving image proportions in responsive layouts

Review CSS focus indicators, the visible outlines that show which element receives keyboard input. Identify missing, clipped, or misplaced indicators, check contrast and responsive states, and guide changes that make keyboard navigation easier to follow.

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

• Check keyboard focus visibility
• Review CSS that removes outlines
• Fix clipped or misplaced focus rings

Review and adapt component CSS using container queries, rules based on the space a parent element provides. This helps cards and other components adjust across sidebars, grids, and full-width layouts.

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

• Adapting a card for both grids and sidebars
• Converting media queries to container queries
• Reviewing layouts at different container widths

Create and review GSAP code that animates webpage elements and SVG graphics. Covers movement, fades, easing that controls speed changes, staggered effects, playback controls, and adaptations for screen size and reduced-motion preferences.

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

• Adding entrance animations to webpage elements
• Animating multiple items with staggered starts
• Adjusting motion for desktop and mobile screens

Design and implement web or iOS interfaces using the product’s existing components and design rules. Define required screen states and responsive behavior, consult optional visual references when useful, and inspect the rendered result when supported.

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

• Design screens that follow an existing product’s visual rules
• Define loading, empty, and error states
• Review responsive layouts before release

Design reusable interface components in React, Vue, and Svelte. Organize how components fit together, define clear configuration options, and choose styling approaches while addressing accessibility, responsive layouts, and maintenance across component libraries or design systems.

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

• Build a reusable UI component library
• Standardize component options across a design system
• Refactor complex existing components

Check Codewhale release readiness through ordered tests, builds, version checks, and manual terminal checks. Record command results and observed behavior, including responsiveness, route isolation, and follow-up input handling, while explicitly identifying any skipped checks.

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

• Run automated checks on the actual release branch
• Check whether a PR merges into the release branch
• Manually test terminal responsiveness and input behavior

Create a consistent UI design system from brand colors. Generate design tokens, reusable values for colors, typography, and spacing, and support component documentation, responsive layout calculations, accessibility considerations, and clear handoff materials for developers.

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

• Generate shared design values from brand colors
• Standardize typography and spacing across screens
• Plan layouts for different screen widths

Design and review web and mobile interfaces using searchable guidance on colors, fonts, layouts, charts, and interaction. Generate a consistent design plan, then apply framework-specific advice and checks for accessibility, responsiveness, and visual consistency.

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

• Choose colors and fonts for a new app
• Design a dashboard and select suitable charts
• Review forms for accessibility and ease of use

Guide website and web app development through implementation, builds, testing, and visual checks in a real browser. The workflow covers responsive layouts, accessibility, reusable components, and screenshots, with production checks after deployment when applicable.

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

• Build a website and verify it in a real browser
• Check layouts across desktop and tablet screens
• Extend existing components for consistent pages

Diagnose unresponsive GKE GPU or TPU nodes and pods stuck terminating through read-only checks of node status, logs, serial output, and repair history. Receive documented recovery guidance to apply yourself.

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

• Investigate nodes stuck in NodeStatusUnknown
• Find kernel panic or hardware failure evidence
• Check node auto-repair settings and failures

Create and review GSAP code that animates webpage elements and SVG graphics. Covers movement, fades, easing that controls speed changes, staggered effects, playback controls, and adaptations for screen size and reduced-motion preferences.

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

• Adding entrance animations to webpage elements
• Animating multiple items with staggered starts
• Adjusting motion for desktop and mobile screens

Review OpenClaw frontend code and rendered screens for departures from Carapace design rules, accessibility issues, responsive defects, and inconsistent copy. Produce evidence-based JSON and Markdown reports that distinguish documented violations from judgment-based suggestions and guide narrowly scoped fixes.

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

• Check compliance with Carapace design rules
• Review desktop and mobile interfaces
• Audit accessibility and brand copy

Review and improve interface grouping, alignment, spacing, and responsive structure. Check whether content and actions remain accessible when screens resize, text grows in translation, zoom increases, or the layout switches to right-to-left reading.

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

• Checking clipping and overlap on narrow screens or at higher zoom
• Preparing layouts for longer translated text
• Reviewing right-to-left layouts

Design and implement browser game interfaces that keep the playfield visible. Create status displays, menus, and overlays with a consistent visual theme, responsive layouts for desktop and mobile, and clear interaction boundaries for 3D camera controls.

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

• Design status displays that keep the playfield visible
• Create menus that fit the game world
• Adapt game interfaces for desktop and mobile

Build text that reveals word by word as readers scroll. Preserve inline links, emphasis, and responsive wrapping, while keeping complete text accessible to screen readers and immediately readable when reduced motion is preferred.

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

• Revealing a headline as readers scroll
• Pacing the reading of a quote or manifesto
• Adding scroll-based text to product introductions