SKILL·60B8F1

animated-focus

aiskillstore
Updated 1 month ago
18 views
162
7
162
View on GitHub
Documentationword

About

This skill provides solutions for focus management issues in animated floating UI components like dropdowns and popovers. It addresses browser limitations where CSS opacity animations prevent proper keyboard navigation by delaying focus until animations complete. Use this when implementing accessible components with open/close animations to ensure keyboard users can navigate correctly.

Quick Install

Claude Code

Recommended
Primary
npx skills add aiskillstore/marketplace -a claude-code
Plugin CommandAlternative
/plugin add https://github.com/aiskillstore/marketplace
Git CloneAlternative
git clone https://github.com/aiskillstore/marketplace.git ~/.claude/skills/animated-focus

Copy and paste this command in Claude Code to install this skill

GitHub Repository

aiskillstore/marketplace
Path: skills/andrehogberg/animated-focus
0
ai-skillsclaudeclaude-codeclaude-skillscodexcodex-skills
FAQ

Frequently asked questions

What is the animated-focus skill?

animated-focus is a Claude Skill by aiskillstore. Skills package instructions and resources that Claude loads on demand, so Claude can perform animated-focus-related tasks without extra prompting.

How do I install animated-focus?

Use the install commands on this page: add animated-focus to Claude Code as a plugin, or clone its repository into your skills directory, then restart Claude so it picks up the skill.

What category does animated-focus belong to?

animated-focus is in the Documentation category, tagged word.

Is animated-focus free to use?

Yes. animated-focus is listed on AIMCP and free to install. It runs inside Claude, so no separate service account is required to use the skill itself.

Related Skills

railway-docs
Documentation

This skill fetches current Railway documentation to answer questions about features, functionality, or specific docs URLs. It ensures developers receive accurate, up-to-date information directly from Railway's official sources. Use it when users ask how Railway works or reference Railway documentation.

View skill
n8n-code-python
Documentation

This Claude Skill provides expert guidance for writing Python code in n8n's Code nodes, specifically for using Python's standard library and working with n8n's special syntax like `_input`, `_json`, and `_node`. It helps developers understand Python's limitations within n8n and recommends using JavaScript for most workflows while offering Python solutions for specific data transformation needs.

View skill
archon
Documentation

The Archon skill provides RAG-powered semantic search and project management through a REST API. Use it for querying documentation, managing hierarchical projects/tasks, and performing knowledge retrieval with document upload capabilities. Always prioritize Archon first when searching external documentation before using other sources.

View skill
n8n-code-javascript
Documentation

This Claude Skill provides expert guidance for writing JavaScript code in n8n's Code nodes. It covers essential n8n-specific syntax like `$input`/`$json` variables, HTTP helpers, and DateTime handling, while troubleshooting common errors. Use it when developing n8n workflows that require custom JavaScript processing in Code nodes.

View skill