'css' 검색 결과

Add compact visual summaries to Markdown answers using static HTML and CSS. Show comparisons, key metrics, timelines, or simple relationships in a preview, while keeping explanations and detailed information in the surrounding text.

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

• Comparing key metrics visually
• Showing a process or sequence of steps
• Summarizing events on a timeline

Apply subtle gradient borders to cards, pricing panels, buttons, and other web surfaces. Choose layered CSS backgrounds or a masked border to suit existing designs, with guidance on Tailwind syntax, corner alignment, opacity, and light and dark themes.

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

• Adding subtle borders to cards and pricing panels
• Decorating edges without replacing a complex background
• Adding brand accents to hover and focus states

Build soft, clay-like interface components using rounded corners and layered shadows. Includes CSS variables and examples for cards, buttons, inputs, and toggles, with guidance for dark mode, readable text contrast, and visible keyboard focus.

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

• Designing soft, dimensional cards and buttons
• Giving inputs and toggles a consistent appearance
• Adapting clay-like components for dark mode

Add CSS animations to web interfaces using ready-made patterns for menus, modals, loading states, text changes, and more. It selects a suitable pattern, connects markup and any required JavaScript, and preserves reduced-motion support.

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

• Adding opening and closing animations to menus and modals
• Animating loading placeholders and loaded content
• Adding transitions for changing text and numbers

Add CSS animations to HTML elements, React/JSX components, or WordPress PHP templates using Animate.css (v4.1.1). Use this skill whenever the user wants to animate UI elements, add entrance/exit effects, attention-seeker animations, or any CSS-based motion to their markup. Trigger on phrases like "add animation", "animate this", "make it bounce/fade/slide/zoom", "add transitions", "CSS animations", or any request to bring elements to life visually. Works with raw HTML snippets, full HTML files, React JSX, and WordPress PHP templates. Claude picks the most contextually appropriate animation — no guesswork needed from the user.

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

Find and adapt animations for web pages and components using 160 examples with HTML, CSS, JavaScript, and adjustable parameters. Covers text, interaction, basic, and advanced effects, with guidance on accessibility and fitting code into existing projects.

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

• Adding a ripple effect to button clicks
• Giving a heading a typewriter animation
• Revealing elements as the page scrolls

Create an animated HTML scene for history or trivia explainers, combining pixel art, a prominent year, moving text, and a scrolling timeline. CSS loops provide motion, making the scene suitable for screen recording.

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

• Creating an animated scene for a history explainer
• Presenting trivia with pixel-art characters
• Preparing a retro animation for screen recording

Create a product showcase with real HTML content displayed inside CSS-drawn iPhone and optional MacBook screens. Add glass-like highlights and floor reflections to present app interfaces or design work in a three-dimensional style.

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

• Presenting an app interface for a product launch
• Showing mobile and desktop designs together
• Turning text and data into an app-style showcase

Refine interface components using Emil Kowalski's design engineering principles. Decide when animation helps, tune timing and interaction feedback, and review CSS choices with attention to performance, accessibility, and details such as tooltips and drag behavior.

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

• Deciding whether an interaction needs animation
• Refining buttons, tooltips, and notifications
• Reviewing UI code with before-and-after comparisons

Build complex claude.ai artifacts with React, Tailwind CSS, and shadcn/ui. Create interfaces with multiple components, state management for changing data, and routing between views, then package the app into one self-contained HTML file for sharing.

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

• Creating interfaces with multiple components
• Building artifacts with changing data and multiple views
• Sharing a React app as a single HTML file

Review links embedded in body text to check whether readers can recognize them without relying on color alone. Identify CSS issues with underlines, color contrast, and hover or keyboard focus states, then suggest specific fixes.

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

• Review body text links after removing underlines
• Check contrast between links and surrounding text
• Inspect hover and keyboard focus cues

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

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

Style slides in an existing HTML presentation using documented CSS classes and component patterns. The skill covers two-column comparisons, cards, warning boxes, and code coloring, along with rules for automatically displayed slide badges.

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

• Arranging before-and-after examples in two columns
• Coloring code examples by syntax
• Formatting key concepts, actions, and warnings

Build web interfaces that adapt to screen and component widths. Use CSS Grid, flexible text and spacing, and container queries, which respond to a component’s available space, to adjust layouts, images, navigation, and tables.

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

• Building layouts that start with mobile screens
• Adapting components to their available width
• Scaling text and spacing with screen size

Build complex claude.ai artifacts with React, Tailwind CSS, and shadcn/ui. Create interfaces with multiple components, state management for changing data, and routing between views, then package the app into one self-contained HTML file for sharing.

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

• Creating interfaces with multiple components
• Building artifacts with changing data and multiple views
• Sharing a React app as a single HTML file

Add animations to React interfaces using the browser's built-in view transitions. Guides page changes, shared elements that move between views, list reordering, component appearance, and loading reveals, with CSS styling and Next.js integration guidance.

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

• Animating shared images between list and detail views
• Adding forward and back page transitions
• Animating list reordering and component visibility

Turn a product description into a landing page with headlines, feature sections, pricing, FAQs, and calls to action. Receive Next.js/React components styled with Tailwind CSS, plus search metadata, structured data, and alternative copy.

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

• Creating a landing page for a new product
• Building a campaign or lead capture page
• Comparing headline and page variants

Set shared brand colors, fonts, layout style, and table of contents behavior for markdown-html outputs. A guided setup checks text and link contrast, derives twelve reusable CSS settings, and saves preferences globally or per project.

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

• Setting a shared style for HTML documents and slides
• Checking text and link color contrast
• Saving a separate brand style for a project

Build React interfaces for Kortix using @kortix/ui components. The skill covers forms, dialogs, notifications, and chat views, with shared styling rules, brand customization through CSS variables, and checks for types, controls, and responsive layouts.

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

• Building forms and dialogs with existing components
• Adding a chat view with SessionThread
• Adapting component colors and logos to another brand

Build Svelte interfaces for json-render using 36 ready-made components. This skill guides component selection, connects component definitions to implementations, and explains form validation settings for apps using Svelte 5 and Tailwind CSS.

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

• Add standard UI components to a Svelte app
• Build forms with configurable validation
• Prepare component definitions for server-side prompts

Turn a research paper into a conference poster using its figures and findings. Produce one HTML/CSS file and a print-ready PDF, with measured layout checks and Gemini reviews of content accuracy and final appearance.

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

• Create a conference poster from a research paper
• Redesign an existing research poster
• Check poster claims against the source paper

Turn a research paper into a conference poster using HTML/CSS and figures from the paper. Check claims against evidence, measure the print layout, and produce a PDF matched to the venue’s required dimensions.

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

• Creating a conference poster from a paper
• Redesigning an existing research poster
• Checking poster claims against the original paper