design-excellence

Design Excellence acts as the core aesthetic engine for the Toh Framework, providing a rigorous design system that prevents common 'AI-generated' visual artifacts. Its primary mission is to ensure that interfaces built by AI agents possess the nuance, restraint, and professional polish of human-crafted software. By standardizing color philosophies, typography scales, spacing tokens, and subtle motion patterns, this skill allows the Design Reviewer sub-agent to systematically audit and upgrade UI components to meet enterprise-grade standards. The system explicitly rejects 'AI defaults' like excessive gradients, inconsistent padding, and oversized typography, instead favoring balanced layouts and native-feeling system fonts.

• Implements a strict constraint-based color system using Tailwind's slate scale and a single-accent rule to maintain visual consistency.

• Enforces a professional typography hierarchy including precise type scales for page titles, section headers, and body text to ensure readability.

• Provides a robust spacing system based on standard Tailwind intervals to prevent the cramped or disconnected feel of typical automated layouts.

• Includes a comprehensive motion library using Framer Motion that emphasizes functional feedback over flashy, distracting animations.

• Defines clear anti-patterns to proactively avoid, such as pure black text, excessive font weights, and improper use of gradients.

• Serves as the authoritative style guide for the Design Reviewer sub-agent, enabling automated visual polish and aesthetic optimization.

• Users should trigger this skill via commands like /toh-design or 'polish UI' when an interface feels too generic or 'AI-made'.

• Input relies on the context of the current component tree or page layout; the agent evaluates against the defined tokens for padding, margin, and color.

• Outputs consist of refactored Tailwind classes, corrected component structures, and refined animation durations tuned to 150-500ms.

• Constraints include keeping background colors near-white or neutral to maintain readability, ensuring hover states use native transition-colors, and capping the design system to one primary accent color per application. It is optimized for use within the Toh framework ecosystem, specifically for SaaS applications, admin dashboards, and landing pages that require a high-trust, professional appearance.