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

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, 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

// 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

// 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

// 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 (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 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 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.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}