Enforce Material Design 3 brand rules for Vue SSR Starter Kit views.
npx skills add https://github.com/e-xode/vue-ssr --skill brand-art-direction
Please help me install this Agent Skill. Skill: brand-art-direction Source: https://github.com/e-xode/vue-ssr/tree/main/.claude/skills/brand-art-direction Command: npx skills add https://github.com/e-xode/vue-ssr --skill brand-art-direction
It prevents inconsistent and unverified visual styling by defining a strict, screenshot-checkable brand-art charter for the Vue SSR Starter Kit.
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.
High-intent search queries and answers about installing and using this skill.
To enforce Material Design 3 visual consistency, apply a strict brand-art charter using injected live primitives like design tokens and Vuetify theme defaults. This ensures clean-minimal surfaces, two-surface rhythm, and canonical interaction states across rendered views.
Standardizing Vuetify hover and elevation states requires implementing canonical interaction archetypes. This ensures sibling components behave identically during visual polish work by leveraging only live design tokens and mixins instead of dead decoration utilities.
Visually QA Material Design 3 styling by running an evidence-based PNG checklist using screenshot scripts. This graded checklist confirms surface rhythm, hover correctness, palette roles, and reduced-motion guards to verify visual integrity.
Yes, this brand-art direction supports reduced-motion guards for UI interactions. The pre-delivery visual QA checklist explicitly includes verifying motion reduction behavior to ensure accessible canonical hover archetypes and elevation transitions.
UI styling breaks when referencing custom utilities because this approach enforces guardrails against dead decoration. You must use only injected live primitives like tokens and Vuetify mixins to maintain the strict clean-minimal Material Design 3 visual identity.
Yes, you can manage palette roles and indigo accent usage for production UI. It establishes a calm surface system with a single indigo accent and neutral gray chrome, explicitly defining screenshot-checkable rules for accent application and hero styling.
e-xodeConfigure Vuetify 4 light/dark themes and design tokens in Vue SSR applications.
vTRKACompare rendered UI screenshots against reviewed baselines to detect visual regressions.
shelbeelyImplement Material Design 3 theming in Vue.js with Vuetify 3.
Design-System-ETGenerate CSS design systems with Chameleon components and 3-tier token architecture.
