Konten ini belum tersedia dalam bahasa Anda dan ditampilkan dalam bahasa Inggris.

Color Palette Extractor

Skill Terverifikasi

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.

Ringkasan 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'.

Instalasi

npx skills add onewave-ai/claude-skills

Menjalankan Vercel skills CLI (skills.sh) via npx — memerlukan Node.js secara lokal dan setidaknya satu agen yang kompatibel dengan skills terinstal (Claude Code, Cursor, Codex, …). Mengasumsikan repo mengikuti format agentskills.io.

28 days ago

onewave-ai

113 stars

MIT

Diperbarui 2 days ago

Lihat sumber

Ekstensi serupa

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