「css」の検索結果

This skill should be used when the user asks to "make an isometric animation", "build a 2.5D isometric scene", "create an isometric infographic", "animate an exploded diagram", "do an isometric city/stack build", "show stacked layers in iso", "extrude blocks with depth", or "add a gentle camera drift to an iso scene". Covers CSS 3D transforms, SVG iso planes, and Three.js OrthographicCamera for true 3D iso — no build step.

日本語の概要は準備中です。原文の説明を表示しています。

Use Kanpeki component library in React projects. Activate when user wants to add, use, customize, or compose accessible UI components from Kanpeki (@kanpeki/*). Triggers: shadcn CLI, copy-paste components, Field.Root, composeRenderProps, ~/components/ui/*, React Aria Components + Tailwind CSS 4.1 + CVA. Covers installation, component patterns, forms (React Hook Form, TanStack Form), theming, and dark mode.

日本語の概要は準備中です。原文の説明を表示しています。

Design and visually validate implementation-agnostic website pages or modules from an approved Design System and confirmed content. Use for Module Design Solutions, Page UI Architecture Maps, media, evidence, page motion budgets, section motion intent, visual-direction images, and direction review before HTML. Do not use to write or review HTML/CSS/JS, run browser implementation QA, plan platform fields, or implement CMS components.

日本語の概要は準備中です。原文の説明を表示しています。

把一个目标/主题/文章/截图/数据转成有观点、有节奏、有视觉约束的单文件 HTML 演示（网页 PPT、科技战报、产品拆解、行业观察、路演/发布会 deck、社媒可传播长图）。**7 套各锚定公认设计体系的视觉人格**——技术崇高派 Technical Sublime（工程冷光·技术战报/算力）/ 构成主义 Constructivism（宣言/号召）/ 信息·数据设计（Tufte·数据/图表）/ 判断震慑极简 Luxury（高端品牌/判断）/ De Stijl 新造型（标准/秩序）/ 编辑主义 Editorial（衬线·深度观察）/ 演示禅 Zen（暗墨·思想/品牌 keynote）——用户可指定，否则按内容自动判选并透明告知。token + validator 机检（P0/P1/P2）+ 32 维审计**机器强制设计一致性**；反伪造（不造数据/logo/截图/来源·示意标注）；字体本地子集；图按角色路由（默认 CSS/SVG·要图先探测生图环境）。Generates single-file HTML decks with 7 design-system-anchored visual personas, a semantic layout grammar, locked design tokens, evidence-grading, machine validation (P0/P1/P2 + 32-dimension audit), an anti-fabrication discipline, and image-generation environment detection. Use when the user wants a presentation / deck / slides / 网页 PPT / 战报 / 产品拆解 / 行业观察 / 路演 / 发布会 / 社媒长图, or asks to turn an article / screenshot / dataset into slides. Do NOT use for large data-table training material, strict legal/medical/financial compliance documents, multi-author collaborative PPT editing, plain-text summaries, requests to replicate a brand's official keynote visuals, or any request to fabricate realistic-looking data / fake logos / fake screenshots / fake sources.

日本語の概要は準備中です。原文の説明を表示しています。

Guide for implementing smooth, native-feeling animations using React's View Transition API (`<ViewTransition>` component, `addTransitionType`, and CSS view transition pseudo-elements). Use this skill whenever the user wants to add page transitions, animate route changes, create shared element animations, animate enter/exit of components, animate list reorder, implement directional (forward/back) navigation animations, or integrate view transitions in Next.js. Also use when the user mentions view transitions, `startViewTransition`, `ViewTransition`, transition types, or asks about animating between UI states in React without third-party animation libraries.

日本語の概要は準備中です。原文の説明を表示しています。

Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Zero dependencies — single HTML files with inline CSS/JS. Use when the user wants a presentation, pitch deck, conference talk slides, HTML slideshow, slide deck, investor deck, demo day slides, keynote-style presentation, or says 'make slides', 'presentation', 'pitch deck', 'conference talk', 'convert my PPT', 'HTML slides', 'talk slides', or wants beautiful animated slides without PowerPoint. Also use when someone needs to present something and doesn't have a tool — this replaces Keynote, Google Slides, and PowerPoint with a single HTML file. Includes 12 curated style presets and PPT-to-HTML conversion.

日本語の概要は準備中です。原文の説明を表示しています。

Write accessible HTML, CSS, and JavaScript that conforms to RAWeb 1.1 (Luxembourg Web Accessibility Framework, based on EN 301 549 / WCAG 2.1). Use when developing web interfaces, components, forms, navigation, or any front-end code that must meet Luxembourg accessibility law. Covers all 17 RAWeb themes with code-level guidance, accessible patterns, and anti-patterns. Default conformance target: Level AA.

日本語の概要は準備中です。原文の説明を表示しています。

Comprehensive integration skill for building sites with SvelteKit 2, Svelte 5, and Tailwind CSS v4

日本語の概要は準備中です。原文の説明を表示しています。

用前端渲染生成图片 —— 不依赖模型的多模态能力，任何能写 HTML/CSS 的模型 (DeepSeek / Claude / Kimi / GPT 等) 都能用。 当用户要「生成/做/画一张图」且属于以下任意一种时使用：头像、图标、公众号封面、 OG 分享图、Banner/横幅、小红书封面、知识卡片、金句卡、代码片段图、数据卡、 功能发布图、对比图、步骤图、视频封面/缩略图、幻灯片单页、活动海报、名片、 二维码卡、配图、题图、缩略图、poster、cover、thumbnail、banner、avatar。 也用于：批量出多个尺寸/多平台的同一张图；把一段文字/数据/代码变成图； 给文章配图；做一套风格统一的系列图。 支持指定视觉风格，共 32 套：手绘/涂鸦/白板、黑板、水彩、拼贴/剪贴、博物图鉴、 瑞士国际主义、杂志编辑部、报纸、工程蓝图、档案手稿/打字机、包豪斯、装饰艺术 Art Deco、 双色印刷 Riso、粗野主义、孟菲斯、美漫波普、像素 8-bit、千禧 Y2K、蒸汽波、霓虹赛博朋克、 街头海报/喷漆、日式侘寂、中式水墨、国潮/新中式、终端 CLI、极光渐变、玻璃拟态、 奢侈品黑金、极简产品、电影海报、复古未来 70s、极简线条。 用户没指定时主动报 3~4 个候选让他选；说了库里没有的风格就按四步法拆成 token。 产出一个可预览的画板工作台页面，多种画幅并排展示，点按钮即可导出 PNG (页内零依赖导出 + 本机 Chrome 精确出图两条通道)。 不适用：需要照片级真实内容的图（人像、风景、材质渲染）—— 那需要真正的图像模型。

日本語の概要は準備中です。原文の説明を表示しています。

Generate HTML slide presentations (1 slide = 1 HTML file, 1280x720px) using Tailwind CSS, Font Awesome, and Google Fonts. Use when the user asks to create a new presentation deck or slide HTML files. Covers design guidelines, 43 layout patterns, component library, and PPTX conversion compatibility rules. Supports style selection (creative, elegant, modern, professional, minimalist) and theme selection (marketing, portfolio, business, technology, education).

日本語の概要は準備中です。原文の説明を表示しています。

Web (CSS/JS/React + GSAP/Motion): classify UI motion as communicative (sequence is the content) or decorative (decorating a result), then fix or apply prefers-reduced-motion so meaning survives under reduce. Use when auditing existing animation, gating new motion, verifying both preference states, catching a dead reduced-motion branch, snapping to an end state, or collapsing a transition without nuking essential cues. Not for React Native, full WCAG encyclopedias, keyboard traps, color contrast, focus management, or ARIA pattern audits.

日本語の概要は準備中です。原文の説明を表示しています。

Makers 开发专家团前端工程师 Skill — React/Vue/Next.js/Nuxt/Astro 前端开发， 静态页面、SPA/MPA、Tailwind CSS 样式、前端工程化。 触发词：前端页面、UI 组件、React 开发、Vue 开发、Next.js 页面、 搭一个前端、SPA、静态站点、Tailwind 样式。

日本語の概要は準備中です。原文の説明を表示しています。

原型构建师 - 基于设计令牌和模板生成品牌级 HTML/CSS 原型代码

日本語の概要は準備中です。原文の説明を表示しています。

Use this skill whenever the user wants to use AI agents to work with Penpot design files via the Penpot MCP Server. Triggers include: using Penpot through an AI agent, design files, design systems, design tokens, Penpot MCP, design-to-code, generating UI from design, auditing a design system, creating components/variants, renaming layers, exporting assets from Penpot, adding flows, interactions, animations, overlays, or prototyping in Penpot, or prompting an AI agent to read/modify a Penpot file. Also triggers when the user wants to set up Penpot MCP, connect any MCP-compatible AI agent or IDE to Penpot, or produce production-ready HTML/CSS/React from a Penpot design. Use this skill for Penpot-agent workflows — design, code, audit, prototyping, or setup.

日本語の概要は準備中です。原文の説明を表示しています。

Use this skill when the user needs Obsidian runtime administration through official desktop CLI commands for plugins, restricted mode, themes, CSS snippets, command catalog/hotkeys, or targeted command execution. Keep this skill separate from note CRUD, Sync/Publish, and devtools diagnostics.

日本語の概要は準備中です。原文の説明を表示しています。

Use this skill when the user needs Obsidian runtime debugging or developer introspection through official desktop Obsidian CLI developer commands, including devtools, console/errors capture, DOM/CSS inspection, screenshots, CDP calls, and controlled eval. Do not use for regular note CRUD, task/property editing, Sync/Publish administration, or community tooling outside the official CLI.

日本語の概要は準備中です。原文の説明を表示しています。

Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessible components (dialogs, dropdowns, forms, tables), customizing themes and colors, implementing dark mode, generating visual designs and posters, or establishing consistent styling patterns across applications.

日本語の概要は準備中です。原文の説明を表示しています。

"Design finalization: generates production-quality Pretext-native HTML/CSS. (gstack)".

日本語の概要は準備中です。原文の説明を表示しています。

Create distinctive, production-grade HTML/CSS frontends with exceptional design quality

日本語の概要は準備中です。原文の説明を表示しています。

Fix generic HTML/CSS designs by applying aesthetic upgrades across the 5 design dimensions (typography, color, motion, spatial composition, backgrounds)

日本語の概要は準備中です。原文の説明を表示しています。

Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.

日本語の概要は準備中です。原文の説明を表示しています。

Meaning-first animation with 3-tier hierarchy. CSS scroll-driven (animation-timeline: scroll()), View Transitions API, @starting-style DOM-insert, container scroll-state queries, prefers-reduced-motion mandatory on all animations.

日本語の概要は準備中です。原文の説明を表示しています。

Design token architecture - primitive/semantic/component tiers, naming grammar, CSS custom property delivery, and DTCG build pipelines

日本語の概要は準備中です。原文の説明を表示しています。

React Native Reanimated 4 - shared values, animated styles, spring/timing/decay, layout animations, gesture integration, scroll-driven animations, interpolation, worklets, CSS animations

日本語の概要は準備中です。原文の説明を表示しています。