Skills
.Work. You
Rest

component-link

Community

Generate an accessible Link with safe externals

Software Engineering#typescript#accessibility#react#scss#fpkit-acss#link-component#external-security
Authorshawn-sandy
Version1.0.0
Installs0

System Documentation

What problem does it solve?

Creates an fpkit-style accessible Link component that prevents common accessibility mistakes and fixes external-link security issues when developers are generating anchors by hand.

Core Features & Use Cases

  • Accessible link semantics: Generates a native anchor wrapper suitable for keyboard navigation and assistive technologies.
  • External link security defaults: Automatically merges correct rel tokens when target="_blank" is used to mitigate tabnabbing and referrer leakage.
  • Consistent styling via SCSS variables: Produces companion SCSS with focus-visible outlines and visited/hover states aligned to fpkit conventions.
  • Use Case: When onboarding a team to a token-driven fpkit/acss React codebase, you can scaffold consistent internal/external links across pages without repeating boilerplate.

Quick Start

Ask for a link component by saying: Generate a Link component for an external URL that opens in a new tab, with descriptive link text and correct security rel handling.

Dependency Matrix

Required Modules

None required

Components

references

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: component-link
Download link: https://github.com/shawn-sandy/agentic-acss-plugins/archive/main.zip#component-link

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.