project-consistency

Generates shared CSS variables, validates component naming conventions, creates layout pattern templates. Use when coordinating design system, theme, consistent styling, CSS variables, or component library across parallel agents.

Quality

77%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

Passed

No findings from the security scan

Fix and improve this skill with Tessl

tessl review fix ./src/orchestrator/skills/project-consistency/SKILL.md

Project Consistency

Produce shared artifacts and automated checks before parallel work begins.

Foundation-First Principle

Phase 1 (sequential): foundation-setup creates tokens, Layout, UI library, style guide brief. Phase 2 (parallel): every page task imports from Phase 1 — no new tokens, no duplicated components.

Foundation Artifacts & Page Rules

Artifact	Path	Page Agent Rules
Design tokens	`src/styles/tokens.css`	Import only. Never introduce new color/font/spacing values.
Shared layout	`src/components/Layout.tsx` / `Layout.astro`	Wrap every page. Never recreate.
UI components	`src/components/ui/`	Import from library. PascalCase components, camelCase props.
Style guide brief	Inline in prompts	Match tone + terminology exactly. Follow heading hierarchy.

Validation checkpoints:

Foundation complete: tokens.css has all palette/type/spacing vars, Layout renders, UI components compile.
Per-page: grep -r .style={{. src/pages/ returns 0 hits (no inline styles). All imports resolve.

Convoy Integration

Include these 5 Foundation References in every page prompt:

1. Design tokens path   2. Layout path   3. UI components path
4. Aesthetic direction   5. Content tone

Prompt templates: see TEMPLATES.md.

Example: `src/styles/tokens.css`

:root {
	/* Palette */
	--color-bg: #ffffff;
	--color-foreground: #0f172a;
	--color-primary: #0ea5e9;
	--color-primary-600: #0284c7;

	/* Typography */
	--font-base: 'Inter, system-ui, -apple-system, sans-serif';
	--text-sm: 0.875rem;
	--text-base: 1rem;

	/* Spacing */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 16px;

	/* Radius */
	--radius-sm: 6px;
	--radius-md: 12px;
}

UI components consume these vars only — e.g. bg-[var(--color-primary)], never a literal hex.

Anti-Patterns

Anti-pattern	Fix
Agents pick their own fonts/colors	Foundation creates tokens first
Copy-pasting `Button` between pages	Import from shared library
Inline `style={{ color: '#...' }}`	CSS class with token variable
Foundation and page tasks run in parallel	Foundation phase must fully complete first

Repository: monkilabs/opencastle
Path: src/orchestrator/skills/project-consistency/SKILL.md
Commit: fa0c341

Last updated: 5 days ago
First committed: 5 months ago

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.