Use this skill when the user says "check component usage", "use tabs here", "should this be an accordion", "component consistency", "when to use cards vs tabs", "built-in components", "MDX components", "component audit", "callout consistency", "use the right component", or any request about ensuring the correct ReadMe component is used in the right context.
Read _shared/docs-context.md and _shared/rules.md before proceeding. Run branch safety check per _shared/branch-safety.md.
Docs root: {DOCS_ROOT}
Docs directory: rdme-installation/docs/
Shared context: Read _shared/docs-context.md in the skills directory for the current docs structure and section map.
This skill operates ONLY on the rdme-installation repository. The workspace contains other doc
repos (rdme-admin, rdme-artifactory, etc.) — ignore them entirely.
You ensure ReadMe's built-in MDX components are used consistently, correctly, and in the right contexts across the JFrog Installation documentation. Every component exists for a reason — Tabs for alternatives, Accordions for optional detail, Cards for navigation, Callouts for warnings. When the wrong component is used (or no component is used where one should be), the reader experience degrades.
| Component | When to Use | Full Spec |
|---|---|---|
| Tabs | Mutually exclusive alternatives (OS, format, tool, edition) | REFERENCE.md |
| Accordion | Optional deep-dive details, troubleshooting, FAQs | REFERENCE.md |
| Cards | Landing page navigation, feature overview, decision points | REFERENCE.md |
| Columns | Side-by-side comparisons with 2–3 items | REFERENCE.md |
| Callouts | Warnings (🚧), tips (📘), danger (❗), success (👍) | REFERENCE.md |
| Tabbed Code Blocks | Code-only alternatives (adjacent fenced blocks, no blank line) | REFERENCE.md |
| Reusable Content | Same text block appearing in 5+ pages | REFERENCE.md |
| Glossary | First use of a defined term per page | REFERENCE.md |
| Embeds | Tutorial videos, GitHub repos | REFERENCE.md |
For full syntax, "when NOT to use" guidance, rules, and examples — see REFERENCE.md. For the component decision matrix and project-wide standards — see REFERENCE.md.
For a given page or the entire docs set, identify:
Scan page content for these patterns:
| Content Pattern | Should Be | Detection |
|---|---|---|
| "For Linux... For macOS... For Windows..." with separate sections | Tabs | H3 headings matching OS/platform names in sequence |
| Adjacent code blocks with different language/platform labels | Tabbed Code Blocks | ``` blocks separated by no content or only "or" |
| "Note:", "Important:", "Warning:" in plain text | Callout | Lines starting with "Note:", "Note:", etc. |
| Long optional sections readers often skip | Accordion | H3 sections with "Advanced", "Optional", "Detailed" in heading |
| Landing page with bullet list of child links | Cards | index.md files with - [Page](link) lists |
| Same paragraph in 3+ files | Reusable Content | Hash-based duplicate detection (see rdme-deduplication-checker) |
| Undefined acronym or jargon | Glossary | Term in glossary list without <Glossary> wrapper |
| "Back up your data before..." in plain text | Callout (🚧) | Sentences containing "backup/back up" + "before" |
| "This will delete all..." in plain text | Callout (❗) | Sentences containing "delete/remove/destroy" + "all/permanently" |
| "You can verify by..." at end of procedure | Callout (👍) | Sentences with "verify/confirm/check" near page end |
| Side-by-side comparison of 2 options in prose | Columns | Paragraphs structured as "Option A... Option B..." |
| Consistency Check | What to Look For |
|---|---|
| Callout emoji consistency | Does the project use 📘 everywhere or mix 📘 and ℹ️? Pick one and enforce it |
| Callout density | More than 3 callouts between two H2 headings = callout fatigue |
| Tab vs section | Some pages use Tabs for OS variants, siblings use H3 sections — normalize |
| Cards vs bullet links | Some landing pages use <Cards>, others use - [link](url) — normalize |
| Plain blockquotes vs callouts | Blockquotes without emoji render as plain quotes, not callouts — intentional? |
| HTMLBlock tables vs markdown tables | Some pages use <HTMLBlock><table>, others use markdown ` |
| Accordion usage | Are similar types of content (FAQ, advanced config) consistently in accordions? |
## Component Audit: [Page Title or "Full Docs"]
### Current Usage
| Component | Count | Pages |
|-----------|-------|-------|
| Tabs | N | [list] |
| Cards | N | [list] |
| Callouts | N | [list] |
| Accordion | N | [list] |
### Missed Opportunities
| Page | Line | Current Content | Recommended Component | Why |
|------|------|----------------|----------------------|-----|
| file.md | 45 | OS-specific H3 sections | Tabs | Mutually exclusive alternatives |
| file.md | 80 | "Note: ..." in plain text | Callout (📘) | Important info buried in prose |
### Inconsistencies
| Issue | Pages Affected | Recommended Standard |
|-------|---------------|---------------------|
| Mix of 📘 and ℹ️ for info callouts | 12 pages | Use 📘 consistently |
| Landing pages: Cards vs bullet links | 8 pages | Use Cards on all landing pages |
### Syntax Issues
| Page | Line | Issue | Fix |
|------|------|-------|-----|
| file.md | 23 | `<Tab>` missing `title` attribute | Add `title="..."` |
See REFERENCE.md for the full project-wide standards table, JSX/MDX attribute rules, and the post-audit validation checklist.