validating-ui-features（验证用户界面功能） Skills下载安装命令和教程

安装方式

通过对话安装

复制提示词发给支持本地命令或 Skills 的 AI 助手，先确认命令和权限，再让它执行。

请帮我安装这个 Agent Skill：validating-ui-features（验证用户界面功能）
来源仓库：https://github.com/microsoft-foundry/foundry-agent-webapp
仓库路径：skills/validating-ui-features
安装命令：
npx skills add https://github.com/microsoft-foundry/foundry-agent-webapp --skill validating-ui-features
安装前请先检查当前环境是否支持对应 CLI，并向我确认将要执行的命令、安装目录、联网范围和文件读写权限；确认后再执行。

命令行安装

复制命令到本机终端执行。该命令会通过 npx skills 从第三方来源获取 Skill；本站只展示命令，不托管安装包，也不自动执行。

skills.shnpx skills

npx skills add https://github.com/microsoft-foundry/foundry-agent-webapp --skill validating-ui-features

简介

validating-ui-features 辅助界面设计、视觉规范和交互体验优化，提升产品可用性。

适合生成 UI 方案、检查布局合理性与组件层级，需结合品牌和设计系统使用。
通过 GitHub 安装，使用 npx skills add 命令添加指定仓库的技能模块。
涉及真实页面改动时应通过截图或浏览器预览验证文本溢出和对齐表现。
适用宿主包括 Codex、Claude、Cursor、Gemini CLI，接入前应确认版本、权限和运行环境要求。

SKILL.md

Validating UI Features

CRITICAL: Load this skill before running any UI validation tests.

Prerequisites

Local dev servers running (Backend: 8080, Frontend: 5173)
Playwright MCP tools available
Authenticated user session (MSAL popup completed)

Quick Test Commands

Test	Command
Start servers	VS Code task: `Start Dev (VS Code Terminals)`
Navigate	`browser_navigate` to `http://localhost:5173`
Check state	Look for `🔄` entries in browser console

Test 1: Theme Toggle (Settings Panel)

Purpose

Verify the Settings panel opens and theme switching works correctly.

UI Flow

ChatInput toolbar → Settings button (gear) → SettingsPanel drawer → ThemePicker dropdown

Steps

Navigate to http://localhost:5173
Wait for authentication and agent metadata load
Find Settings button in ChatInput toolbar (gear icon, aria-label="Settings")
Click Settings button
Verify SettingsPanel drawer opens from right side
Verify "Appearance" section visible with ThemePicker
Click ThemePicker dropdown (currently shows "Light" or saved preference)
Select "Dark" option
Verify Theme changes:

- Background becomes dark (≈ rgb(32, 31, 30)) - Text becomes light - No console errors

Select "Light" option
Verify Theme changes back:

- Background becomes light (≈ rgb(255, 255, 255)) - Text becomes dark

Select "System" option
Verify Theme matches OS preference
Close Settings panel (X button or click outside)

Console Evidence

// No errors should appear
// LocalStorage updated:
localStorage.getItem('ai-foundry-theme') // "Dark", "Light", or "System"

DOM Changes

<body> FluentProvider styles update
CSS variables change: --colorNeutralBackground1, --colorNeutralForeground1

Pass Criteria

Settings panel opens/closes without errors
All three theme options selectable
Visual theme changes immediately on selection
Theme persists after closing panel

Test 2: New Chat Button

Purpose

Verify the New Chat button clears messages and resets conversation state.

UI Flow

Send message → Wait for response → Click New Chat button → Verify reset

Prerequisites

At least one message exchange completed

Steps

Send a test message: "Hello, testing new chat button"
Wait for assistant response to complete (status: idle)
Verify New Chat button is enabled (not grayed out)
Click New Chat button (ChatAdd icon, aria-label="New chat")
Verify immediate changes:

- Messages array cleared (empty chat area) - StarterMessages component visible (agent intro + prompts) - Input field focused and empty - New Chat button now disabled (no messages to clear)

Console Evidence

🔄 [timestamp] CHAT_CLEAR
Action: {type: CHAT_CLEAR}
Changes: {
  chat.messages.length: N → 0
}

Pass Criteria

Button disabled when no messages
Button enabled after first message
Click clears all messages instantly
StarterMessages reappear
conversationId reset to null
Input field receives focus
No console errors

Test 3: Cancel Stream (Stop Button)

Purpose

