“css”的搜索结果

Build React interfaces with HeroUI v3, including buttons, forms, cards, and modals. The skill guides installation, component documentation lookup, and light or dark theme configuration using Tailwind CSS v4 and reusable interface components.

中文简介正在准备中。当前显示英语简介。

• Set up HeroUI v3 in a React project
• Build forms and modals from documented examples
• Customize light and dark themes

Add thumbnails, colored badges, and data-driven styling to TypeScript lists, cards, and panels. Coordinate component logic with CSS, include fallbacks for missing data, and check how the updated display handles empty lists and long text.

中文简介正在准备中。当前显示英语简介。

• Adding category or source badges to lists
• Displaying thumbnails with placeholders for missing images
• Changing colors and styles based on item data

Tailwind CSS (ユーティリティファースト CSS フレームワーク, v4) のリファレンス。 @theme, @source, @utility, @custom-variant, @apply, @import "tailwindcss", Preflight, CSS-first 設定, @tailwindcss/vite, @tailwindcss/postcss, @tailwindcss/cli, upgrade ツール, variants, arbitrary values, container queries。 Chakra UI のトークン・style props は chakra-ui スキルの担当。

中文简介正在准备中。当前显示原文说明。

Inspect the running Hermes desktop app through CDP, Chrome's debugging connection. Read rendered elements, computed styles, layout measurements, and console output to verify interface changes and investigate why a style takes effect.

中文简介正在准备中。当前显示英语简介。

• Verify interface changes in the running app
• Find which CSS rule determines a style
• Check computed design token values

Build HTML/CSS pages using visual specifications from 54 established websites, including Stripe, Linear, and Vercel. Templates provide colors, typography, spacing, component styles, and layouts that adapt to different screen sizes.

中文简介正在准备中。当前显示英语简介。

• Creating a landing page inspired by Stripe
• Designing a dashboard inspired by Linear
• Styling a documentation website

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 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

Review JavaScript that changes a parent element’s appearance based on its children. Find opportunities to replace class toggling with CSS :has() rules, and explain how those rules express conditions involving child elements.

中文简介正在准备中。当前显示英语简介。

• Replacing JavaScript class toggling with CSS
• Styling form containers based on input state
• Changing parent styles when child content exists

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

Build a consistent interface foundation with Tailwind CSS v4 using shared design values and reusable components. Covers responsive layouts, dark mode, accessibility, and component variations to help standardize UI patterns across a codebase.

中文简介正在准备中。当前显示英语简介。

• Building a reusable UI component library
• Standardizing colors, corner radii, and themes
• Creating responsive and accessible components

Implement and review interfaces that support both right-to-left and left-to-right reading. Apply guidance for CSS layout, mixed-direction text, menus, scrolling, resizing, and Electron title bars, then verify interactions in both directions.

中文简介正在准备中。当前显示英语简介。

• Reviewing CSS layouts for right-to-left support
• Displaying mixed-direction text, code, and paths
• Checking menus, scrolling, and resize interactions

Improve Astro site loading with critical CSS, the styles needed for the first screen, plus file compression, font loading adjustments, main image preloading, and deferred third-party scripts. Includes integration settings and a layout example.

中文简介正在准备中。当前显示英语简介。

• Improve an Astro site's initial loading
• Configure astro-critters and build compression
• Adjust font and main image loading

Create CSS snippets that gradually fade the horizontal or vertical edges of images, text, or containers. Adjust fade width and opacity, with both standard and Safari mask properties included.

中文简介正在准备中。当前显示英语简介。

• Fade the left and right edges of an image
• Fade text at the top and bottom
• Adjust fade width and opacity

Generate Japanese-style (和風) CSS/design themes with CSS custom properties and Tailwind CSS support. 10 preset themes including 桜, 藍染, 紅葉, 雪月花, 茶室, 浮世絵, 禅, 祭, 未来, 和紙. Triggers on requests for 和風テーマ, 和風CSS, Japanese theme, 和風デザイントークン, テーマ生成.

中文简介正在准备中。当前显示原文说明。

Organize colors, spacing, and typography into reusable design tokens, or shared style values. Generate CSS variables, define component states, check for hardcoded values, and create HTML presentations that follow the same brand rules.

中文简介正在准备中。当前显示英语简介。

• Standardize colors, spacing, and typography
• Document button states and variants
• Check code for hardcoded style values

Create banners for social media, ads, website heroes, and print formats. Compare multiple visual directions built in HTML/CSS using supplied assets, CSS graphics, or optional generated imagery, with PNG exports when browser capture is available.

中文简介正在准备中。当前显示英语简介。

• Creating social media headers and covers
• Comparing display ad banner designs
• Designing a website hero visual

Turn approved mockups, design plans, or written descriptions into HTML and CSS using Pretext. Build dynamic layouts where text reflows and heights are calculated, choosing Pretext patterns suited to the design.

中文简介正在准备中。当前显示英语简介。

• Turning approved mockups into HTML and CSS
• Building a page from a written description
• Implementing layouts that adapt to text content

Create HTML artifacts for claude.ai using React, Tailwind CSS, and shadcn/ui. This skill supports building elaborate interfaces with multiple components, helping turn a web prototype request into a structured, styled artifact.

中文简介正在准备中。当前显示英语简介。

• Creating an HTML artifact for claude.ai
• Prototyping an interface with multiple components
• Building an artifact with React and shadcn/ui

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 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