# How taste-skill Enforces a Color Consistency Lock Across a Page

> Discover how taste-skill enforces color consistency across your pages. Learn about its single accent color mandate, centralized design tokens, and automated audits to eliminate stray colors.

- Repository: [Leon Lin/taste-skill](https://github.com/Leonxlnx/taste-skill)
- Tags: how-to-guide
- Published: 2026-05-31

---

**taste-skill enforces a color consistency lock by mandating a single accent color for each page, storing it in a centralized design token, and running automated pre-flight audits that reject any component containing stray colors before shipping.**

The `taste-skill` repository by Leonxlnx encodes strict visual governance through a mandatory **color consistency lock** mechanism. This rule ensures that every generated page maintains unified branding by locking one accent color across all components and automatically auditing for violations before delivery.

## The Specification in SKILL.md

According to the source code in [`skills/taste-skill/SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md), the lock is declared as a mandatory design rule within the *Color Calibration* section (lines 886–894). The specification explicitly states:

> "Once an accent color is chosen for a page, it is used on the WHOLE page… Pick one accent, lock it, audit every component before shipping."

This declaration establishes that **color consistency** is not optional but a hard requirement that gates the shipping criteria.

## How the Color Consistency Lock Works

The enforcement mechanism operates through five sequential stages that transform a design rule into an auditable technical constraint.

### 1. Select One Accent Color

After reading the design brief, the system selects **one** accent color for the entire page. This decision guarantees visual unity and prevents the "random colour drift" characteristic of poorly generated AI designs.

### 2. Centralize in Design Tokens

The chosen color is stored in a global variable such as `ACCENT_COLOR` within a Tailwind configuration file or design-tokens module. This creates a single source of truth, ensuring no accidental hard-coded hex values appear in component code.

### 3. Audit with Pre-Flight Checks

Before shipping, **pre-flight checks** audit every component to verify that only the centralized `ACCENT_COLOR` token is used for borders, background fills, hover states, and focus rings. If a stray color is detected, the generation fails and the LLM must rewrite the component.

### 4. Ban Multiple Palettes

The specification explicitly forbids "multiple palettes per project" and mandates a **single theme** (light or dark) throughout the page. This prevents contradictory visual language and maintains brand fidelity across the entire user interface.

### 5. Runtime Safety

When code is emitted, the color token is referenced via Tailwind utility classes (e.g., `bg-[var(--accent)]`, `text-[var(--accent)]`) or component props (`color={accent}`). This ensures the lock survives both compile-time and runtime, preventing developers from accidentally overriding colors without updating the central token.

## Implementation Examples

Below are practical implementations showing how a project generated by *taste-skill* applies the color consistency lock.

### Central Token Configuration

```javascript
// tailwind.config.js – central token definition
module.exports = {
  theme: {
    extend: {
      colors: {
        // The single accent chosen for the page
        accent: '#10B981',   // emerald-500 (example)
      },
    },
  },
  plugins: [],
};

```

### Component Usage

```tsx
// PrimaryButton.tsx – consistent accent usage
export function PrimaryButton({ children }: { children: ReactNode }) {
  return (
    <button className="
      bg-accent               /* background uses the global accent */
      text-white
      hover:bg-accent/90
      focus-visible:ring-2 focus-visible:ring-accent
      py-2 px-4 rounded-md
    ">
      {children}
    </button>
  );
}

```

### Pre-Flight Audit Script

```javascript
// audit-colors.js – enforcement script run before shipping
import { readFileSync } from 'fs';
import postcss from 'postcss';
import tailwindcss from 'tailwindcss';

const css = readFileSync('src/**/*.tsx', 'utf8');
const matches = css.match(/#([0-9a-fA-F]{3,6})/g) ?? [];

for (const hex of matches) {
  if (hex !== '#10B981') {
    console.error(`❌ Unexpected colour ${hex} – violates color-consistency lock`);
    process.exit(1);
  }
}
console.log('✅ All colours respect the accent lock');

```

## Summary

- **taste-skill** encodes color consistency as a mandatory rule in [`skills/taste-skill/SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md) (lines 889–892), requiring one accent color per page.
- The lock relies on a **centralized design token** (`accent` in Tailwind config) to eliminate hard-coded hex values.
- **Pre-flight audits** automatically scan every component and fail the build if stray colors are detected.
- The specification bans multiple palettes and mandates a single theme to prevent visual fragmentation.
- Runtime references via CSS variables and Tailwind classes ensure the lock persists through the development lifecycle.

## Frequently Asked Questions

### What happens if a component uses a different hex color?

The pre-flight audit script detects the discrepancy by scanning source files for hex codes that do not match the centralized `ACCENT_COLOR` token. If a violation is found, the script exits with an error code, forcing the LLM or developer to rewrite the component before the page can be shipped.

### Can I use multiple accent colors in different sections of the same page?

No. The specification in [`SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/SKILL.md) explicitly forbids multiple palettes per project and requires that the single chosen accent color is used on the **whole page**. This rule prevents visual fragmentation and ensures brand consistency across all UI elements.

### Where is the color consistency rule defined in the source code?

The rule is defined in the *Color Calibration* section of [`skills/taste-skill/SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md) at lines 886–894, specifically lines 889–892, where it states the requirement to "Pick one accent, lock it, audit every component before shipping."

### How does the audit script detect color violations?

The audit script uses regular expressions to scan generated TypeScript and CSS files for hard-coded hexadecimal color values (e.g., `#10B981`). It compares each discovered hex code against the authorized `ACCENT_COLOR`; any mismatch triggers a build failure, ensuring only the locked color appears in the final output.