Accessibility Compliance
Implement WCAG 2.2 compliant interfaces with mobile accessibility, inclusive design patterns, and assistive technology support. Use when auditing accessibility, implementing ARIA…
Design & UI
Seth Hobson42k
Apply typography, color theory, spacing systems, and iconography principles to create cohesive visual designs. Use when establishing design tokens, building style guides, or improving visual hierarchy and consistency.
Install
Run this in your project folder. It works with Claude Code, Cursor, Codex and dozens of other agents.
$ npx skills add wshobson/agents --skill visual-design-foundationsNeeds Node.js. Add -g to install for every project, or -a claude-code to skip the agent picker.
How to use Visual Design Foundations
Once it's installed, Claude reads this skill on its own whenever a request matches what it's for, so you don't have to mention it by name. In Claude Code you can also run it directly by typing /visual-design-foundations.
It contains no scripts, only instructions and reference files, so it can't run code on its own.
What the instructions cover
- 1When to Use This Skill
- 2Core Systems
- 3Quick Start: Design Tokens in Tailwind
- 4Typography Best Practices
- 5Color Theory
- 6Spacing Guidelines
- 7Iconography
- 8Best Practices
- 9Common Issues
Section headings from the skill's SKILL.md file.
What's inside · 4 files
- SKILL.md
- references/color-systems.md
- references/spacing-iconography.md
- references/typography-systems.md
More from Seth Hobson
See all →AI Debt Detector
Use after generating code, after accepting AI suggestions, or when reviewing AI-written modules. Also use when code works but feels brittle, when error handling seems thin, when…
AI & AgentsSeth Hobson42k
Airflow Dag Patterns
Build production Apache Airflow DAGs with best practices for operators, sensors, testing, and deployment. Use when creating data pipelines, orchestrating workflows, or scheduling…
Data & DatabasesSeth Hobson42k
Angular Migration
Migrate from AngularJS to Angular using hybrid mode, incremental component rewriting, and dependency injection updates. Use when upgrading AngularJS applications, planning…
FrontendSeth Hobson42k
More Claude skills for design
See all →Frontend DesignTop pick
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't…
Design & UI
Anthropic187k
UI UX Pro MaxTop pick
UI/UX design intelligence for web, mobile, and desktop. This skill should be used when designing, building, reviewing, or fixing interfaces, including pages, components, design…
Design & UI
NextLevelBuilder145k
Taste SkillTop pick
tasteskill v2, the anti-slop frontend skill. Art direction for websites, distilled from a study of 247 curated gallery sites (One Page Love, Awwwards Sites of the Day). Deals…
Design & UI
Leon110k
Impeccable
Use when the user wants to design, redesign, shape, critique, audit, polish, simplify, harden, animate, or otherwise improve a frontend interface: websites, landing pages…
Design & UI
Paul Bakaus103k