本文へ移動
cccskills
無料GitHub で公開

color-principles

Use when reviewing or designing a color palette for a UI, website, or app — seven principles for premium, calm, accessible color (palette size, muted tones, contrast, accent restraint, near-black/white, consistency, whitespace).

インストール方法を見る

含まれるファイル(1)

  • SKILL.md2.0 KB

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

Premium Color Principles

Seven principles for color that feels calm, premium, and accessible. Use them to review or design any digital interface — and reference them by number when giving feedback.

Triggers: color, palette, UI design, visual hierarchy, contrast, muted tones, accent color, design feedback, color theory.

The 7 principles

1. Reduce your palette

The fewer colors you use, the more each one matters.

  • 3 colors maximum
  • Neutral grays as the base
  • One accent color — for CTAs only

2. Use muted tones more often

If everything shouts, nothing stands out.

  • Avoid saturated colors for large areas
  • Muted tones read as premium and calm

3. Create intentional contrast

Contrast tells users where to look first.

  • Minimum 4.5:1 for text (WCAG AA)
  • Target 7:1+ for premium (WCAG AAA)

4. Use accent colors sparingly

Accent colors only work when they're rare.

  • One accent per view/screen
  • Reserve it for the primary action

5. Avoid pure black and pure white

Tiny shifts create different feelings.

  • Use #1a1a1a or #121212 instead of #000
  • Use #FAFAF7 or #F5F5F0 instead of #FFF

6. Keep color behavior consistent

Users shouldn't have to relearn your colors.

  • One action = one color, always

7. Let whitespace support color

Whitespace makes color intentional.

  • Don't crowd colors together

Feedback format

When reviewing a design, structure the response as:

  1. Assessment — which principles it follows or violates
  2. Analysis — specific feedback per principle
  3. Suggestions — concrete hex recommendations
  4. Priority — what to fix first

Pairs well with kika-design-system — these are the general review lens; that skill is one opinionated system built on them.

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

同じリポジトリのスキル

概要と使いどころ

Use when creating a new project folder, starter pack, app scaffold, or agent-ready workspace — AGENTS.md, README, TASKS, DECISIONS, PROMPTS, an idempotent bootstrap script, and starter-pack modes.

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

aka-kika/akakika-skills112026年9月12日 更新

Use when designing or implementing states for AI agent tasks, background jobs, local model runs, queues, and notifications — one shared set of states, only legal transitions, and a recovery path out of every failure.

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

aka-kika/akakika-skills112026年9月12日 更新

Use when exposing app features to App Intents, Shortcuts, Siri, Spotlight, widgets, controls, or system actions — small safe AppIntents, AppShortcutsProvider, AppEnum/AppEntity, parameters, and open-vs-background behavior.

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

aka-kika/akakika-skills112026年9月12日 更新

Use when designing, reviewing, or implementing a command-palette / ⌘K layer for an Apple-platform app — keyboard-first global search, ranked and grouped results, native floating panel, and protected destructive commands.

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

aka-kika/akakika-skills112026年9月12日 更新

Use when designing or implementing empty, first-run, no-result, offline, error, or waiting states in Apple-platform apps — every empty state explains what is missing, why it matters, and what to do next.

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

aka-kika/akakika-skills112026年9月12日 更新

Use when designing or implementing feedback, status, progress, alerts, errors, success states, and live activity indicators in Apple-platform apps — inline status, banners, alerts, notifications, and loading states.

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

aka-kika/akakika-skills112026年9月12日 更新

aka-kika のスキルをすべて見る

このスキルの問題を報告する