---
name: color-schema
description: "Nastavení barev, redesign a výběr barevného schématu pro aplikaci. Použij vždy když uživatel chce: nastavit barvy, změnit barvy, vybrat barevné schéma, změnit design, upravit paletu barev, přebarvit aplikaci, zvolit color scheme, dark mode, light mode."
argument-hint: "Popiš požadovaný styl nebo náladu (např. tmavý, akademický, svěží, minimalistický)"
---

# Color Schema Skill

## Kdy použít
- Uživatel chce změnit barvy aplikace nebo jejích součástí
- Uživatel chce zvolit, navrhnout nebo přepnout barevné schéma
- Redesign nebo vizuální refresh aplikace
- Nastavení dark / light modu
- Přizpůsobení kategorií událostí nebo sémantických barev

## Postup

### 1. Zjisti kontext požadavku

Přečti a vezmi v úvahu:
- Aktuální stav CSS (`src/styles.css`) — jaké proměnné a barvy se aktuálně používají
- Dokumentaci barev projektu: [`docs/barvy.md`](../../../docs/barvy.md) — obsahuje připravená schémata, CSS tokeny a pravidla přístupnosti

### 2. Nabídni schémata k výběru

Na základě požadavku uživatele vyber a navrhni **2–4 konkrétní schémata** z dostupných možností v [references/SCHEMAS.md](./references/SCHEMAS.md).

Každé schéma prezentuj takto:
```
### [Název schématu] [emoji]
> Stručná charakteristika (1 věta)
- Primární barva: `#HEX` (barevný náhled slovy: modrá, zelená…)
- Charakter: tradiční / moderní / tmavý / svěží / …
- Vhodné pro: [příklady použití]
```

Vždy uveď **doporučené schéma** pro daný kontext.

### 3. Počkej na výběr uživatele

Nepokračuj s implementací dokud uživatel neschválí konkrétní schéma.

### 4. Implementuj vybrané schéma

Po potvrzení:

1. Aktualizuj CSS styly dle zvoleného schématu
2. Zachovej strukturu CSS custom properties (`:root { --cal-* }`)
3. Respektuj pravidla přístupnosti WCAG 2.1 (min. kontrast 4,5:1 pro text)
4. Pokud projekt používá `data-theme` atribut, nastav ho konzistentně

Vždy přečti kompletní CSS soubory, protože hodnoty mohou být hardcoded.

## Referenční materiály

- Dostupná schémata a tokeny: [references/SCHEMAS.md](./references/SCHEMAS.md)
- Projektová dokumentace barev: [`docs/barvy.md`](../../../docs/barvy.md)
- Pravidla tmavého designu: uživatelská paměť (`dark-theme.md`)