Globales Ranking · von 601 Skills
material-component-doc AI Agent Skill
Quellcode ansehen: bytedance/flowgram.ai
CriticalInstallation
npx skills add bytedance/flowgram.ai --skill material-component-doc 13
Installationen
FlowGram|Workflow development framework
English | 中文 | Español | Русский | Português | Deutsch | 日本語
FlowGram is a composable, visual, easy-to-integrate, and extensible workflow development framework & toolkit.
Our goal is to help developers build AI workflow platforms faster and simpler.
FlowGram comes with a suite of built-in tools for workflow development: flow canvas, node configuration form, variable scope chain, and ready-to-use materials (LLM, Condition, Code Editor etc). It’s not a ready-made workflow platform; it’s the framework and toolkit to build yours.
Learn more at FlowGram.AI 🌐
🎬 Demo
https://github.com/user-attachments/assets/fee87890-ceec-4c07-b659-08afc4dedc26
Open in CodeSandbox 🌐 or StackBlitz 🌐
In this demo, we iterate through a list of cities, fetch real-time weather via HTTP, parse temperatures with a Code node, generate outfit suggestions with an LLM, gate by a Condition, aggregate results across the loop, and finally use an Advisor LLM to pick the most comfortable city before sending the result to the End node.
🚀 Quick Start
- Create a new FlowGram project:
npx @flowgram.ai/create-app@latestWe recommend choosing the
Free Layout Demo ⭐️template.
- Start the project:
cd demo-free-layout
npm install
npm start- Open http://localhost:3000 in your browser.
✨ Features
| Feature | Description | Demo |
|---|---|---|
| Free Layout Canvas | Free layout canvas where nodes can be placed anywhere and connected using free-form lines. | ![]() |
| Fixed Layout Canvas | Fixed layout canvas where nodes can be dragged to specified positions, with support for compound nodes like branches and loops. | ![]() |
| Form | The form engine manages the CRUD operations of node data and provides rendering, validation, side effects, linkage, and error-capturing capabilities, simplifying the development of node configurations. | |
| Variable | The variable engine supports scope constraints, variable structure inspection, and type inference, making it easy to manage data flow within the workflow. |
📖 Documentation
You can find the FlowGram documentation on the website.
The documentation is divided into several sections:
- Quick Start
- Canvas
- Form
- Variable
- Material
- Runtime
- Advanced Guides
- API Reference
- Where to get Support
- Contributing Guide
🙌 Contributors
🌍 Adoption
- Coze Studio is an all-in-one AI agent development tool. Providing the latest large models and tools, various development modes and frameworks, Coze Studio offers the most convenient AI agent development environment, from development to deployment.
- NNDeploy is a workflow-based multi-platform ai deployment tool.
- Certimate is an open-source SSL certificate management tool that helps you automatically apply for and deploy SSL certificates with a visual workflow. It is one of the ACME client options listed in the official documentation of Let's Encrypt.
📬 Contact us
- Issues: Issues
- Lark: Scan the QR code below with Register Feishu to join our FlowGram user group.
Installationen
Sicherheitsprüfung
Quellcode ansehen
bytedance/flowgram.ai
Mehr aus dieser Quelle
Power your AI Agents with
the best open-source models.
Drop-in OpenAI-compatible API. No data leaves Europe.
Explore Inference APIGLM
GLM 5
$1.00 / $3.20
per M tokens
Kimi
Kimi K2.5
$0.60 / $2.80
per M tokens
MiniMax
MiniMax M2.5
$0.30 / $1.20
per M tokens
Qwen
Qwen3.5 122B
$0.40 / $3.00
per M tokens
So verwenden Sie diesen Skill
Install material-component-doc by running npx skills add bytedance/flowgram.ai --skill material-component-doc in your project directory. Führen Sie den obigen Installationsbefehl in Ihrem Projektverzeichnis aus. Die Skill-Datei wird von GitHub heruntergeladen und in Ihrem Projekt platziert.
Keine Konfiguration erforderlich. Ihr KI-Agent (Claude Code, Cursor, Windsurf usw.) erkennt installierte Skills automatisch und nutzt sie als Kontext bei der Code-Generierung.
Der Skill verbessert das Verständnis Ihres Agenten für material-component-doc, und hilft ihm, etablierte Muster zu befolgen, häufige Fehler zu vermeiden und produktionsreifen Code zu erzeugen.
Was Sie erhalten
Skills sind Klartext-Anweisungsdateien — kein ausführbarer Code. Sie kodieren Expertenwissen über Frameworks, Sprachen oder Tools, das Ihr KI-Agent liest, um seine Ausgabe zu verbessern. Das bedeutet null Laufzeit-Overhead, keine Abhängigkeitskonflikte und volle Transparenz: Sie können jede Anweisung vor der Installation lesen und prüfen.
Kompatibilität
Dieser Skill funktioniert mit jedem KI-Coding-Agenten, der das skills.sh-Format unterstützt, einschließlich Claude Code (Anthropic), Cursor, Windsurf, Cline, Aider und anderen Tools, die projektbezogene Kontextdateien lesen. Skills sind auf Transportebene framework-agnostisch — der Inhalt bestimmt, für welche Sprache oder welches Framework er gilt.
Chat with 100+ AI Models in one App.
Use Claude, ChatGPT, Gemini alongside with EU-Hosted Models like Deepseek, GLM-5, Kimi K2.5 and many more.

