Web Design Reviewer

microsoft/GitHubCopilot_Customized/.github/skills/web-design-reviewer

Çoklu dosya

designResmi

Resmi Sağlayıcı Skill'iView repo

This skill enables visual inspection of websites running locally or remotely to identify and fix design issues. Triggers on requests like "review website design", "check the UI", "fix the layout", "find design problems". Detects issues with responsive design, accessibility, visual consistency, and layout breakage, then performs fixes at the source code level.

Dosyalar2 dosya

SKILL.md368 satır

Loading editor…

Kurulum

Önerilen

Tek komut — ajanınız otomatik olarak devreye alır.

AI aracını seç

Kurulum komutunu görmek için yukarıdan bir AI aracı seçin.

veya

Manuel Kurulum

Daha fazla adım

Arşivi indirin ve dosyaları projenize manuel olarak ekleyin.

Skill detayları

Versiyonv1.0.0

YazarMicrosoft

Kategoridesign

Skill IDmicrosoft/GitHubCopilot_Customized/.github/skills/web-design-reviewer

Dosyalar2 dosya

İlgili skill'ler

Component FixturesUse when creating or updating component fixtures for screenshot testing or their shared infrastructure, or when designing UI components to be fixture-friendly. Covers fixture file structure, theming, service setup, CSS scoping, async rendering, validation, and common pitfalls.Design PhilosophyThe VS Code design philosophy — a shared Values→Principles→Moves vocabulary for reasoning about UI in design terms instead of raw pixels. Use when designing, building, reviewing, or giving feedback on any visual surface; when deciding a radius, spacing, type role, icon size, border, color, or motion; or when translating a "this feels off" observation into a concrete, principled fix.Ux Css LayoutVS Code CSS conventions, file organization, class naming, standard sizes, SplitView/Grid layout, scrollable content, responsive layout, and text overflow/ellipsis patterns. Use when writing CSS, building layouts, or fixing text truncation issues.Ux ThemingVS Code theming, color tokens, widget styles, focus indicators, and high-contrast theme support. Use when registering colors, styling widgets with theme tokens, or ensuring HC/focus compliance.Add Adaptive Card FormCreate form-based UI for your Command Palette extension using Adaptive Cards. Use when asked to add forms, user input fields, toggle switches, text inputs, dropdown menus, data entry, surveys, configuration dialogs, or interactive content pages. Supports the Adaptive Cards Designer for visual form building.Headless ComponentAuthor or extend unstyled Fluent UI v9 primitives in @fluentui/react-headless-components-preview, including stable hooks, render functions, state data attributes, compound context wiring, tests, exports, and CSS Module stories. Use for any change that adds a headless component or component family to the preview library.