AI Elements
Build AI chat interfaces using ai-elements components — conversations, messages, tool displays, prompt inputs, and more. Use when the user wants to build a chatbot, AI assistant UI, or any AI-powered chat interface.
概要
The AI Elements skill, part of the mxyhi/ok-skills repository on GitHub, provides a specialized toolkit for developers building sophisticated AI chat interfaces. This skill enables compatible AI agents to utilize the ai-elements component library for constructing user interface elements such as conversation threads, message bubbles, tool execution displays, and prompt input fields. By integrating these React and Next.js compatible components, developers can streamline the creation of custom AI assistants and chatbot frontends. The source repository, which has gained community interest with 423 stars, offers a structured approach to UI design within the frontend-design category. It serves as a functional bridge between raw AI data and polished, interactive user experiences.
ユースケース
導入方法
# Review source first
open https://github.com/mxyhi/ok-skills/blob/main/ai-elements/SKILL.mdCopy or clone the skill folder into your agent skills directory after reviewing its instructions and scripts.
セキュリティ
Users should review the source code in the mxyhi/ok-skills repository to understand how components handle data rendering. As this skill focuses on frontend UI components, standard web security practices for React and Next.js should be followed, particularly regarding the sanitization of AI-generated content to prevent potential cross-site scripting (XSS) when displaying message outputs.
関連Skills
Constant Time Testing
trailofbits/skills
暗号実装を実行してタイミングサイドチャネルを測定し、統計解析には dudect を、動的トレースには Valgrind 上の Timecop を使用します。形式的、シンボリック、動的、統計的ツールの各カテゴリと結果の確認方法を網羅しています。実行中の実装が constant-time であるかのテスト、コンパイル済みバイナリのタイミングのばらつき測定、または疑わしいタイミング攻撃の調査を行う際に使用します。コンパイラ出力を静的に検査するためのものではありません — constant-time-analysis plug
Baoyu Design
JimLiu/baoyu-design
自己完結型の HTML として、洗練されたデザイン成果物を作成します:UIモックアップ、インタラクティブなプロトタイプ、ワイヤーフレーム、ランディングページ、ダッシュボード、アプリ画面、モバイルアプリ、スライド資料(別名 PPT / PowerPoint プレゼンテーション)、ドキュメントや履歴書、アニメーション、3Dオブジェクト、調査レポート、HTML メール、図解、チラシ、ビジュアル探索。ユーザーがインターフェース、製品画面、ユーザーフロー、コンテンツレイアウトのデザイン、モックアップ作成、プロトタイプ作成、ワイヤーフレーム作成、視覚化、探索、または PPT/スライド資料の作成を求めた際に使用してください。
Managed Deep Agents
langchain-ai/langchain-skills
mda CLI を使用して LangSmith で Managed Deep Agents を構築、テスト、またはデプロイする際の INVOKE THIS SKILL。ユーザーが構築したい内容をヒアリングし、MDA が実際に実行できる機能へマッピングした上でスキャフォールディングとデプロイを行うまで、最初のエージェント開発をエンドツーエンドで案内します。ファイルベースのプロジェクト構成、define_deep_agent / defineDeepAgent、instructions、skills、memory、identity、tools、middleware、sandboxes、schedules、channels、evals、および mda init/build/dev/deploy/logs/delete をカバーします。
花叔Design · Huashu-Design
mxyhi/ok-skills
花叔Design——HTMLを使用して、高精度プロトタイプ、インタラクティブデモ、スライド、アニメーション、デザインバリエーションの探索、デザインの方向性に関するアドバイス、専門家によるレビューを提供します。タスクに応じて適切な専門家(UX、アニメーター、スライドデザイナー、プロトタイパー)になりきり、ウェブデザインのありきたりな表現を避けます。トリガーワード:プロトタイプ作成、インタラクティブプロトタイプ、HTMLデモ、アニメーションデモ、デザインバリエーション、hi-fiデザイン、UI mockup、prototype、HTMLページを作成、可視化を作成、アプリプロトタイプ、iOSプロトタイプ、MP4/GIFを書き出し、60fps動画、デザインスタイル、デザインの方向性、カラーパレット、おすすめのスタイル、スタイルを選択、きれいなものを作る、レビュー、見栄えの確認、review this design、解説付きアニメーション、解説動画、長尺の解説動画、voiceover、narration、5分でわかるXの解説
GSAP Core
mxyhi/ok-skills
コアな API のための公式 GSAP スキル — gsap.to()、from()、fromTo()、easing、duration、stagger、defaults、gsap.matchMedia()(レスポンシブ、prefers-reduced-motion)。ユーザーが JavaScript アニメーションライブラリ、React/Vue/vanilla でのアニメーション、GSAP のトゥイーン、イージング、基本的なアニメーション、レスポンシブまたは reduced-motion を求めた際に使用します。
Design Audit
tinh2/skills-hub-registry
アクセシビリティ(WCAG 2.2)、パフォーマンス、テーマ設定、レスポンシブ/アダプティブデザイン、アンチパターン検出を網羅した包括的かつ自律的なデザイン品質監査。トリガー: 'audit design'、'check accessibility'、'a11y audit'、'design review'、'UI quality check'。