Markdown HTML Orchestrator
alirezarezvani/claude-skills
A skill your agent uses when a user wants to convert any markdown file in their Claude project into a single-file, lightly-interactive HTML — long-form documents (specs, plans, RFCs, reports…
Knowledge of Fern's built-in MDX component library (accordions, callouts, cards, steps, tabs, code blocks, API-reference snippets, and more) for authoring docs pages.
Install Fern Components
$ npx skills add ai-dynamo/dynamo --skill fern-components -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install ai-dynamo/dynamo fern-components --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/ai-dynamo/dynamo.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/fern-components .claude/skills/fern-components && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "fern-components" agent skill from https://github.com/ai-dynamo/dynamo/tree/main/.agents/skills/fern-components into .claude/skills/fern-components/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "fern-components", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/ai-dynamo/dynamo/tree/main/.agents/skills/fern-componentsType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add ai-dynamo/dynamo --skill fern-components -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install ai-dynamo/dynamo fern-components --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/ai-dynamo/dynamo.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.agents/skills/fern-components .agents/skills/fern-components && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "fern-components" agent skill from https://github.com/ai-dynamo/dynamo/tree/main/.agents/skills/fern-components into .agents/skills/fern-components/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "fern-components", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add ai-dynamo/dynamo --skill fern-components -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install ai-dynamo/dynamo fern-components --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/ai-dynamo/dynamo.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.agents/skills/fern-components .cursor/skills/fern-components && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "fern-components" agent skill from https://github.com/ai-dynamo/dynamo/tree/main/.agents/skills/fern-components into .cursor/skills/fern-components/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "fern-components", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/ai-dynamo/dynamo.git --path .agents/skills/fern-components--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add ai-dynamo/dynamo --skill fern-components -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install ai-dynamo/dynamo fern-components --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/ai-dynamo/dynamo.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.agents/skills/fern-components .gemini/skills/fern-components && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "fern-components" agent skill from https://github.com/ai-dynamo/dynamo/tree/main/.agents/skills/fern-components into .gemini/skills/fern-components/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "fern-components", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install ai-dynamo/dynamo fern-componentsInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add ai-dynamo/dynamo --skill fern-components -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/ai-dynamo/dynamo.git skills-src && mkdir -p .github/skills && cp -r skills-src/.agents/skills/fern-components .github/skills/fern-components && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "fern-components" agent skill from https://github.com/ai-dynamo/dynamo/tree/main/.agents/skills/fern-components into .github/skills/fern-components/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "fern-components", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add ai-dynamo/dynamo --skill fern-components -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install ai-dynamo/dynamo fern-components --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/ai-dynamo/dynamo.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.agents/skills/fern-components .opencode/skills/fern-components && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "fern-components" agent skill from https://github.com/ai-dynamo/dynamo/tree/main/.agents/skills/fern-components into .opencode/skills/fern-components/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "fern-components", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
fern-components- GitHub stars
- 8.2k
- Token cost
- ~2.8k tokens
- SKILL.md length
- 1,251 words
- Files
- 4 (incl. scripts, references)
- Skills in repo
- 27
- Repo updated
- First seen
- Licence
- Apache-2.0
At a glance
Knowledge of Fern's built-in MDX component library (accordions, callouts, cards, steps, tabs, code blocks, API-reference snippets, and more) for authoring docs pages.
- Works in 6 steps: Confirm the file is .mdx. If .md, only… → Ask "does Markdown already do this?" If… → Open the reference section for the… → …
- Editing a Fern .mdx page and deciding whether a component would present content better than plain Markdown
- SKILL.md covers The .md vs .mdx rule (read…, When to reach for a component…, Authoring workflow and Suggesting components during…, plus 1 more section
- Runs Python scripts from its folder; calls python3
What it does
Fern Components is an agent skill from ai-dynamo/dynamo. Knowledge of Fern's built-in MDX component library (accordions, callouts, cards, steps, tabs, code blocks, API-reference snippets, and more) for authoring docs pages. Use when writing or editing a Fern .mdx page and deciding whether a component would present content better than plain Markdown, when a user asks "what Fern components exist" or "how do I use <X", or when reviewing a page for missed opportunities to use a component. Complements dynamo-docs (which owns page placement, nav, frontmatter, and the style…
Its SKILL.md is about 2.8k tokens, which your agent loads only when the skill is triggered. The skill folder holds 5 other files, including scripts and reference files (for example `manifest.json`, `references/components-reference.md` and `scripts/refresh_components.py`).
It sits in Documents & Office, covering Markdown and Design systems. The repository describes itself as: A Datacenter Scale Distributed Inference Serving Framework. The licence is Apache-2.0.
When your agent uses it
- Editing a Fern .mdx page and deciding whether a component would present content better than plain Markdown
- A user asks what Fern components exist
- How do I use <X
- Reviewing a page for missed opportunities to use a component
Example prompts
- “what Fern components exist”
- “how do I use <X”
- “/fern-components”
Requirements
- Python 3
Workflow steps
6 steps, taken from the first numbered list in SKILL.md.
- Confirm the file is .mdx. If .md, only GitHub-style callouts apply (see the rule above).
- Ask "does Markdown already do this?" If yes, use Markdown. Only reach for a component when it
- Open the reference section for the component and copy the closest example. Match prop names and
- Nest deliberately. Most containers accept rich children (a inside a , a
- Anchors: ##/### headings auto-generate anchors; title= props on , ,
- MDX gotchas that break the build: put a blank line after and before ; keep
What it can do on your machine
Read from SKILL.md and the folder at commit 1668037. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Ships 1 file in scripts/ (Python), which the agent can run.
Shell commands in SKILL.md call:
python3
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Fern Components loads about 2.8k tokens when it runs, and up to ~9.1k if it reads all its reference files. Until then it costs about 136 tokens; SKILL.md has 1,251 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.
SKILL.md
The full file from ai-dynamo/dynamo at commit 1668037, republished under its Apache-2.0 licence (© ai-dynamo). 1,251 words, ~2,828 tokens.
Download SKILL.mdSave it as
.claude/skills/fern-components/SKILL.md (or your agent's skills folder). This skill also uses 3 other files; get the full folder from GitHub.- name
- fern-components
- description
- Knowledge of Fern's built-in MDX component library (accordions, callouts, cards, steps, tabs, code blocks, API-reference snippets, and more) for authoring docs pages. Use when writing or editing a Fern `.mdx` page and deciding whether a component would present content better than plain Markdown, when a user asks "what Fern components exist" or "how do I use `<X>`", or when reviewing a page for missed opportunities to use a component. Complements dynamo-docs (which owns page placement, nav, frontmatter, and the style guide).
- license
- Apache-2.0
- metadata.author
- NVIDIA
- metadata.tags
- fern, docs, mdx
Fern Components
<!--
SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.
SPDX-License-Identifier: CC-BY-4.0
-->Fern ships a built-in library of ~27 MDX components you can use in documentation pages without
importing anything. This skill catalogs them, says when each is worth reaching for, and points to
references/components-reference.md for exact syntax, every prop,
and copy-paste examples.
This skill is component knowledge only. Page placement, docs/index.yml nav, frontmatter, SPDX
headers, links, terminology, and the style guide belong to the dynamo-docs skill — use both
together when authoring.
The .md vs .mdx rule (read this first in this repo)
Fern components are JSX. They render only in .mdx files. This repo (ai-dynamo/dynamo) mixes two
page formats, and the boundary is a hard must-fix:
| Page type | How to write rich content |
|---|---|
.mdx (e.g. kubernetes/getting-started/introduction.mdx, recipe pages) | Use Fern components directly — <CardGroup>, <Steps>, <Accordion>, <Tabs>, <Note>, etc. |
.md (most docs pages) | Do not hand-write <Note>/<Tip>/etc. Write callouts GitHub-style (> [!NOTE]); docs/fern/scripts/convert_callouts.py converts them at build. Other components (Cards, Steps, Tabs…) are not available — restructure with plain Markdown, or convert the page to .mdx on purpose. |
Callout conversion map (GitHub → Fern), for .md pages:
> [!NOTE] | > [!TIP] | > [!IMPORTANT] | > [!WARNING] | > [!CAUTION] |
|---|---|---|---|---|
<Note> | <Tip> | <Info> | <Warning> | <Error> |
Before using any component below, confirm the target file is .mdx. If it's .md and you need a
non-callout component, the decision (restructure vs. rename to .mdx) is a dynamo-docs / nav concern —
raise it, don't silently rename.
When to reach for a component (and when not)
Prefer plain Markdown. A component earns its place only when it does something Markdown can't:
progressive disclosure, sequencing, branching, live API data, or interactivity. Don't decorate — an
ordered list is better than <Steps> for two trivial steps, and a sentence is better than a <Card>
whose only job is to host a link (see the dynamo-docs / Fern cross-reference guidance).
| You want to… | Component | Notes |
|---|---|---|
| Flag a note / warning / tip | Callout (<Note> <Tip> <Warning> <Info> <Success> <Error> <Launch> <Check>) | In .md, use > [!NOTE] syntax instead (see above). |
| Collapse FAQs / optional detail | Accordion / AccordionGroup | Content stays SEO-indexed while collapsed. |
| Sequence a tutorial / setup | Steps / Step | Auto-numbered, anchor links. Use toc to surface in the TOC. |
| Show the same thing per-language / per-OS | Tabs / Tab | language= syncs all tabs+code blocks site-wide. |
| Navigation grid / feature hub | Card / CardGroup | cols={n}, Font Awesome icons, images, href makes the whole card clickable. |
| Rich code (highlight, focus, title, embed a file) | Code block / <Code> / <CodeBlocks> / <CodeGroup> | Fenced ``` with attrs; <Code src> embeds local/GitHub files. |
| Multiple install commands (npm/pnpm/yarn) | CodeGroup with for= | Custom sync group independent of language. |
| Image with caption / framing | Frame | Wraps <img>/<video>; background="subtle". |
| Long / searchable / sticky-header table | StickyTable / SearchableTable / StickySearchableTable, or <table sticky searchable> | Plain Markdown tables are fine for short data. |
| Inline status / version chip | Badge | For longer notes use a Callout instead. |
| Small icon inline / in headings | Icon | Font Awesome name or ./path.svg. |
| Clickable button / CTA / download trigger | Button | intent, href, icons. |
| Downloadable asset (PDF, ZIP bundle) | Download | src= single file, sources={[…]} zips multiple. |
| Click-to-copy inline text | Copy | Show one value, copy another via clipboard=. |
| Hover explanation for a term or code token | Tooltip / <Template> | <Template> adds tooltips to code-block variables. |
| Document a param / field / config key | ParamField | The standard field-doc row: path, type, required, default, deprecated. |
| Indent nested params visually | Indent | Wraps any content (unlike <Folder>). |
| Show a project / directory tree | Files / Folder / File | defaultOpen, href, highlighted, comment. |
| Link to non-heading content | Anchor | id= on paragraphs, tables, code blocks. |
| Float supplementary content right | Aside | Sticky; good for an endpoint snippet beside prose. |
| Copyable AI prompt (open in Cursor/Claude/ChatGPT) | Prompt | actions={["cursor","claude","chatgpt"]} or custom URL. |
| Show/hide by product, version, or role | If | products / versions / roles, combinable, not to invert. |
| Inline versioned content with a switcher | Versions / Version | Distinct from site-wide versioning. |
| API reference — request code sample | EndpointRequestSnippet | endpoint="POST /path"; languages, payload, hideTryItButton. |
| API reference — response sample | EndpointResponseSnippet | Pulls from your API definition. |
| API reference — endpoint schema (params/body) | EndpointSchemaSnippet | selector="request.body" etc. |
| API reference — any named type | Schema / SchemaSnippet | <Schema type="…"> fields; <SchemaSnippet> JSON. |
| API reference — live "try it" request builder | RunnableEndpoint | Real HTTP calls from the page. |
| API reference — webhook payload | WebhookPayloadSnippet | By operationId. |
| Reuse a Markdown fragment in many places | <Markdown src> (reusable snippets) | Single-source constants/warnings; supports {{params}}. |
| Something bespoke / interactive | Custom React component | .tsx in a components dir wired via docs.yml; SSR'd. |
Full syntax, every prop, variants, and examples for all of the above are in
references/components-reference.md. Read the relevant section
before writing a component you don't use often — props and exact names (e.g. <Note> vs <Callout intent>, iconSize math, selector values) are easy to get wrong from memory.
Show full SKILL.md (507 more words)Show less
Authoring workflow
- Confirm the file is
.mdx. If.md, only GitHub-style callouts apply (see the rule above). - Ask "does Markdown already do this?" If yes, use Markdown. Only reach for a component when it adds disclosure, sequencing, branching, interactivity, or live API data.
- Open the reference section for the component and copy the closest example. Match prop names and
casing exactly (MDX is
className, notclass; attributes arecamelCase—autoPlay, notautoplay). - Nest deliberately. Most containers accept rich children (a
<Note>inside a<Step>, a<CardGroup>inside an<Accordion>).<Folder>is the exception — it takes only<File>/<Folder>; use<Indent>when you need to indent anything else. - Anchors:
##/###headings auto-generate anchors;title=props on<Step>,<Tab>,<Accordion>,<Card>do not. To deep-link one, add a real heading or use<Anchor id>. - MDX gotchas that break the build: put a blank line after
<div …>and before</div>; keep code fences at column 0; replace bare<https://…>with[text](https://…); escape stray</>and literal$(\$) outside code.
Suggesting components during review
When reviewing or improving an existing .mdx page, watch for these high-value swaps:
- A wall of "first… then… next…" prose or a long ordered list of actions → Steps.
- Parallel per-language / per-OS / per-backend blocks repeated back to back → Tabs (with
language=when it's code, so they sync). - A long FAQ, or optional deep-dive detail interrupting the main flow → Accordion.
- A cluster of "see also" links at the top or bottom of a page → CardGroup of Cards.
- Hand-maintained request/response code that duplicates the API definition → the Endpoint*Snippet family (also gives AI agents structured Markdown output).
- The same constant, warning, or boilerplate copy-pasted across pages → a reusable snippet
(
<Markdown src>). - A very long reference table users scan → StickyTable / SearchableTable.
Suggest the lightest option, name the component, and point at the reference section — don't rewrite a working page just to add components.
Staying in sync with Fern (refresh mechanism)
This skill is a cached snapshot of Fern's component docs, not a live mirror — so it works offline
and loads instantly. The trade-off is that it can drift when Fern ships or changes a component.
scripts/refresh_components.py tracks that drift, and
manifest.json records the upstream git-blob SHA of every source page as of the last
sync (see manifest.json's fetched_at for how old this snapshot is).
Source of truth (GitHub fern-api/docs@main): the component-library pages under
fern/products/docs/pages/component-library/** plus customization/custom-react-components.mdx and
navigation/tabs.mdx.
On-load staleness check (do this when the skill loads): read manifest.json's fetched_at. If it
is more than ~3 months old — or the user asks whether the components are current, or a component
doesn't behave as the reference claims — tell the user the snapshot's age and offer to refresh. Don't
refresh unprompted: it needs internet and edits the reference, so surface it and let the user say go.
Refreshing prefers the gh CLI and falls back to the public GitHub API; everything else here is
offline.
# From the skill dir. --check is read-only and safe to run anytime.
python3 scripts/refresh_components.py --check # drift vs manifest? exit 2 = drift, 0 = in sync
python3 scripts/refresh_components.py --fetch --out /tmp/fern-refresh # download only changed pages
# → then update references/components-reference.md and the tables above from those pages,
python3 scripts/refresh_components.py --sync # record the new SHAs as currentOnly --sync writes the manifest; --check/--fetch never mutate the skill. After editing the
reference from freshly fetched pages, run --sync so the next --check is clean.
© ai-dynamo, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 3 other files (scripts, references) in .agents/skills/fern-components of ai-dynamo/dynamo.
- SKILL.md
- manifest.json
- references/components-reference.md
- scripts/refresh_components.py
Open the folder on GitHubat commit 1668037
Compare with similar skills
Fern Components next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Fern Components this skillai-dynamo/dynamo | 8.2k | — | ~2.8k | Automated safety check: Pass | Apache-2.0 | |
| Markdown HTML Orchestratoralirezarezvani/claude-skills | 28k | — | ~2.7k | Automated safety check: Pass | MIT | |
| Data Viz Deckthatrebeccarae/claude-marketing | 162 | — | ~1.8k | Automated safety check: Pass | MIT | |
| Human Reviewpetergyang/human-review | 1.4k | — | ~2.1k | Automated safety check: Pass | MIT | |
| Using Docs Kitlobehub/lobe-ui | 2.2k | — | ~2.8k | Automated safety check: Pass | MIT | |
| Building With Lobe UIlobehub/lobe-ui | 2.2k | — | ~2k | Automated safety check: Pass | MIT |
Similar skills
Data Viz Deck
thatrebeccarae/claude-marketing
Transform audit data, performance reports, and structured analyses into polished visual deliverables.
Human Review
petergyang/human-review
Open an HTML file, Markdown file, or localhost page in the browser so the user can edit text directly and leave comments on specific parts, then send all edits and comments back to you.
Using Docs Kit
lobehub/lobe-ui
Set up and author a documentation site with @lobehub/docs-kit (the lobedocs CLI, React Router + Vite static docs used by ui.lobehub.com).
Building With Lobe UI
lobehub/lobe-ui
Build UI with the LobeHub design ecosystem — @lobehub/ui (plus its base-ui, chat, mobile, awesome, brand, mdx, i18n namespaces), @lobehub/icons, @lobehub/charts, @lobehub/fluent-emoji and…
Storybook Story
radix-ng/primitives
Write or update Storybook stories and docs MDX for a Radix NG primitive following project conventions.
More from ai-dynamo/dynamo
All 27 skills in this repoVisual Review
ai-dynamo/dynamo
Create self-contained interactive HTML code-review dashboards from GitHub or GitLab pull requests, checked-out branch diffs, or supplied unified diffs, with correctness and safe-to-merge scores…
Fern Navigation
ai-dynamo/dynamo
Knowledge of Fern's site-level navigation and structure configuration — how a docs site is organized in docs.yml (and product/version .yml files) using sections, pages, folders, tabs, tab variants…
Dynamo Agent Harness
ai-dynamo/dynamo
Drives persistent Claude Code, Codex, or OpenCode agent sessions through a Dynamo OpenAI/Anthropic-compatible endpoint over Agent Client Protocol (ACP).
Dynamo Frontend Benchmark
ai-dynamo/dynamo
Benchmark and profile the Dynamo frontend (dynamo.frontend HTTP + tokenizer + KV router) against mock workers (dynamo.mocker).
Configure Aiperf Benchmark
ai-dynamo/dynamo
Selects and freezes a question-driven AIPerf workload, objective, load policy, and Kubernetes execution manifest for a successfully deployed Dynamo candidate.
Debug Session
ai-dynamo/dynamo
Sets up a structured debugging session for a Dynamo bug — pull the report from a Linear ticket, GitHub issue, or pasted text, capture the environment, create a persistent worklog markdown file, and…
Related
Questions about Fern Components
What does Fern Components do?
Knowledge of Fern's built-in MDX component library (accordions, callouts, cards, steps, tabs, code blocks, API-reference snippets, and more) for authoring docs pages. Fern Components is an agent skill from ai-dynamo/dynamo. Knowledge of Fern's built-in MDX component library (accordions, callouts, cards, steps, tabs, code blocks, API-reference snippets, and more) for authoring docs pages.
When should I use Fern Components?
Fern Components fits situations like: editing a Fern .mdx page and deciding whether a component would present content better than plain Markdown; A user asks what Fern components exist; how do I use <X; reviewing a page for missed opportunities to use a component.
How do I install Fern Components in Claude Code?
Run `npx skills add ai-dynamo/dynamo --skill fern-components -a claude-code`. Or copy the skill folder (.agents/skills/fern-components in ai-dynamo/dynamo) into .claude/skills/fern-components in your project. Claude Code loads it when a task matches its description.
How do I install Fern Components in Codex?
Run `npx skills add ai-dynamo/dynamo --skill fern-components -a codex`. Or copy the skill folder (.agents/skills/fern-components in ai-dynamo/dynamo) into .agents/skills/fern-components in your project. Codex loads it when a task matches its description.
Can I use Fern Components in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add ai-dynamo/dynamo --skill fern-components -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/fern-components, .gemini/skills/fern-components, .github/skills/fern-components and .opencode/skills/fern-components in your project.
What does Fern Components need to run?
Going by SKILL.md and its folder, Fern Components needs Python for the scripts in its folder and the command-line tools its instructions call (python3). Our summary lists: Python 3.
Does Fern Components access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Fern Components safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.
What licence does Fern Components use?
Fern Components is published under the Apache-2.0 licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Fern Components use?
About 2.8k tokens (SKILL.md is roughly 11k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 6.2k tokens, read only when the agent opens those files.
What are the alternatives to Fern Components?
Skills that share tags, products or a category with Fern Components: Markdown HTML Orchestrator (alirezarezvani/claude-skills, 28k stars), Data Viz Deck (thatrebeccarae/claude-marketing, 162 stars), Human Review (petergyang/human-review, 1.4k stars) and Using Docs Kit (lobehub/lobe-ui, 2.2k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Fern Components?
ai-dynamo (a GitHub organization) maintains it in ai-dynamo/dynamo, which has 8,245 GitHub stars. The repository holds 27 skills in this directory. The repository was last updated on October 8, 2026.
Source: ai-dynamo/dynamo on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.