# Build Visual Design Foundations

Teams often struggle to keep typography, color, spacing, and icon choices consistent. This skill gives practical design-system guidance for accessible, coherent interfaces.

## Install

```bash
npx skillstore add wshobson/visual-design-foundations
```

## Metadata

- Status: approved
- Slug: wshobson-visual-design-foundations
- Skillstore revision: r1
- Version status: missing
- Tree hash: 92fe3fdf8898dddb0d226e389e05135901ad62b3222e4b9149b3e15d8219f34f
- Author: wshobson
- GitHub username: wshobson
- License: MIT
- Repository: https://github.com/wshobson/agents/tree/main/plugins/ui-design/skills/visual-design-foundations/
- Ref: 64ca8af0f54a325752f08bd54e52151061ea659a
- Supported tools: Claude, Codex, Claude Code
- Audit status: complete
- Agent install advisory: allowed
- Manual install advisory: allowed
- Artifact signature: available
- Audit attestation: unavailable
- Human verification: not\_verified
- Risk factors: scripts, external\_commands, network
- Quality score: 75
- Public page: https://skillstore.pages.dev/skills/wshobson-visual-design-foundations
- Manifest: https://skillstore.pages.dev/api/skills/wshobson-visual-design-foundations/manifest

## Capabilities

- Defines typography scales, line heights, font pairing guidance, and readable text widths.
- Builds semantic color tokens, accessible palettes, dark mode rules, and contrast checks.
- Creates spacing scales, layout rhythm, sizing rules, and touch target guidance.
- Designs icon sizing systems, SVG sprite patterns, icon buttons, and library selection guidance.
- Applies design foundations to Tailwind, CSS variables, React examples, and style guide decisions.

## Use Cases

- Define a Design System Baseline: Create typography, color, spacing, and icon rules before a new interface is built.
- Improve Interface Consistency: Audit screens for visual hierarchy, token drift, inconsistent spacing, and weak contrast.
- Prepare Accessible UI Guidelines: Document readable type, accessible color pairs, touch targets, and icon usage for product teams.

## Prompt Templates

### Create Basic Tokens

```
Create typography, color, spacing, and icon tokens for a small dashboard. Explain each choice and include accessibility checks.
```

### Audit Visual Consistency

```
Review this interface for typography, color, spacing, and icon consistency. List the highest impact fixes first.
```

### Design Dark Mode Rules

```
Create a dark mode strategy for these design tokens. Include semantic colors, contrast requirements, and state changes.
```

### Build a System Specification

```
Produce a complete visual foundations specification. Cover typography hierarchy, color roles, spacing rhythm, icon rules, and implementation notes.
```

## Limitations

- Does not replace user testing, brand strategy, or visual QA in a real product.
- Does not generate final images, logos, or custom illustrations by itself.
- Code examples require adaptation before production use.
- Accessibility advice still needs validation with real content and target devices.

## Best Practices

- Start with semantic tokens, then map them to primitive color, type, and spacing values.
- Verify contrast, readable line length, touch targets, and focus states before final delivery.
- Keep spacing, sizing, and icon rules small enough for teams to apply consistently.

## Anti Patterns

- Mixing arbitrary pixel values with tokenized spacing creates visual drift across screens.
- Choosing colors by appearance alone can create contrast failures and unclear status meaning.
- Adding many fonts, weights, or icon styles makes interfaces harder to scan and maintain.

## Security Audit

- Audited at: 2026-07-08T11:59:01.094\+00:00
- Summary: The static findings are false positives from Markdown fences, JavaScript template literals, regular expression matching, and resource links. No prompt injection, credential handling, process execution, or malicious network intent was found in the reviewed files.

## Stats

- Views: 175
- Downloads: 22
- Favorites: 0
- Popularity score: 0