anti-frankenstein

What problem does it solve?

It prevents frontend code from “growing uncontrolled” by stopping new or modified UI styling (CSS/HTML/visual presentation) without first checking what already exists in the codebase and enforcing shared governance rules.

Core Features & Use Cases

• Prevents duplicated UI styling: Reuses existing classes/components and edits existing CSS instead of creating new ones.
• Enforces correct placement: Ensures new CSS lives in the right directory/module and follows the required loading hierarchy for tokens and shells.
• Eliminates hardcoded presentation values: Requires usage of centralized tokens for colors, fonts, radii, shadows, and transitions, avoiding magic numbers and hardcoded design values.
• Standardizes conventions: Checks naming (kebab-case), selector scoping, avoids generic tag selectors, forbids inline styles like HTML style=, and discourages local keyframes when tokens already define animations.
• Promotes minimal, necessary changes: Blocks unnecessary new files/classes/tokens and provides a decision rule for when creation is actually justified.

Quick Start

Use anti-frankenstein before creating or updating any CSS/HTML visual code to verify reuse, token usage, conventions, and mandatory post-checkpoint registration.