How do I install the El Anchor skill?

Run npx skillmds@latest add jiaiyan/el-anchor 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 El Anchor safe to use?

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

Which AI agents work with El Anchor?

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 El Anchor free to use?

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

Who published El Anchor?

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

El Anchor by jiaiyan — Agent Skill

Name: El Anchor
Rating: 4.2 (5 reviews)
Author: jiaiyan

File contents

Anchor Component

Anchor provides quick navigation to specific sections on the current page.

When to Use

Page table of contents
Document navigation
Section anchors
Quick page navigation

Basic Usage

<template>
  <el-anchor>
    <el-anchor-link href="#section1" title="Section 1" />
    <el-anchor-link href="#section2" title="Section 2" />
    <el-anchor-link href="#section3" title="Section 3" />
  </el-anchor>
</template>

Horizontal Mode

<template>
  <el-anchor direction="horizontal">
    <el-anchor-link href="#section1" title="Section 1" />
    <el-anchor-link href="#section2" title="Section 2" />
  </el-anchor>
</template>

Scroll Container

<template>
  <el-anchor :container="containerRef" :offset="100">
    <el-anchor-link href="#section1" title="Section 1" />
  </el-anchor>
</template>

<script setup>
import { ref } from 'vue'

const containerRef = ref(null)
</script>

Underline Type

<template>
  <el-anchor type="underline">
    <el-anchor-link href="#section1" title="Section 1" />
  </el-anchor>
</template>

API Reference

Anchor Attributes

Name	Description	Type	Default
container	Scroll container	`string \| HTMLElement \| Window`	—
offset	Scroll offset	`number`	`0`
bound	Offset for triggering anchor	`number`	`15`
duration	Scroll duration (ms)	`number`	`300`
marker	Show marker	`boolean`	`true`
type	Anchor type	`'default' \| 'underline'`	`'default'`
direction	Anchor direction	`'vertical' \| 'horizontal'`	`'vertical'`

Anchor Events

Name	Description	Type
change	Active link changes	`(href: string) => void`
click	Link clicked	`(e: MouseEvent, href?: string) => void`

Anchor Exposes

Name	Description	Type
scrollTo	Scroll to specific position	`(href: string) => void`

AnchorLink Attributes

Name	Description	Type	Default
title	Link text	`string`	—
href	Link address	`string`	—

AnchorLink Slots

Name	Description
default	Child links
sub-link	Child links

Best Practices

Use container for custom scroll areas
Use offset for fixed headers
Use direction="horizontal" for top navigation

---name: el-anchordescription: Anchor component for anchor navigation. Invoke when user needs to create page anchor navigation, table of contents, or quick navigation to specific sections.--- # Anchor Component Anchor provides quick navigation to specific sections on the current page. ## When to Use - Page table of contents - Document navigation - Section anchors - Quick page navigation ## Basic Usage ```vue <template> <el-anchor> <el-anchor-link href="#section1" title="Section 1" /> <el-anchor-link href="#section2" title="Section 2" /> <el-anchor-link href="#section3" title="Section 3" /> </el-anchor> </template> ``` ## Horizontal Mode ```vue <template> <el-anchor direction="horizontal"> <el-anchor-link href="#section1" title="Section 1" /> <el-anchor-link href="#section2" title="Section 2" /> </el-anchor> </template> ``` ## Scroll Container ```vue <template> <el-anchor :container="containerRef" :offset="100"> <el-anchor-link href="#section1" title="Section 1" /> </el-anchor> </template> <script setup> import { ref } from 'vue' const containerRef = ref(null) </script> ``` ## Underline Type ```vue <template> <el-anchor type="underline"> <el-anchor-link href="#section1" title="Section 1" /> </el-anchor> </template> ``` ## API Reference ### Anchor Attributes | Name | Description | Type | Default | |------|-------------|------|---------| | container | Scroll container | `string \| HTMLElement \| Window` | — | | offset | Scroll offset | `number` | `0` | | bound | Offset for triggering anchor | `number` | `15` | | duration | Scroll duration (ms) | `number` | `300` | | marker | Show marker | `boolean` | `true` | | type | Anchor type | `'default' \| 'underline'` | `'default'` | | direction | Anchor direction | `'vertical' \| 'horizontal'` | `'vertical'` | ### Anchor Events | Name | Description | Type | |------|-------------|------| | change | Active link changes | `(href: string) => void` | | click | Link clicked | `(e: MouseEvent, href?: string) => void` | ### Anchor Exposes | Name | Description | Type | |------|-------------|------| | scrollTo | Scroll to specific position | `(href: string) => void` | ### AnchorLink Attributes | Name | Description | Type | Default | |------|-------------|------|---------| | title | Link text | `string` | — | | href | Link address | `string` | — | ### AnchorLink Slots | Name | Description | |------|-------------| | default | Child links | | sub-link | Child links | ## Best Practices 1. Use `container` for custom scroll areas 2. Use `offset` for fixed headers 3. Use `direction="horizontal"` for top navigation

Frequently asked questions

El Anchor