'responsive' 검색 결과

Design and improve web, mobile, and desktop interfaces using searchable local guidance. Find suitable colors, font pairings, layouts, and interaction patterns, then apply accessibility checks and implementation advice for the technology used in the project.

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

• Plan a consistent visual direction for a new page
• Choose colors and font pairings for a product
• Review forms and navigation for accessibility

Audit website images for search visibility and loading performance, then prioritize fixes. Check descriptive text, file sizes, and loading settings, convert files to WebP or AVIF, and add creator and copyright metadata.

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

• Audit product and article images for SEO issues
• Convert large images to WebP or AVIF
• Fix image loading settings and layout shifts

Build Next.js applications with App Router, the app directory routing system. Get guidance on server rendering, data fetching, caching, API endpoints, and deployment settings, including loading states and image optimization for responsive page experiences.

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

• Designing pages and shared layouts with App Router
• Configuring data caching and revalidation
• Implementing forms and API endpoints

Build web layouts that adapt to screen and component sizes using CSS. Covers flexbox and CSS Grid for arranging content, reusable style variables, fluid text sizing, dark mode, and animations for interactive elements.

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

• Building layouts for phones and larger screens
• Creating cards that adapt to their container
• Managing shared styles and dark mode

Audit an app’s animations for responsiveness, performance, and accessibility, then rank the findings by impact and effort. Produce detailed implementation plans that another agent can follow, while leaving source code unchanged during the audit.

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

• Audit animations across an entire app
• Prioritize motion issues by impact and effort
• Prepare implementation plans for another agent

Review UI animation code for purposeful motion, responsive timing, correct origins, performance, and accessibility. Get a table of specific changes with reasons, followed by an approval or blocking decision ranked by impact.

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

• Review dropdown and tooltip animations
• Identify unnecessary motion in frequent actions
• Check animation performance risks

Build HTML/CSS pages styled after a named brand using 54 design references. Templates provide colors, typography, spacing, component styles, responsive behavior, and font substitutes to guide a consistent visual result.

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

• Create a landing page with Stripe-inspired styling
• Style a content site after Notion
• Build a dark dashboard inspired by Linear

Build working web pages, components, and application interfaces with a clear visual direction. The skill guides typography, color, spacing, motion, and responsive layouts that adapt to different screen sizes.

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

• Build a web page with a distinctive visual style
• Create reusable interface components
• Adapt an application interface for mobile screens

Turn a design into a developer handoff document covering layout, shared design settings, component options, interactions, and screen-size behavior. Include loading and error states, animation details, and accessibility notes to clarify implementation requirements.

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

• Preparing a design for developer handoff
• Documenting layout changes across screen sizes
• Specifying loading, empty, and error states

Create or refine OpenClaw public websites and landing pages using existing site patterns. Improve page structure, navigation, imagery, and mobile layouts, then check themes, accessibility, and search-related presentation in a browser.

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

• Building product and campaign landing pages
• Improving navigation and content hierarchy
• Checking mobile layouts and light/dark themes

Create a clickable product landing page prototype with navigation, feature cards, usage steps, testimonials, and optional pricing. Include responsive layouts, hover effects, scroll animations, and expandable FAQ sections to demonstrate the intended experience.

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

• Prototyping a product landing page
• Reviewing navigation and button interactions
• Checking mobile and desktop layouts

Find, install, and customize shadcn/ui components for React applications. The skill guides project setup, theme changes, forms, dialogs, and dashboard layouts, with checks for keyboard access, screen reader support, and responsive behavior.

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

• Add UI components to an existing React project
• Customize themes and component variants
• Build forms and dashboard layouts

Build a dark dashboard with panels that adapt to screen width. The skill provides CSS for consistent colors, monospace text, panel headers, scrolling content, status badges, and loading or error states.

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

• Building dashboards with multiple information panels
• Adapting panel layouts for phones and large screens
• Standardizing dark colors and monospace text

Create websites, dashboards, games, and app interfaces from image-generated design concepts. The skill turns the accepted concept into reusable UI components, implements working controls, and checks browser rendering, interactions, and responsive layouts against the design.

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

• Build a new website from visual concepts
• Create a dashboard or management interface
• Redesign the appearance of an existing site

Test and debug rendered web apps by reproducing interaction bugs, checking layouts and console errors, making focused fixes, and validating again. Results include screenshots, observed state changes, and a QA report explaining coverage and remaining gaps.

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

• Reproducing and fixing broken UI interactions
• Checking desktop and mobile layouts
• Investigating blank pages and console errors

Automate website interactions and checks with Playwright, a browser automation tool. Create and run scripts for forms, login redirects, broken links, and different screen sizes, with screenshots and execution results to inspect.

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

• Checking redirects after login
• Testing form submissions
• Comparing layouts across desktop, tablet, and mobile sizes

Improve website loading and responsiveness by optimizing images, fonts, scripts, and caching. Identify priorities, reduce JavaScript download size, split code into smaller loads, and verify changes through a structured performance improvement workflow.

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

• Improving slow page loading
• Reducing JavaScript download size
• Reviewing image and font loading

Build working web pages, components, and app interfaces around a clear visual concept. Coordinate typography, color, spacing, motion, and interaction details, adapting layouts to different screen sizes while avoiding repetitive visual templates.

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

• Building a landing page with a distinct visual direction
• Creating a dark-themed analytics dashboard
• Implementing responsive web components

Embed interactive Unicorn Studio scenes in websites and adjust their sizing, layering, and rendering settings. Use it to integrate animated visuals with page content, manage performance, and troubleshoot scenes that fail to appear.

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

• Embed an interactive scene in a website
• Layer animated visuals with text and images
• Adjust rendering settings for mobile devices

Design a two-panel page that gives visuals and supporting information distinct roles. This skill guides framing, spacing, typography, compact labels, and responsive stacking for product pages, portfolios, showcases, and technical presentations.

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

• Product pages pairing visuals with specifications
• Portfolios with separate artwork and commentary
• Concept presentations with a technical visual style

Turn ordered steps into a vertical or horizontal timeline whose progress line and active step update as readers scroll. Keep the sequence readable across screen sizes, with keyboard navigation and support for reduced-motion preferences.

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

• Present onboarding or service steps as a scroll timeline
• Show a roadmap or history with visible progress
• Adapt a timeline for small screens

Add a lightweight interactive globe to a web page with cobe. Covers location markers, rotation, canvas sizing, responsive updates, performance settings, and integration with React or Next.js for hero sections, about pages, and cards.

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

• Adding a spinning globe to a hero section
• Showing office locations with globe markers
• Adapting globe rendering to mobile screens

Build and test Three.js games for mobile browsers, covering touch controls, screen orientation, readable game information, and device-appropriate graphics. Refine movement, actions, inventory interactions, and performance through checks of real mobile browser behavior.

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

• Designing touch movement and action controls
• Adapting game screens to portrait and landscape
• Tuning graphics quality for mobile devices

Build a continuous 3D website where scrolling guides the camera, lighting, text, and interactions through planned chapters. The skill covers visual planning, responsive composition, progressive loading, accessibility, and performance checks for a live Three.js world.

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

• Create a product story set in a continuous 3D world
• Build an interactive portfolio with a scrolling camera journey
• Present an exhibition through connected spatial chapters