How do I install the Dogfood Components skill?

Run npx skillmds@latest add tomevault-io/dogfood-components in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Dogfood Components safe to use?

This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Dogfood Components?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Dogfood Components free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Dogfood Components?

tomevault-io (@tomevault-io) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Dogfood Components by tomevault-io — Agent Skill

Name: Dogfood Components
Author: tomevault-io

File contents

Dogfooding Components Skill

Use this skill whenever you are modifying the documentation site structure, headers, or layout. The goal is to maximize the use of our own UI components within the documentation logic itself (dogfooding).

Workflow

1. Analysis

Identify Ad-hoc UI: Look for custom HTML or static elements in the docs site (apps/playground-web/src/App.tsx, apps/playground-web/src/components/docs/CombinedDocsLayout.tsx, apps/playground-web/src/pages/) that replicate component functionality.
Check Library availability: Verify if a corresponding component exists in @gv-tech/ui-web (e.g., Breadcrumbs, Tabs, Alerts, Badges).

2. Implementation

Prioritize Library Components: Replace custom implementations with components from @gv-tech/ui-web.
Pass Real State: Connect these components to the documentation's state (e.g., using activeItem with Breadcrumb or Tabs).
Consistent Styling: Use the same variants and props that we recommend to our users.

3. Validation

Functional Check: Ensure the component behaves correctly within the documentation context (e.g., navigation links work).
Visual Check: Verify the component renders with the correct theme and layout in the docs.

Checklist

Identified custom UI elements that can be replaced.
Used components from @gv-tech/ui-web instead of ad-hoc HTML/CSS.
Component is correctly wired to relevant documentation state.
Verified that navigation and interaction remains functional.
bun validate passes successfully.

Converted and distributed by TomeVault — claim your Tome and manage your conversions.

---name: dogfood-componentsdescription: Guidelines for using library components within the documentation site itself to ensure consistency and showcase real-world usage. Use when this capability is needed.---# Dogfooding Components SkillUse this skill whenever you are modifying the documentation site structure, headers, or layout. The goal is to maximize the use of our own UI components within the documentation logic itself (dogfooding).## Workflow### 1. Analysis- **Identify Ad-hoc UI**: Look for custom HTML or static elements in the docs site (`apps/playground-web/src/App.tsx`, `apps/playground-web/src/components/docs/CombinedDocsLayout.tsx`, `apps/playground-web/src/pages/`) that replicate component functionality.- **Check Library availability**: Verify if a corresponding component exists in `@gv-tech/ui-web` (e.g., Breadcrumbs, Tabs, Alerts, Badges).### 2. Implementation- **Prioritize Library Components**: Replace custom implementations with components from `@gv-tech/ui-web`.- **Pass Real State**: Connect these components to the documentation's state (e.g., using `activeItem` with `Breadcrumb` or `Tabs`).- **Consistent Styling**: Use the same variants and props that we recommend to our users.### 3. Validation- **Functional Check**: Ensure the component behaves correctly within the documentation context (e.g., navigation links work).- **Visual Check**: Verify the component renders with the correct theme and layout in the docs.## Checklist- [ ] Identified custom UI elements that can be replaced.- [ ] Used components from `@gv-tech/ui-web` instead of ad-hoc HTML/CSS.- [ ] Component is correctly wired to relevant documentation state.- [ ] Verified that navigation and interaction remains functional.- [ ] `bun validate` passes successfully.---> Converted and distributed by [TomeVault](https://tomevault.io/claim/garcia-ventures) — claim your Tome and manage your conversions.

Frequently asked questions

Dogfood Components