Verify streaming can be cancelled mid-response.

UI Flow

Send long prompt → While streaming → Click Stop button → Verify cancellation

Steps

Start a new chat (or use existing)
Send a prompt that triggers a long code response: Write a comprehensive Python script that calculates Fibonacci numbers using 5 different methods: recursive, memoized, iterative, matrix exponentiation, and Binet's formula. Include detailed docstrings, type hints, performance benchmarks, and unit tests for each method.
Immediately observe:

- Status changes to streaming - Stop button becomes enabled (aria-label="Cancel response") - Send button becomes disabled - Text chunks appearing in assistant message

Click Stop button while streaming is active
Verify cancellation:

- Streaming stops immediately - Partial response preserved (not deleted) - Status returns to idle - Send button re-enabled - Stop button disabled again

Keyboard Shortcut

Press Escape key during streaming → should also cancel

Console Evidence

🔄 [timestamp] CHAT_CANCEL_STREAM
Action: {type: CHAT_CANCEL_STREAM}
Changes: {
  chat.status: streaming → idle,
  chat.streamingMessageId: "xxx" → undefined
}

Edge Cases

Very fast response may complete before cancel → OK, not an error
Multiple rapid clicks → should be idempotent

Pass Criteria

Stop button disabled when not streaming
Stop button enabled during streaming
Click stops stream immediately
Partial response text preserved
Status returns to idle
Escape key works as shortcut
No errors in console

Test 4: Markdown Code Block Rendering

Purpose

Verify code blocks render with syntax highlighting, line numbers, and copy button.

UI Flow

Send code request → Wait for response → Verify code block UI

Steps

Start a new chat
Send a code generation prompt: Write a Python function to calculate fibonacci numbers with proper type hints
Wait for response to complete
Verify code block structure:

- Container with dark background - Header bar showing "python" language label - "Copy" button in header - Line numbers on left side - Syntax highlighting (keywords, strings, comments in different colors)

Click "Copy" button
Verify code copied (paste somewhere to confirm)

Additional Test Prompts

From test-files/test-prompts.json:

[
  "Create a TypeScript interface for a user profile with nested preferences",
  "Show me a bash script to backup a PostgreSQL database",
  "Write a SQL query with a CTE to find duplicate customer records"
]

Expected Code Block DOM

<div class="codeBlock">
  <div class="codeHeader">
    <span class="codeLanguage">python</span>
    <button>Copy</button>
  </div>
  <div> <!-- SyntaxHighlighter -->
    <!-- Line numbers + highlighted code -->
  </div>
</div>

Syntax Highlighting Colors (vscDarkPlus theme)

Element	Color
Keywords (`def`, `return`, `if`)	Purple/Blue
Strings	Orange
Comments	Green
Function names	Yellow
Types	Cyan

Pass Criteria

Language label displayed correctly
Copy button present and functional
Syntax highlighting applied
Line numbers visible
Long lines wrap (no horizontal overflow)
Multiple code blocks render independently

Test 5: Complex Markdown Rendering

Purpose

Verify tables, lists, headings, and text formatting render correctly.

Steps

Send a complex markdown prompt: Create a comprehensive guide with: - A comparison table of React, Vue, and Angular - Numbered installation steps - A code example - Bold and italic text formatting - A blockquote with a tip
Wait for response to complete
Verify each element:

Expected Elements

Element	Verification
Table	Borders visible, headers bold, rows alternate
Ordered list	Numbers 1, 2, 3... with proper indentation
Unordered list	Bullets with proper indentation
Nested list	Sub-items indented further
Bold text	text renders with heavier weight
Italic text	text renders with slant
Inline code	`code` has background highlight
Blockquote	Left border, indented, lighter text
Links	Underlined, opens in new tab

Pass Criteria

Tables render with visible structure
Lists have proper indentation
Text formatting (bold/italic) applied
Inline code visually distinct
Links functional and styled
No raw markdown visible

Test 6: Token Usage Info

Purpose

Verify response footer shows timing, token counts, and expandable usage details.

UI Flow

Send message → Wait for response → Verify footer → Click expand → Verify breakdown

Steps

Send any message and wait for response to complete
Verify response footer displays:

- Response time (e.g., 3575ms) - Total token count (e.g., 848 tokens) - Info icon button (aria-label="Show token usage details")

Hover over info icon
Verify usage details panel shows:

- "Usage Information" header - Input tokens (e.g., Input: 799 tokens) - Output tokens (e.g., Output: 49 tokens)

