技能 create-node

🔧

create-node

Name: create-node
Author: bytedance

安全 🌐 网络访问📁 文件系统访问⚙️ 外部命令

FlowGram에서 커스텀 워크플로우 노드 생성

FlowGram 워크플로우를 위한 커스텀 노드를 생성하려면 복잡한 데이터 구조와 폼 구성에 대한 이해가 필요합니다. 이 스킬은 간단한 자동 폼 노드와 복잡한 커스텀 UI 노드를 구축하기 위한 즉시 사용 가능한 템플릿과 단계별 가이드를 제공합니다.

支持: Claude Codex Code(CC)

📊 69 充足

下载技能 ZIP

在 Claude 中上传

前往设置 → 功能 → 技能 → 上传技能

开启并开始使用

测试它

正在使用“create-node”。 모델 이름, temperature 및 프롬프트 필드가 있는 간단한 LLM 노드 생성

预期结果:

apps/demo-free-layout/src/nodes/llm/index.ts에 템플릿 생성됨
노드 타입: WorkflowNodeType.LLM
폼 필드: model (Select), temperature (number), prompt (prompt-editor)
rush dev:demo-free-layout으로 테스트 준비 완료

正在使用“create-node”。 URL, 메서드, 헤더 및 본문을 위한 커스텀 폼이 있는 복잡한 HTTP 요청 노드 생성

预期结果:

apps/demo-free-layout/src/nodes/http/에 복잡한 노드 템플릿 복사됨
폼 레이아웃이 있는 커스텀 form-meta.tsx 생성됨
커스텀 UI 컴포넌트를 위한 Components 폴더 준비됨
노드 타입을 등록하려면 constants.ts와 index.ts를 업데이트하세요

安全审计

安全

v5 • 1/16/2026

This skill contains only documentation and TypeScript/React templates for creating custom workflow nodes. All 194 static findings are false positives triggered by pattern detection in markdown code blocks and template placeholders. No network calls, file I/O with user input, command execution, or credential access exist. The skill uses safe patterns including nanoid for ID generation and standard relative imports.

已扫描文件

993

分析行数

发现项

审计总数

风险因素

🌐 网络访问 (5)

skill-report.json:6 SKILL.md:45 SKILL.md:392 SKILL.md:393 SKILL.md:394

📁 文件系统访问 (26)

⚙️ 外部命令 (117)

审计者: claude 查看审计历史 →

质量评分

架构

100

可维护性

内容

社区

100

安全

规范符合性

你能构建什么

커스텀 노드 타입 구축

커스텀 입력, 출력 및 폼 레이아웃을 갖춘 워크플로우 플랫폼용 특화 노드 생성

워크플로우 기능 확장

데이터베이스 쿼리, API 호출 또는 커스텀 비즈니스 로직을 위한 도메인 특화 노드 설계

노드 개발 패턴 학습

실제 동작하는 템플릿과 포괄적인 문서를 통해 FlowGram 노드 구조 이해

试试这些提示

간단한 노드 생성

create-node 스킬을 사용하여 자동 폼이 있는 간단한 데이터베이스 쿼리 노드를 생성하세요. 이 노드는 연결 문자열, 쿼리 타임아웃 및 SQL 쿼리 필드를 가져야 합니다.

복잡한 노드 생성

create-node 스킬을 사용하여 커스텀 폼 레이아웃, 수신자 선택기 및 템플릿 미리보기 컴포넌트가 있는 복잡한 이메일 발송 노드를 생성하세요.

노드 등록 추가

FlowGram demo-free-layout 프로젝트의 constants.ts 파일과 node index.ts에 새로운 웹훅 노드 타입을 등록하는 것을 도와주세요.

노드 문제 디버그

커스텀 노드 폼이 올바르게 표시되지 않습니다. 스키마가 정의되어 있지만 필드가 비어 보입니다. FlowGram 패턴을 사용하여 문제를 해결하는 것을 도와주세요.

最佳实践

모든 폼 필드에 대해 명확한 설명과 유효성 검사 규칙이 있는 JSON Schema 사용
불완전한 노드 구성을 방지하기 위해 스키마에 필수 필드 정의
편집할 수 없는 워크플로우 뷰를 위해 커스텀 컴포넌트에서 읽기 전용 상태 처리

避免

Field 컴포넌트 바인딩을 사용할 수 있을 때 수동으로 폼 상태를 관리하지 마세요
필수 필드에 대한 스키마 정의에서 required 배열을 건너뛰지 마세요
커스텀 UI 레이아웃이 필요할 때 간단한 노드 템플릿을 혼용하지 마세요

常见问题

간단한 노드와 복잡한 노드의 차이점은 무엇인가요?

간단한 노드는 JSON Schema로부터 자동 폼 생성을 사용합니다. 복잡한 노드는 완전한 UI 제어를 위해 커스텀 React 컴포넌트를 사용합니다.

생성된 템플릿 파일을 어디로 복사해야 하나요?

각 새로운 커스텀 노드에 대해 apps/demo-free-layout/src/nodes/{node-name}/ 디렉토리로 복사하세요.

이 스킬이 생성된 노드 코드를 실행하나요?

아니요. 이 스킬은 템플릿 파일만 생성합니다. 노드를 테스트하려면 rush dev:demo-free-layout을 실행해야 합니다.

커스텀 노드에 어떤 아이콘이 지원되나요?

SVG, JPG 및 PNG 형식이 지원됩니다. apps/demo-free-layout/src/assets/에 icon-{node-name}.svg 명명 규칙으로 아이콘을 배치하세요.

폼 필드에서 변수 참조를 어떻게 사용하나요?

inputsValues에서 필드 타입을 'template'로 설정하고 변수 인식 필드를 위해 inputs 스키마에서 formComponent: 'prompt-editor'를 사용하세요.

fixed-layout 프로젝트에서 이 스킬을 사용할 수 있나요?

이 스킬은 demo-free-layout을 대상으로 합니다. fixed-layout 프로젝트는 다른 노드 등록 패턴을 가질 수 있습니다. 프로젝트 문서를 확인하세요.

开发者详情

作者

bytedance

许可证

MIT

仓库

https://github.com/bytedance/flowgram.ai/tree/main/.claude/skills/create-node

引用

main

文件结构

📁 templates/

📁 complex-node/

📁 components/

📄 custom-component.tsx

📄 form-meta.tsx

📄 index.tsx

📄 types.tsx

📁 simple-node/

📄 index.ts

📄 README.md

📄 SKILL.md