菜单
Provides step-by-step procedures for validating UI features - theme toggle, new chat, cancel stream, markdown rendering, and token usage info.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Provides deployment commands and troubleshooting for Azure Container Apps. Use when running azd commands, deploying containers, debugging deployment failures, or updating infrastructure in this repository.
Provides SSE streaming patterns for the chat API and frontend. Use when implementing or modifying chat streaming, handling SSE events, or troubleshooting message flow between frontend and backend.
Provides research patterns for Foundry Agent Service SDK. Use when implementing agent features, looking up SDK methods, finding code samples, or troubleshooting Azure.AI.Projects API usage.
Provides architecture overview with state machines, SSE event flow, and file mappings. Use when understanding system design, debugging state issues, or maintaining ARCHITECTURE-FLOW.md.
Provides C# and ASP.NET Core coding standards for this repository. Use when writing or modifying C# code, implementing API endpoints, configuring middleware, or working with authentication in the backend.
Diagnose and fix incomplete local development setup. Use when dev servers fail to start, env vars are missing, authentication errors occur, or before running any dev commands for the first time.
| name | validating-ui-features |
| description | Provides step-by-step procedures for validating UI features - theme toggle, new chat, cancel stream, markdown rendering, and token usage info. |
CRITICAL: Load this skill before running any UI validation tests.
| 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 |
Verify the Settings panel opens and theme switching works correctly.
ChatInput toolbar → Settings button (gear) → SettingsPanel drawer → ThemePicker dropdown
http://localhost:5173rgb(32, 31, 30))rgb(255, 255, 255))// No errors should appear
// LocalStorage updated:
localStorage.getItem('ai-foundry-theme') // "Dark", "Light", or "System"
<body> FluentProvider styles update--colorNeutralBackground1, --colorNeutralForeground1Verify the New Chat button clears messages and resets conversation state.
Send message → Wait for response → Click New Chat button → Verify reset
"Hello, testing new chat button"idle)🔄 [timestamp] CHAT_CLEAR
Action: {type: CHAT_CLEAR}
Changes: {
chat.messages.length: N → 0
}
Verify streaming can be cancelled mid-response.
Send long prompt → While streaming → Click Stop button → Verify cancellation
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.
streamingidleEscape key during streaming → should also cancel🔄 [timestamp] CHAT_CANCEL_STREAM
Action: {type: CHAT_CANCEL_STREAM}
Changes: {
chat.status: streaming → idle,
chat.streamingMessageId: "xxx" → undefined
}
Verify code blocks render with syntax highlighting, line numbers, and copy button.
Send code request → Wait for response → Verify code block UI
Write a Python function to calculate fibonacci numbers with proper type hints
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"
]
<div class="codeBlock">
<div class="codeHeader">
<span class="codeLanguage">python</span>
<button>Copy</button>
</div>
<div> <!-- SyntaxHighlighter -->
<!-- Line numbers + highlighted code -->
</div>
</div>
| Element | Color |
|---|---|
Keywords (def, return, if) | Purple/Blue |
| Strings | Orange |
| Comments | Green |
| Function names | Yellow |
| Types | Cyan |
Verify tables, lists, headings, and text formatting render correctly.
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
| 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 |
Verify response footer shows timing, token counts, and expandable usage details.
Send message → Wait for response → Verify footer → Click expand → Verify breakdown
3575ms)848 tokens)Input: 799 tokens)Output: 49 tokens)Action: {type: CHAT_STREAM_COMPLETE, usage: Object}
// usage object: { promptTokens, completionTokens, totalTokens }
| 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 |
| 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 |
□ 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