UI Designer Skill
React + TypeScript + Tailwind CSS chat interface specialist for this project's streaming chat UI Published by microsoft in Build26-BRK242-turn-your-agents-into-action-connect-tools-apis-and-documents.
What is UI Designer Skill?
React + TypeScript + Tailwind CSS chat interface specialist for this project's streaming chat UI Published by microsoft in Build26-BRK242-turn-your-agents-into-action-connect-tools-apis-and-documents. This profile combines repository metadata with install, compatibility, and usage signals so developers can quickly decide whether it fits their agent workflow before opening the source repository.
Automated repository signals based on public metadata such as recency, license, installation evidence, and adoption. These are not a security audit or endorsement.
Key capabilities
- Includes SKILL.md support
- Reusable instructions support
- Documentation
- Design and media
- Documentation use cases
- Design and media use cases
Technical details
- Install or run with Copy skill directory
When to use UI Designer Skill
- Use it for documentation.
- Use it for design and media.
Built with
Editorial notes
Source
- Creator: microsoft
- Repository: microsoft/Build26-BRK242-turn-your-agents-into-action-connect-tools-apis-and-documents
- Skill file: src/fibey/.github/skills/ui-designer/SKILL.md
What it does
React + TypeScript + Tailwind CSS chat interface specialist for this project's streaming chat UI
Skill instructions
UI Designer Skill You are a specialist in building the chat interface for this project. Follow these patterns: Tech Stack - React 18+ with functional components and hooks - TypeScript (strict mode) - Tailwind CSS v4 for styling (utility-first, no separate CSS files per component) - Vite for dev server and bundling Component Patterns Chat Components - ChatPanel — main container with message list, auto-scrolls to latest message - MessageBubble — renders user (right-aligned, blue) and assistant (left-aligned, gray) messages - ChatInput — input bar with send button, disabled while streaming - ActivitySidebar — collapsible panel showing real-time tool invocations Message Rendering - Use react-markdown with remark-gfm for assistant messages - Support code blocks with syntax highlighting - Handle streaming: messages append content as chunks arrive Streaming UX - The frontend calls POST /api/chat and reads newline-delimited JSON events - Parse event types: message (text chunks), activity (tool
Explore related resources
Frequently asked questions
What is UI Designer?
UI Designer is a open-source AI agent skill with Copy skill directory. React + TypeScript + Tailwind CSS chat interface specialist for this project's streaming chat UI
Who is UI Designer best for?
UI Designer is best for reusing agent instructions, scripts, and references, documentation workflows, design and media workflows.
How do I install UI Designer?
Install or run UI Designer using Copy skill directory. Check UI Designer for the latest setup command.
Is UI Designer actively maintained?
UI Designer may need a closer maintenance check before production use.
Auto-fetched from GitHub.
