القائمة
Create or update browser-rendered custom nao chart modules in agent/charts.
يُحدَّد Prompt الذي يراجع المصدر أولًا بشكل افتراضي. يمكنك التبديل إلى أمر مباشر أو تنزيل نسخة محلية.
اقرأ SKILL.md وأي ملفات مرافقة يعرضها SkillsMP قبل أن تقرر التثبيت.
استنادا إلى تصنيف SOC المهني
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
يتجاوز الأمر المباشر Prompt المخصّص للمراجعة. افحص المصدر قبل تشغيله.
npx skills add https://github.com/getnao/nao --skill build-custom-chartsيبقى الأمر في سطر واحد. مرّر أفقيًا لمراجعته كاملًا قبل النسخ.
تفضّل نسخة محلية؟ نزّل الملفات المتاحة حاليًا لدى SkillsMP.
عرض SKILL.md
Bootstrap a nao agent for a project — gather warehouse + scope + extra-context info in one round, look up the warehouse-specific config from nao docs, write nao_config.yaml, run nao init + nao sync, set up the LLM key, and generate the first RULES.md. Use when the user has just decided to use nao on a new project. Only for first-time setup; for editing rules, generating tests, or reviewing an existing context, use write-context-rules / create-context-tests / audit-context.
Wire a nao project's context folder to a remote nao instance (Cloud or self-hosted) so every push to `main` automatically runs `nao deploy` via GitHub Actions. Use when the user has a working local nao project versioned in Git and wants their team's deployed instance to always reflect the latest committed context. Covers `nao deploy` usage, the GitHub Actions workflow, organization API keys, GitHub Secrets, `.naoignore`, environment-variable references in `nao_config.yaml`, and create-vs-update behavior. Do not use for first-time project setup (use `setup-context`) or for `nao sync` automation that commits warehouse metadata back to the repo (covered in the docs' synchronization page).
Create or extend a nao project's RULES.md. Owns the RULES.md template. Use when the user wants to generate the initial RULES.md from synced metadata (called by setup-context), or improve their existing RULES.md. Do not use for first-time scope setup (use setup-context) or for diagnosing existing problems (use audit-context).
| name | build-custom-charts |
| description | Create or update browser-rendered custom nao chart modules in agent/charts. |
Use this skill when a project needs a visualization beyond nao's built-in chart types.
Add agent/charts/<type>.js, where <type> starts with a lowercase letter and may then contain lowercase letters, numbers, hyphens, or underscores. It must not collide with a built-in chart type (such as bar, line, pie) or table. Names that break these rules are silently ignored. The file must export a render function:
export function render(element, context) {
const { data, config, colors, theme, libs } = context;
element.textContent = `${data.length} rows`;
return () => element.replaceChildren();
}
The context contains:
data: rows from the referenced execute_sql resultconfig: chartType, xAxisKey, xAxisType, series, and titlecolors: nao's default chart palettetheme: light or darklibs: the installed React, ReactDOM, and Recharts modulesUse plain JavaScript without JSX. Do not import bare package names; use the libraries from context.libs. A React chart must return a cleanup function that unmounts its root.
Optionally add agent/charts/<type>.json:
{
"name": "Bubble chart",
"description": "Shows two numeric axes while marker size represents a third measure."
}
The description tells the agent when to select the chart. Without metadata, nao derives a name from the file name.