Skip to documentation

AgentSkillCard

A card that hands coding agents a prompt pointing at your skills, and gives humans the matching install command, with a row of supported agent logos.

import { AgentSkillCard } from '@lobehub/ui/awesome';
NPMSourceEdit
Landing

Default

With both agent and human panels the card shows an "I'm an Agent / I'm a Human" toggle. The logo row defaults to DEFAULT_SKILL_AGENTS, built from @lobehub/icons.

Loading preview

Pass agents to change the logo row, or an empty array to hide it. Omit human to show only the prompt.

Loading preview

APIs

AgentSkillCard properties
agentRequired
AgentSkillCardPanel

Shown when the agent tab is active.

agents
AgentSkillCardAgent[]

Coding agents shown above the prompt. Pass an empty array to hide the row.

Defaults to DEFAULT_SKILL_AGENTS.

defaultMode
'agent' | 'human'

Defaults to "agent".

footer
null | string | number | bigint | false | true | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<AwaitedReactNode>

Extra content at the bottom of the card, e.g. links to skills.md and llms.txt.

human
AgentSkillCardPanel

Shown when the human tab is active. Without it the card has no tabs.

mode
'agent' | 'human'
onModeChange
(mode: AgentSkillCardMode) => void

Also accepts all native HTML and ARIA attributes.