Design & Media Agent Skills for VS Code

Design or build a frontend from zero using the curated UI Design Playbook sources, with a compatible free option by default and explicit…

Production-readiness pass for UI — audits and fixes error states, empty states, text overflow, small touch targets, and i18n gaps before…

UI implementation rules — design engineering directives, layout discipline, image strategy, AI tells (forbidden patterns), motion, dark…

Audit a product interface through real user tasks, visual hierarchy, accessibility, responsive behaviour, state feedback, and interaction…

Fix spacing rhythm, visual hierarchy, and layout issues in UI files — enforces consistent spacing units, adequate padding on interactive…

PRD to High-Fidelity UI Delivery Alignment / Desktop Workbench UI Mockup: When users already have a PRD, UI specifications, real front-end…

Scaffold a new mobile-first page using StyleSeed Toss layout patterns, section rhythm, and existing shell components.

Generate reusable UI patterns such as card sections, grids, lists, forms, and chart wrappers using StyleSeed Toss primitives.

Use this skill when the user needs to build a dashboard, settings page, data table, or any page layout.

Final pre-ship UI quality pass — reads the persisted critique snapshot as a prioritized backlog and implements fixes from P0 down

Conducts comprehensive pre-release quality audits across accessibility, visual hierarchy, interaction states, and AI design tropes.

Select and compare catalog sources for specific UI components, patterns, or integrations.

Analyze screenshots and existing interfaces into evidence-backed UI specifications.

Interactive StyleSeed setup wizard for choosing app type, brand color, visual style, typography, and the first screen scaffold.

Design planning interview before writing UI code — produces a design brief covering register, typography strategy, color constraints, and…

Audit, add, or update a UI resource source card in the UI Design Playbook catalog when license, access tier, provenance, integration, or…

Use when the user has UI screenshots or design exports that need batch conversion into Vue 3 components, especially with Vant, Element…

List, add, and update StyleSeed design tokens while keeping JSON sources, CSS variables, and dark-mode values in sync.

Fix typography hierarchy, font choices, type scale, and line-length in UI files — applies register-aware rules (brand vs product) with…

Professional typography rules for UI design, web applications, software interfaces, and all screen-based text.

Delivers rigorous, senior-level UI/UX critiques analyzing visual hierarchy, usability, design system alignment, and business metrics…