Skills
.Work. You
Rest

brand-art-direction

Official

Guarantee clean minimal MD3 visual consistency.

Design & Creative#material design#design tokens#ssr#interaction states#vuetify#visual qa#ui branding
Authore-xode
Version1.0.0
Installs0

System Documentation

What problem does it solve?

It prevents inconsistent and unverified visual styling by defining a strict, screenshot-checkable brand-art charter for the Vue SSR Starter Kit.

Core Features & Use Cases

  • MD3 clean-minimal visual identity: Establishes calm surfaces, single indigo accent, neutral gray chrome, and restrained styling for production UI.
  • Canonical interaction behavior: Specifies screenshot-verifiable hover/elevation archetypes so sibling components behave identically.
  • Guardrails against dead decoration: Enforces usage of only live tokens/mixins and explicitly forbids referencing render-nonexistent utilities.
  • Evidence-based pre-delivery QA: Provides a graded checklist to confirm surface rhythm, hover correctness, palette roles, motion reduction behavior, and visual integrity via PNGs.

Quick Start

When you change the styling of any rendered view, follow the charter’s systems and then re-capture screenshots with scripts/screenshots.mjs to confirm the result matches the rubric.

Dependency Matrix

Required Modules

None required

Components

referencesscripts

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: brand-art-direction
Download link: https://github.com/e-xode/vue-ssr/archive/main.zip#brand-art-direction

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.