ancoleman/ai-design-components
Overview
This skill builds production-grade AI chat interfaces and conversational UIs with streaming responses, robust context management, and multi-modal support. It provides battle-tested components and patterns used in modern AI assistants, with accessibility, performance, and security considerations baked in. Use it to ship ChatGPT-style experiences, copilots, or domain-specific conversational agents quickly.
How this skill works
The skill supplies reusable UI components (message bubbles, streaming renderers, input controls, feedback widgets) and backend helpers for token accounting, streaming parsing, and tool/function visualization. Streaming is handled with progressive markdown rendering and smart auto-scroll heuristics. Context management includes token indicators, summarization hooks, and branching/threading utilities. Multi-modal support covers image/file uploads, voice input, and safe rendering of AI outputs with sanitization.
When to use it
- Building ChatGPT-style chat interfaces or AI assistants
- Implementing streaming text responses with markdown and code blocks
- Managing conversation context, token limits, and summarization
- Adding multi-modal inputs: images, files, or voice
- Visualizing tool/function calls and handling AI-specific errors
Best practices
- Render AI output progressively and sanitize before injecting into the DOM
- Memoize message components and debounce streaming updates for performance
- Use smart auto-scroll heuristics to avoid interrupting users reading older messages
- Expose clear token usage and soft warnings before hitting limits
- Provide explicit response controls: stop, regenerate, continue, and edit
Example use cases
- Minimal ChatGPT-style web chat with streaming markdown and stop/regenerate controls
- Code copilot embedded in an IDE with syntax-highlighted streaming responses
- Customer support assistant that accepts screenshots and files for multi-modal context
- Tool-calling UI that shows running functions, status, and result details
- Accessible chat widget with ARIA live regions and screen-reader announcements
FAQ
Use an incremental markdown parser that tolerates incomplete blocks (streamdown pattern) and progressively update the rendered output while preserving stable DOM nodes.
How should token limits be communicated to users?
Show a compact token indicator with percentage, a friendly remaining-message metaphor, and proactive summarization or trimming before hitting hard limits.
43 skills
This skill helps you build AI chat interfaces with streaming, context management, and multi-modal support for chatbots and assistants.
This skill helps you write optimized, secure multi-stage Dockerfiles across languages, improving image size, security, and deployment speed.
This skill helps you write GitHub Actions workflows with proper syntax, reusable patterns, caching, and security best practices for CI/CD.
This skill standardizes user feedback and notifications across toasts, modals, and progress indicators to clearly communicate system state and actions.
This skill helps you select, implement, and optimize data visualizations with accessible, high-performance charts across datasets and dashboards.
This skill guides designing responsive layouts with grids, flexbox, and container queries to build adaptable, accessible interfaces.
This skill helps you design and implement graph databases for relationship-rich applications, boosting traversal efficiency, pattern matching, and multi-model
This skill helps you validate capacity, identify bottlenecks, and optimize response times through load testing, profiling, and targeted performance
This skill guides end-to-end incident management using SRE principles, enabling faster responses, blameless post-mortems, and effective on-call practices.
This skill guides you to operationalize ML models from experimentation to production, covering tracking, registry, features, serving, pipelines, and monitoring.
This skill assembles AI Design Components outputs into production-ready component systems with verified tokens and proper scaffolding for React, Next.js,
This skill helps you deploy and operate Kubernetes clusters efficiently by guiding resource management, scheduling, networking, storage, security, and
This skill guides building accessible, multi-step forms with validation, data typing, and UX best practices for reliable user input collection.
This skill helps design comprehensive security architectures with defense-in-depth, zero trust, threat modeling, and control mappings to risk frameworks.
This skill helps you engineer reliable LLM prompts across zero-shot, few-shot, and structured outputs for multi-model deployments.
This skill helps you design secure, scalable APIs across REST, GraphQL, and event-driven patterns with clear standards.
This skill applies and enforces cloud resource tagging strategies across multi-clouds to improve cost allocation, governance, and automation.
This skill helps you design onboarding and contextual help systems that boost activation and feature adoption through guided tours and progressive disclosure.
This skill helps you design secure, scalable cloud network architectures across AWS, GCP, and Azure, guiding VPC patterns and zero trust.
This skill helps you design and implement centralized SIEM logging, detection rules, and compliance strategies across cloud and on-prem environments.
This skill helps you harden production infrastructure across OS, containers, cloud, network, and databases using CIS benchmarks.
This skill helps you design and implement relational databases across languages, optimizing ORM, query builders, and migrations for reliable CRUD applications.
This skill helps you design production-ready SDKs with robust error handling, retries, and pagination to accelerate API client development.
This skill helps you design and implement internal developer platforms that boost DevEx through self-service templates, golden paths, and platform engineering
This skill helps you integrate multi-layer vulnerability scanning, SBOM generation, and risk-based prioritization into CI/CD for DevSecOps security gates.
This skill empowers you to manage Linux servers, optimize performance, and troubleshoot production issues with systemd, networking, and security best practices.
This skill helps design and validate disaster recovery plans with RTO/RPO targets, cross-region replication, and chaotic testing to ensure resilience.
This skill provides a complete design token and theming system for consistent branding, theme switching, RTL support, and accessible UI.
This skill helps you evaluate LLM systems with automated metrics, LLM-as-judge, and benchmarks to ensure quality and safety in production.
This skill helps you design and implement real-time streaming pipelines with Kafka, Pulsar, Flink, and Spark across languages.
This skill helps design and implement REST, GraphQL, gRPC, and tRPC APIs with framework guidance, patterns, and OpenAPI documentation.
This skill helps you implement real-time sync patterns across SSE, WebSocket, CRDTs, and presence to build collaborative apps efficiently.
This skill helps you design and implement vector DB powered RAG and semantic search workflows across Python and TypeScript.
This skill helps you implement drag-and-drop and sortable interfaces in React/TypeScript, delivering accessible, touch-friendly interactions for kanban boards,
This skill helps you design and implement asynchronous messaging using brokers like Kafka, RabbitMQ, and Redis to improve reliability and scalability.
This skill enables automated GitOps deployments to Kubernetes using declarative, pull-based pipelines with Git as the single source of truth.
This skill generates comprehensive API, code, site, ADR, and diagram documentation to accelerate developer understanding and project maintainability.
This skill helps you transform raw data into clean, production-ready analytical assets using dbt, pandas, polars, PySpark, and Airflow.
This skill helps you design and manage cloud infrastructure with IaC tools, enabling reusable modules, safe state handling, and scalable deployment workflows.
This skill helps you design secure, cost-efficient Azure architectures by selecting services, configuring governance, and optimizing performance across
This skill guides you in designing modern data platforms, selecting storage, modeling, and governance patterns to optimize architecture.
This skill helps you automate server configurations with Ansible, enforce idempotency, manage secrets, test roles, and implement GitOps workflows.
This skill helps you configure host-based and cloud firewall rules with practical patterns for web, database, and bastion scenarios.