createSkipNavLinkStyles = (props) => {
  const baseStyles = {
    userSelect: 'none',
    border: '0',
    borderRadius: 'md',
    fontWeight: 'semibold',
    height: '1px',
    width: '1px',
    margin: '-1px',
    padding: '0',
    outline: '0',
    overflow: 'hidden',
    position: 'absolute',
    clip: 'rect(0 0 0 0)',
    _focus: {
      clip: 'auto',
      width: 'auto',
      height: 'auto',
      boxShadow: 'outline',
      padding: '1rem',
      position: 'fixed',
      top: '1.5rem',
      insetStart: '1.5rem',
      bg: mode('white', 'gray.700')
    }
  }

  return { ...baseStyles }
}
Hey! Welcome to @chakra-ui/vue SkipNavLink

Renders a link that remains hidden until focused to skip to the main content.

@see Docs     https://vue.chakra-ui.com/skip-nav-link
@see Source   https://github.com/chakra-ui/chakra-ui-vue/blob/master/packages/chakra-ui-core/src/CSkipNav/CSkipNav.js