agent-feature

Build an Agent page UI with SSE token streaming and React 19.

2|1|Updated Oct 27, 2025
One-click install
npx skills add https://github.com/eco2-team/frontend --skill agent-feature
Or copy as Structured Prompt for Agentβ–Ό
Please help me install this Agent Skill.
Skill: agent-feature
Source: https://github.com/eco2-team/frontend/tree/main/.claude/skills/agent-feature
Command: npx skills add https://github.com/eco2-team/frontend --skill agent-feature

SYSTEM DOCUMENTATION & REQUIREMENTS

πŸ’‘ This Skill includes references (resource) components.

What problem does it solve?

μ΄μ½”μ—μ½”μ˜ Agent νŽ˜μ΄μ§€ κ΅¬ν˜„ κ°€μ΄λ“œλ₯Ό μ œκ³΅ν•΄ SSE 토큰 슀트리밍, μ‚¬μ΄λ“œλ°”, λ§ˆν¬λ‹€μš΄ λ Œλ”λ§, λ©”μ‹œμ§€ μ•‘μ…˜ 등을 κ°–μΆ˜ μ—”λ“œ-투-μ—”λ“œ UIλ₯Ό κ΅¬μΆ•ν•©λ‹ˆλ‹€. 이 μŠ€ν‚¬μ€ React 19 + TypeScript + TailwindCSS 기반의 κ΅¬ν˜„ 원칙과 섀계 νŒ¨ν„΄μ„ μ œμ‹œν•©λ‹ˆλ‹€.

Core Features & Use Cases

  • SSE 토큰 슀트리밍으둜 μ‹€μ‹œκ°„ λŒ€ν™” 흐름을 μ§€μ›ν•©λ‹ˆλ‹€.
  • Claude Code μŠ€νƒ€μΌμ˜ μ‚¬μ΄λ“œλ°”, λ§ˆν¬λ‹€μš΄ λ Œλ”λ§, μ½”λ“œ 블둝 볡사 κΈ°λŠ₯을 μ œκ³΅ν•©λ‹ˆλ‹€.
  • λ©”μ‹œμ§€ μ•‘μ…˜(볡사/μž¬μƒμ„±/ν”Όλ“œλ°±)으둜 λŒ€ν™” ν’ˆμ§ˆμ„ 높이고 UXλ₯Ό κ°œμ„ ν•©λ‹ˆλ‹€.

Quick Start

Launch the Agent UI and start a streaming chat to see real-time AI coaching.

Frequently Asked Questions about agent-feature

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I implement SSE token streaming in a React frontend?β–Ό

SSE token streaming in a React frontend is implemented using a dedicated useAgentSSE hook that manages real-time text streaming, enabling live token-by-token message delivery for interactive AI chat experiences.

How do I render markdown with copyable code blocks in a React chat UI?β–Ό

Markdown rendering with copyable code blocks in a React chat UI is handled by a dedicated MD renderer component that supports code blocks with copy functionality, image rendering, and standard markdown formatting within the chat interface.

Can I build an AI coaching chat interface using React 19 and TypeScript?β–Ό

Yes, you can build a production-ready AI coaching chat interface using React 19 and TypeScript with TailwindCSS, featuring a Claude-style sidebar, message actions like copy and regenerate, and SSE streaming support for real-time conversations.

What message actions should an AI agent chat interface include?β–Ό

An AI agent chat interface should include message actions for copy, regenerate, and feedback to improve conversation quality and UX, allowing users to manage and refine their real-time AI coaching interactions effectively.

Does this agent UI skill work with TailwindCSS for styling?β–Ό

Yes, the agent UI skill works with TailwindCSS within a React 19 and TypeScript stack, providing a componentized frontend architecture with interactive UI components styled for customer-facing AI chat experiences.

Why does my SSE streaming chat UI need a componentized architecture?β–Ό

An SSE streaming chat UI needs a componentized architecture to separate the useAgentSSE hook, MD renderer, and sidebar components, ensuring maintainable real-time text streaming and interactive message rendering across the application.