このコンテンツはお使いの言語にまだ対応していないため、英語で表示されています。

Color Palette Extractor

Skill 検証済み

Extract color palettes from images, websites, or designs. Identifies dominant colors, generates complementary schemes, and exports in multiple formats (HEX, RGB, HSL, Tailwind, CSS variables). Use when users need color schemes from images, brand colors, or design system palettes.

AI サマリー

This skill analyzes images, websites, or provided color codes to identify dominant colors, generate harmonious palettes, and output them in multiple formats like HEX, RGB, HSL, Tailwind, and CSS variables. It also includes accessibility checks and color psychology notes.

Versioning

warning:Release ManagementNo explicit versioning information (e.g., version field in SKILL.md, package.json, or changelog) is present, and install instructions would likely default to 'main'.

インストール

npx skills add onewave-ai/claude-skills

Vercel skills CLI(skills.sh)を npx 経由で実行します。ローカルに Node.js と、skills 対応のエージェント(Claude Code、Cursor、Codex など)が少なくとも 1 つインストールされている必要があります。リポジトリが agentskills.io 形式に従っていることを前提としています。

28 days ago

onewave-ai

113 stars

MIT

2 days ago に更新

ソースコードを表示

類似の拡張機能

Frontend Design

Create distinctive, production-grade frontend interfaces with high design quality. Provides analysis tools for auditing existing designs and generation tools for creating color palettes, typography systems, design tokens, and component templates. Supports React, Vue, Svelte, and vanilla HTML/CSS. Use when building web components, pages, or applications. Keywords: design, UI, frontend, CSS, components, palette, typography, tokens, accessibility.

Skill

jwynia

Frontend Design

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.

Skill

bytedance

Make Interfaces Feel Better

Design engineering principles for making interfaces feel polished. Use when building UI components, reviewing frontend code, implementing animations, hover states, shadows, borders, typography, micro-interactions, enter/exit animations, or any visual detail work. Triggers on UI polish, design details, "make it feel better", "feels off", stagger animations, border radius, optical alignment, font smoothing, tabular numbers, image outlines, box shadows.

Skill

jakubkrehel

Frontend Design Skill

Transform UI style requirements into production-ready frontend code with systematic design tokens, accessibility compliance, and creative execution. Use when building websites, web applications, React/Vue components, dashboards, landing pages, or any web UI requiring both design consistency and aesthetic quality.

Skill

answerzhao

shadcn/Tailwind Layouts

Generate correct shadcn/Tailwind layouts by applying CSS mental models. This skill should be used when the user asks to 'create a shadcn layout', 'fix layout issues', 'debug CSS height problems', 'make scrolling work', or has issues with Tailwind flex/grid. Keywords: shadcn, Tailwind, layout, CSS, flex, grid, height, scroll, overflow.

Skill

jwynia

Tailwind CSS Best Practices

Tailwind CSS patterns and conventions for frontend apps. Use when writing component styles, layouts, or working with CSS classes.

Skill

sergiodxa