Installation

$ npx skills add smithery/neirth --skill graphics-design

Summary

Apply world-class graphic design principles following Apple HIG, Google Material Design, IBM Carbon, Airbnb DLS, Microsoft Fluent, and Netflix Hawkins design systems.
Use when: (1) Designing user interfaces, (2) Creating visual designs, (3) Establishing design systems, (4) Ensuring accessibility compliance, (5) Working with typography or color theory

Agent compatibility

Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.

Claude Code Not declared

Cursor Not declared

Codex Not declared

GitHub Copilot Not declared

Windsurf Not declared

Gemini CLI Not declared

Cline Not declared

OpenCode Not declared

Package contents

Files included with this skill beyond the listing page.

skill md SKILL.md 3,381 B

docs SUMMARY.md 188 B

SKILL.md

Graphics Design Engineering Rules

"Design is not just what it looks like and feels like. Design is how it works."
— Steve Jobs

Purpose

These rules establish the methodology for creating world-class visual designs and design systems. Drawing from the design excellence of Apple (Human Interface Guidelines), Google (Material Design), IBM (Carbon Design System), Airbnb (Design Language System), Microsoft (Fluent Design), and Netflix (Hawkins), this guide covers visual hierarchy, typography, color theory, motion design, accessibility, and design system architecture.

Reference Documentation

This skill includes comprehensive reference documentation organized by topic. Load the relevant reference as needed:

Design Systems & Principles

[design-systems.md](references/design-systems.md) - Detailed comparison of Apple, Google, IBM, Airbnb, Microsoft, and Netflix design systems
[design-principles.md](references/design-principles.md) - Core design principles from Apple (Clarity, Deference, Depth) and Microsoft Fluent (Five Pillars)
[design-tokens.md](references/design-tokens.md) - Design system architecture and design tokens (from Airbnb's Living Organism model)

Visual Design

[typography.md](references/typography.md) - Type scales, typography rules, and best practices
[color-theory.md](references/color-theory.md) - Color roles, Material Design 3 color system, Apple color guidelines, IBM Carbon color tokens, Pantone Matching System (PMS)
[visual-hierarchy.md](references/visual-hierarchy.md) - Netflix's content-first approach and visual hierarchy principles

Specialized Topics

[accessibility.md](references/accessibility.md) - WCAG compliance and IBM Carbon accessibility standards
[motion-design.md](references/motion-design.md) - Animation principles and motion design guidelines
[cross-platform.md](references/cross-platform.md) - Platform-agnostic design approach (Airbnb DLS)
[swiss-design.md](references/swiss-design.md) - International Typographic Style, Bauhaus influence, and Swiss Grid System
[tools-and-checklists.md](references/tools-and-checklists.md) - Industry standard tools, resources, and design checklists

Quick Reference

When to Use Which Reference

Starting a new design system? → Read design-systems.md and design-tokens.md
Working with typography? → Read typography.md
Choosing colors? → Read color-theory.md
Ensuring accessibility? → Read accessibility.md
Adding animations? → Read motion-design.md
Multi-platform design? → Read cross-platform.md
Grid-based layouts? → Read swiss-design.md

Design System URLs

For official documentation, refer to:

Apple HIG: developer.apple.com/design/human-interface-guidelines
Material Design 3: m3.material.io
IBM Carbon: carbondesignsystem.com
Microsoft Fluent: fluent2.microsoft.design

graphics-design