visual-design-foundations

This skill provides a foundational framework for software agents to generate and maintain professional-grade design systems. It enables agents to act as design-system engineers, ensuring that interfaces remain accessible, scalable, and visually consistent across complex applications. By leveraging standard industry practices such as the 8-point grid, WCAG contrast ratios, and modular type scaling, the agent can programmatically construct style guides, Tailwind CSS configurations, and component-level spacing rules. This is essential for developers, frontend engineers, and UI designers who need to bridge the gap between design intent and code implementation.

• Implementing design tokens including semantic color variables for brand, success, error, and neutral states.

• Configuring modular typography scales (e.g., ratio-based font sizing) and responsive line-height guidelines.

• Applying the 8-point grid system for consistent margins, padding, and layout whitespace.

• Automating accessibility audits using WCAG-compliant color contrast ratio calculations.

• Generating responsive layouts using CSS clamp functions and container-aware sizing.

• Defining iconography sizing systems and standardizing component-level spacing routines.

• Supporting dark mode and themed UI implementation through CSS variable scoping.

• Use this skill when initiating new projects to establish a robust CSS architecture via Tailwind config or standard CSS custom properties.

• Apply when auditing existing codebases to identify and resolve visual hierarchy inconsistencies.

• Ideal for translating design mockups from tools like Figma into maintainable codebase constants.

• When implementing, ensure the agent receives the design system requirements or specific brand guidelines as context.

• Input requirements often include brand color palettes or specific typeface choices; output typically includes CSS/Tailwind configuration files, token manifest files, or component-specific styling guidelines.

• Constraints include maintaining semantic accessibility standards and ensuring fluid responsiveness for different screen breakpoints.