'css' 검색 결과

Review HTTP Content-Type headers, which identify file formats, across web pages and static assets. Find mismatches that can block stylesheets or scripts, and identify server configuration changes needed to serve resources correctly.

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

• Investigating stylesheets or scripts that fail to load
• Auditing server settings for static assets
• Checking character encoding and nosniff headers

Review CSS layouts for unwanted horizontal scrolling on narrow screens and at high browser zoom. Identify fixed widths, overflowing media, and unbroken text, then apply layout fixes that keep content readable within the viewport.

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

• Fix horizontal scrolling on mobile pages
• Check page layouts at 400% browser zoom
• Review wrapping for long URLs and large images

Review GIFs, videos, and CSS animations for rapid flashing that may trigger seizures in photosensitive users. Check flash frequency and screen area, then suggest removing or slowing effects or replacing them with fades or static content.

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

• Checking flashing effects in animated GIFs
• Reviewing rapid flashing in videos and CSS animations
• Replacing flashing effects with fades or static content

Audit how quickly a page shows its first text or image. Use performance measurements to identify blocking resources, slow server responses, and rendering delays, then recommend changes tied to the confirmed bottlenecks.

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

• Investigating slow initial page display
• Finding CSS and JavaScript that delay rendering
• Reviewing loading performance with measurements

Review CSS color definitions and convert palettes to oklch(), a color format designed around human perception. Use consistent lightness steps to build color scales, dark-mode palettes, and interaction states, with guidance for wide-gamut displays.

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

• Organizing reusable CSS color definitions
• Building color scales with consistent perceived lightness
• Designing dark-mode and hover colors

Investigate chains of dependent resource requests that delay a page’s first display. Use performance measurements to identify bottlenecks, then reduce waiting by embedding essential CSS or preloading important assets discovered late in the chain.

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

• Investigating slow initial page rendering
• Reviewing dependencies between resource requests
• Planning critical CSS embedding and asset preloading

Review layouts that need alignment across both rows and columns, and suggest CSS Grid changes. Check rendered behavior at different screen widths and explain sizing, named areas, and grids that adapt to their content.

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

• Replacing two-dimensional Flexbox or float layouts
• Building card grids that adapt to screen width
• Aligning nested elements with a parent grid

Apply Carapace styling to existing OpenClaw interfaces through shared CSS, themes, and semantic tokens—named values for visual roles. Reuse existing components and check interaction states, accessibility, and browser screenshots for consistent presentation.

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

• Align existing OpenClaw screens with Carapace styling
• Reuse shared CSS and existing interface components
• Review focus states, status colors, and accessible names

Production-tested setup for Tailwind CSS v4 with shadcn/ui, Vite, and React. Use when: initializing React projects with Tailwind v4, setting up shadcn/ui, implementing dark mode, debugging CSS variable issues, fixing theme switching, migrating from Tailwind v3, or encountering color/theming problems. Covers: @theme inline pattern, CSS variable architecture, dark mode with ThemeProvider, component composition, vite.config setup, common v4 gotchas, and production-tested patterns. Keywords: Tailwind v4, shadcn/ui, @tailwindcss/vite, @theme inline, dark mode, CSS variables, hsl() wrapper, components.json, React theming, theme switching, colors not working, variables broken, theme not applying, @plugin directive, typography plugin, forms plugin, prose class, @tailwindcss/typography, @tailwindcss/forms

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

HTML과 CSS로 화면을 구성하고 GSAP으로 글자와 이미지에 움직임을 더해 MP4·WebM 영상으로 내보냅니다. 자막이 있는 내레이션, 상품 소개, 웹사이트 기반 영상도 제작합니다.

• 움직이는 제목과 텍스트 도입부 제작
• 내레이션에 자막을 붙일 때
• 웹사이트를 소개 영상으로 만들 때

Create a 16:9 animated hero composition with rotating rings, a globe or other focal graphic, and expressive typography. Deliver a single HTML document with CSS animations that a frame-capture exporter such as HyperFrames can turn into video.

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

• Create an animated hero for a marketing page
• Design a title card with moving typography
• Build a looping poster with rotating rings and a globe

Audit and improve an existing website or app's interface while preserving its functionality and technology stack. Refine typography, colors, layout, and interaction states through focused changes, checking functionality after each update.

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

• Audit an existing website's visual design
• Replace repetitive, generic interface patterns
• Improve loading, empty, and error states

Review website images for high-density displays, where standard assets can look blurry. Check higher-resolution versions, HTML and CSS image selection, delivery settings, and loading behavior, then identify specific files or components that need changes.

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

• Investigating blurry images on high-density displays
• Reviewing srcset for fixed-size and responsive images
• Checking high-resolution CSS background images

Review CSS text sizes for mobile readability and accessibility. Identify undersized text and fixed pixel settings, suggest relative units that follow browser font preferences, and check that content and controls remain usable at 200% zoom.

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

• Auditing text sizes on mobile pages
• Converting pixel sizes to relative units
• Checking layouts at 200% zoom

Review loading priorities for key images, fonts, and CSS, then adjust fetchpriority hints so important resources receive attention earlier. Use it to improve LCP, the time until the largest visible content appears.

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

• Improving the loading priority of a page’s main image
• Reducing competition from images below the visible area
• Reviewing preload priorities for critical fonts and CSS

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 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 create print styles for web pages so printed content stays readable. Adjust typography and page breaks, hide navigation and ads, and display external link URLs in the printed output.

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

• Make web pages easier to read on paper
• Hide navigation and ads when printing
• Adjust print typography, page breaks, and link URLs

Build web interfaces with floating cards, spatial depth, and translucent glass effects using GSAP and 3D CSS. Add scroll animations while preserving keyboard navigation and providing static states for users who request reduced motion.

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

• Building a landing page with floating cards
• Adding depth to a dashboard
• Creating scroll-linked animations

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

Add Markstream to AI chat or document interfaces to render Markdown as it arrives. The skill selects the framework package and configures dependencies, styles, streaming behavior, and server-side rendering boundaries.

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

• Add streaming Markdown to an AI chat interface
• Fix missing styles or server-side rendering errors
• Replace an existing Markdown renderer with Markstream

Create shared UI design values from a brand color, including palettes, typography, and spacing. Export them as CSS, SCSS, or JSON, document component behavior, plan layouts for different screens, and prepare developer handoff materials.

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

• Generate shared design values from a brand color
• Document component variants and states
• Plan typography and spacing for different screens

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

Create an animated explainer poster with a pixel art mascot, moving Japanese or Chinese text, and a scrolling timeline. The retro layout uses CSS animation loops without JavaScript and can be recorded as video.

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

• Creating a retro animated explainer
• Combining pixel art with moving Japanese text
• Preparing an animated poster for video recording