Skills visual-design-foundations

📦

visual-design-foundations

Name: visual-design-foundations
Author: wshobson

Content revision r1 Safe ⚡ Contains scripts⚙️ External commands🌐 Network access

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.

Supports: Claude Codex Code(CC)

📊 75 Adequate

Install with my Agent

Copy this request to your Agent. It includes the canonical Skill page and manifest.

Agent request

Review the Skillstore skill "visual-design-foundations" from https://skillstore.io/skills/wshobson-visual-design-foundations.md and its manifest at https://skillstore.io/api/skills/wshobson-visual-design-foundations/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.

Your Agent should still show its plan and request any confirmation required by the security policy.

Agent-readable resources

Use these links when an AI agent, crawler, or script needs clean context instead of reading the full page.

Markdown detail GET /skills/wshobson-visual-design-foundations.md Signed manifest GET /api/skills/wshobson-visual-design-foundations/manifest Signed lockfile GET /api/skills/wshobson-visual-design-foundations/lockfile

Test it

Using "visual-design-foundations". A team needs a visual foundation for a new SaaS dashboard.

Expected outcome:

A concise typography scale with usage rules for headings, body text, labels, and captions.
Semantic color roles for backgrounds, text, borders, actions, and status states.
A spacing scale and icon size system aligned to repeated interface patterns.

Using "visual-design-foundations". An existing product has inconsistent spacing and weak visual hierarchy.

Expected outcome:

A prioritized audit of inconsistent spacing, unclear hierarchy, contrast risks, and icon alignment issues.
Specific token changes that reduce arbitrary values and improve scanning across screens.

Using "visual-design-foundations". A design system needs accessible dark mode guidance.

Expected outcome:

A theme strategy using semantic roles instead of color names.
Contrast targets for text, controls, borders, focus states, and disabled states.

Security Audit

Safe

v4 • 7/8/2026 Open versioned report

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.

Files scanned

1,604

Lines analyzed

Review items

False positives ignored

Risk Factors

⚡ Contains scripts (1)

references/color-systems.md:239

⚙️ External commands (35)

🌐 Network access (5)

SKILL.md:322 SKILL.md:323 SKILL.md:324 SKILL.md:325 SKILL.md:326

No confirmed security findings were detected by the latest completed static and semantic audit. This does not prove the skill has no side effects.

Audited by: codex View Audit History →

Share & cite this report

Share the versioned assessment report, neutral badge, embed card, and citations. Skillstore reports evidence without deciding whether this Skill is safe.

Open versioned report

Copy report link

https://skillstore.io/skills/wshobson-visual-design-foundations/audits/4?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdown badge

[![Skillstore security assessment](https://skillstore.io/badges/skills/wshobson-visual-design-foundations/security.svg)](https://skillstore.io/skills/wshobson-visual-design-foundations?utm_source=security_passport_badge)

HTML badge

<a href="https://skillstore.io/skills/wshobson-visual-design-foundations?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/wshobson-visual-design-foundations/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

Embed card

<iframe src="https://skillstore.io/embed/skills/wshobson-visual-design-foundations.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>

Academic citations (APA · BibTeX · CFF)

APA citation

wshobson. (2026). visual-design-foundations security audit report (audit version 4) [Author version unspecified]. Skillstore. https://skillstore.io/skills/wshobson-visual-design-foundations/audits/4

BibTeX citation

@techreport{wshobson-wshobson-visual-design-foundations-2026,
  author = {wshobson},
  title = {visual-design-foundations security audit report (audit version 4)},
  institution = {Skillstore},
  year = {2026},
  number = {4},
  url = {https://skillstore.io/skills/wshobson-visual-design-foundations/audits/4},
  note = {Author version unspecified}
}

CITATION.cff

cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "visual-design-foundations security audit report (audit version 4)"
version: "unspecified"
type: report
authors:
  - name: "wshobson"
date-released: "2026-07-08"
url: "https://skillstore.io/skills/wshobson-visual-design-foundations/audits/4"
identifiers:
  - type: other
    value: "skillstore:wshobson-visual-design-foundations:audit:4"
    description: "Skillstore immutable audit report identifier"

Skillstore Score

Why this score Evidence Confidence: High

Architecture

Maintainability

Content

Community

Spec Compliance

What You Can Build

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.

Try These Prompts

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.

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.

Avoid

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.