Self-hosted alternatives to visual-design-foundations

V

visual-design-foundations

Apply typography, color theory, spacing systems

visual-design-foundations is an agent skill from the wshobson/agents collection for building cohesive, accessible visual designs from the basic systems behind them: typography, color, spacing and iconography. The skill sets up a visual system that holds together across a product. Its core systems begin with a typography scale, which gives each text size a defined role, and it covers selecting and pairing typefaces, building accessible color palettes that meet contrast requirements, creating a spacing and sizing system so layouts follow a consistent rhythm, and designing icon systems that match in weight and style. It also covers improving visual hierarchy and readability, implementing dark mode or theming, and auditing an existing design for visual consistency. The skill applies when establishing design tokens for a new project, creating or refining a spacing system, selecting and pairing typefaces, building accessible palettes, designing icon systems, improving hierarchy, auditing consistency, and implementing theming. Design tokens are the named values that carry these decisions into code, so the agent can produce them alongside the design. Accessibility claims about color contrast should be checked with a measuring tool on the final palette. The skill is installed with the skills CLI from the wshobson/agents repository. Its skills.sh page showed about 13.3K installs and passing results from three security audits at the time of the scan.