337 件 ・ 関連度順
概要と使いどころ
Creates modern CSS gradients using Tailwind CSS including linear, radial, conic, mesh gradients, animated gradients, glassmorphism, and gradient text effects. Use when users request "gradient background", "tailwind gradient", "modern gradient", "mesh gradient", or "animated gradient".
日本語の概要は準備中です。原文の説明を表示しています。
Convert CSS files to Tailwind utility classes. Use when migrating from vanilla CSS to Tailwind.
日本語の概要は準備中です。原文の説明を表示しています。
Architect scalable styling systems with Tailwind v4, CSS Modules, design tokens, dynamic theming, and container queries. Activate on: design tokens, theming system, Tailwind config, CSS architecture, container queries, dark mode. NOT for: component library creation (use design-system-creator), animation systems (use animation-system-architect).
日本語の概要は準備中です。原文の説明を表示しています。
既存コードから色・文字・余白などの共通ルールを抽出し、デザインの仕様書とプレビューを作るスキル。画面の統一感を10項目で評価し、修正箇所も示します。
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.
日本語の概要は準備中です。原文の説明を表示しています。
Build scalable design systems with Tailwind CSS v4, design tokens, component libraries, and responsive patterns. Use when creating component libraries, implementing design systems, or standardizing UI patterns.
日本語の概要は準備中です。原文の説明を表示しています。
Build scalable design systems with Tailwind CSS v4, design tokens, component libraries, and responsive patterns. Use when creating component libraries, implementing design systems, or standardizing UI patterns.
日本語の概要は準備中です。原文の説明を表示しています。
Tailwind CSS v4 principles. CSS-first configuration, container queries, modern patterns, design token architecture.
日本語の概要は準備中です。原文の説明を表示しています。
Set up Tailwind CSS v4 in Expo with react-native-css and NativeWind v5 for universal styling
日本語の概要は準備中です。原文の説明を表示しています。
Use when designing/implementing UI with Tailwind CSS (layout, typography, responsive, theming, component patterns). Includes quick recipes and conventions for clean, consistent web design.
日本語の概要は準備中です。原文の説明を表示しています。
Apply exact Tailwind arbitrary shadow utilities for polished, layered neutral elevation. Use when compact cards, controls, panels, popovers, hero media, feature callouts, or modal-like containers need refined shadows without default Tailwind shadow scales or colored tinting.
日本語の概要は準備中です。原文の説明を表示しています。
Set up Tailwind CSS v4 in Expo with react-native-css and NativeWind v5 for universal styling
日本語の概要は準備中です。原文の説明を表示しています。
Uniwind — Tailwind CSS v4 styling for React Native. Use when adding, building, or styling components in a React Native project that uses Tailwind with className.
日本語の概要は準備中です。原文の説明を表示しています。
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.
日本語の概要は準備中です。原文の説明を表示しています。
Build scalable design systems with Tailwind CSS, design tokens, component libraries, and responsive patterns. Use when creating component libraries, implementing design systems, or standardizing UI patterns.
日本語の概要は準備中です。原文の説明を表示しています。
Generate complete, accessible colour palettes from a single brand hex. Produces 11-shade scale (50-950), semantic tokens, dark mode variants, Tailwind v4 CSS output, WCAG contrast checks. Use whenever the user supplies a brand hex and asks for a palette, mentions setting up a design system, wants Tailwind theme colours from a brand colour, or asks to check colour accessibility / contrast.
日本語の概要は準備中です。原文の説明を表示しています。
Pre-built animated React component collections combining Magic UI (150+ TypeScript/Tailwind/Motion components) and React Bits (90+ minimal-dependency animated components). Use this skill when building landing pages, marketing sites, dashboards, or interactive UIs requiring pre-made animated components instead of hand-crafting animations. Triggers on tasks involving animated UI components, Magic UI, React Bits, shadcn/ui integration, Tailwind CSS components, or component library selection. Alternative to manually implementing animations with Framer Motion or GSAP.
日本語の概要は準備中です。原文の説明を表示しています。
Build scalable design systems with Tailwind CSS v4, design tokens, component libraries, and responsive patterns. Use when creating component libraries, implementing design systems, or standardizing UI patterns.
日本語の概要は準備中です。原文の説明を表示しています。
Provides comprehensive Tailwind CSS utility-first styling patterns including responsive design, layout utilities, flexbox, grid, spacing, typography, colors, and modern CSS best practices. Use when styling React/Vue/Svelte components, building responsive layouts, implementing design systems, or optimizing CSS workflow.
日本語の概要は準備中です。原文の説明を表示しています。
Skill for creating and managing a Design System using Tailwind CSS and shadcn/ui. Use when defining design tokens, setting up theming with CSS variables, building a consistent UI component library, initializing a design system configuration, or wrapping shadcn/ui components into design system primitives.
日本語の概要は準備中です。原文の説明を表示しています。
Build polished, intentional UIs with concrete CSS/Tailwind values — typography, color, layout, spacing, dark mode, accessibility, animations, components. Encodes specific, opinionated rules with exact values, not vague advice. Covers buttons, cards, forms, tables, navigation, dashboards, landing pages, onboarding, and more. Triggers on "absolute ui", "design a UI", "style this component", "make this less like AI slop", "fix the spacing/typography/color", "dark mode", "design a pricing page", "make this look better".
日本語の概要は準備中です。原文の説明を表示しています。
Define component variants with CVA. Use when creating variant-based components with Tailwind, building design system tokens, or managing complex conditional class names in React.
日本語の概要は準備中です。原文の説明を表示しています。
Aceternity UI is a collection of animated React components (3D cards, spotlight, background beams, moving borders, wavy backgrounds) built with Tailwind CSS and the motion library, installed into your project as source through the shadcn CLI. Use when someone asks for "animated hero section", "3D tilt card", "spotlight effect", "moving border button", "Aceternity component", or "glowing background" in a React or Next.js app.
日本語の概要は準備中です。原文の説明を表示しています。
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.
日本語の概要は準備中です。原文の説明を表示しています。