Console Evidence

Action: {type: CHAT_STREAM_COMPLETE, usage: Object}
// usage object: { promptTokens, completionTokens, totalTokens }

Pass Criteria

Response time displayed after completion
Total token count displayed
Info icon button present
Input/Output breakdown shows on hover
Values are non-zero numbers

Test Files Reference

File	Purpose
`test-files/test-prompts.json`	Prompts for each test scenario
`test-files/code-sample.md`	Expected code block rendering
`test-files/complex-response.md`	Expected complex markdown
`test-files/test.txt`	Plain text upload test
`test-files/test.png`	Image upload test

Troubleshooting

Issue	Likely Cause	Solution
Theme not changing	ThemeContext not receiving update	Check FluentProvider wrapping
New chat button always disabled	`hasMessages` prop false	Check messages array binding
Cancel not working	AbortController not set	Check `currentStreamAbort` in ChatService
Code not highlighted	Language not detected	Check regex pattern in Markdown.tsx
Copy button not working	`copy-to-clipboard` import	Check package installed
Table not rendering	GFM plugin missing	Check `remarkGfm` in Markdown.tsx

Quick Validation Checklist

□ Theme Toggle
  □ Settings opens
  □ Dark theme works
  □ Light theme works
  □ System theme works
  □ Persists on refresh

□ New Chat
  □ Button disabled initially
  □ Enabled after message
  □ Clears messages
  □ Resets conversation

□ Cancel Stream
  □ Stop enabled during stream
  □ Cancels immediately
  □ Preserves partial response
  □ Escape key works

□ Code Blocks
  □ Language label
  □ Copy button works
  □ Syntax highlighting
  □ Line numbers

□ Complex Markdown
  □ Tables
  □ Lists
  □ Formatting
  □ Links

□ Token Usage
  □ Response time shown
  □ Token count shown
  □ Info icon present
  □ Input/Output breakdown on hover

适合场景

01

用户想查找某类 Agent Skill 时

02

需要根据任务场景推荐可安装能力包时

03

需要对比不同来源的安装命令和来源信息时

能力概览

能力 1

按任务关键词查找相关 Skills

能力 2

展示可复制的安装命令

能力 3

保留来源站点、仓库和原始说明，方便继续核验

能力 4

展示第三方安全扫描或审计结果

安装后应在对应宿主中按原始 README 的触发条件使用；具体调用方式请以来源页面和 README 为准。

平台分布

Codex

37.03%

按下载量换算29

Claude

31.17%

按下载量换算24

Cursor

20.54%

按下载量换算16

Gemini CLI

9.16%

按下载量换算7

安全审计

Gen Agent Trust Hub

通过

Socket

通过

Snyk

通过

权限和风险

操作浏览器

该 Skill 可能涉及浏览器控制能力，使用时可能读取或操作网页内容，需要在受控环境中确认权限边界。

安装前确认

本站仅展示第三方公开信息，不托管安装包，不提供自动安装或运行环境。安装前应自行审查源码、依赖和命令行为。当前只有一个来源，正式发布前建议补源仓库或其他目录站核验。

来源信息

GitHub 仓库

github.com

/microsoft-foundry/foundry-agent-webapp

SKILL.md 来源

github.com

/microsoft-foundry/foundry-agent-webapp/tree/main/skills/validating-ui-features

skills-sh

skills.sh

/microsoft-foundry/foundry-agent-webapp/validating-ui-features

继续浏览同类 Skills

更多研究检索 Skills（73,675）返回 Skills 目录

上一个 Skill

validating-startup-ideas（验证创业想法）

validating-startup-ideas 用于查找、检索和筛选相关信息，适合在 Codex、Claude、Cursor、Gemini CLI 中需要根据关键词、任务场景或来源线索快速定位候选结果时使用。可结合来源仓库、安装命令和原始 README 继续核验具体用法。安装前建议确认权限范围、维护状态，以及是否会触发联网、命令执行或文件读写。

下一个 Skill

validation（validation 搜索）

validation 用于查找、检索和筛选相关信息，适合在 Codex、Claude、Cursor、Gemini CLI 中需要根据关键词、任务场景或来源线索快速定位候选结果时使用。可结合来源仓库、安装命令和原始 README 继续核验具体用法。安装前建议确认权限范围、维护状态，以及是否会触发联网、命令执行或文件读写。