Description
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.…
Highlights
- Typography scale with defined roles
- Accessible color palettes
- Spacing and sizing systems
- Icon system guidance
- Design tokens, theming and dark mode
- Installs with the skills CLI
Ratings & Reviews
No ratings yet
Be the first to rate visual-design-foundations.
People also visit
visual-design-foundations FAQ
What does this skill cover?
Typography, color, spacing and iconography, combined into a cohesive and accessible visual system.
What are design tokens?
Named values that carry design decisions, such as colors and sizes, into code.
Does it cover dark mode?
Yes. Implementing dark mode or theming is one of its topics.
Should I check the contrast myself?
Yes. Color contrast claims should be measured with a tool on the final palette.
How do I install it?
Run npx skills add https://github.com/wshobson/agents --skill visual-design-foundations.
What security audits does it have?
skills.sh lists three audits: Gen Agent Trust Hub Pass, Socket Pass and Snyk Pass.
What are the best visual-design-foundations alternatives?
Popular alternatives to visual-design-foundations include penpot-uiux-design, premium-frontend-ui and anthropics/theme-factory. See all visual-design-foundations alternatives