By using our site, you acknowledge and agree to our Terms & Privacy Policy.

Lodaer Img

Claude Code Agents — 76+ Best AI Agents for Development (2026)


Best Claude Code Agents Directory (2026)

Discover and install the best Claude Code agents. Browse 76 curated agents with one-click installation.

Claude Code Agents are autonomous AI-powered workflows that can handle complex, multi-step tasks with minimal
human intervention. Unlike simple skills that augment a single interaction, agents orchestrate entire
workflows
— from analyzing a codebase and planning changes to implementing, testing, and deploying solutions.

Agents represent the cutting edge of AI-assisted development. Each agent in this directory is designed for a
specific domain: frontend development, backend architecture,
security auditing, data science, or full-stack engineering.
They combine multiple skills, tools, and decision-making logic into cohesive automated workflows.

Browse the best Claude Code agents available in 2026. These agents have been tested by the
community and rated for reliability, code quality, and real-world effectiveness. Sort by popularity or filter by
category to find the right agent for your needs.

Setting up an agent is as simple as installing a skill. Run the install command, configure any required settings,
and let the agent handle the heavy lifting. Agents work with your existing codebase, respect your project’s
conventions, and produce production-ready output.

The agent ecosystem is evolving fast, with new specialized agents being developed for niche use cases.
From automated code migration to intelligent test generation, agents are changing how teams
approach software development. Submit your own agent to share it with the community.

🔍

⭐ Popular
🕑 Newest
🔤 A – Z


76 agents found

Sorted by Popular


FullStack
🤖

Accessibility Expert

You are a world-class expert in web accessibility who translates standards into practical guidance for designers, developers, and QA. You ensure products are inclusive, usable, and aligned with WCAG 2


D
davila7

⭐ 0

npx claude-code-templates@latest --agent=cli-tool/components/agents/web-tools --yes


View Details


FullStack
🤖

ADR Generator Agent

You are an expert in architectural documentation, this agent creates well-structured, comprehensive Architectural Decision Records that document important technical decisions with clear rationale, con


D
davila7

⭐ 0

npx claude-code-templates@latest --agent=cli-tool/components/agents/data-ai --yes


View Details


FullStack
🤖

Agent Creation System Prompt

This is the exact system prompt used by Claude Code's agent generation feature, refined through extensive production use.


D
davila7

⭐ 0

npx claude-code-templates@latest --agent=cli-tool/components/skills/development/agent-development/references --yes


View Details


FullStack
🤖

Agent Development for Claude Code Plugins

Agents are autonomous subprocesses that handle complex, multi-step tasks independently. Understanding agent structure, triggering conditions, and system prompt design enables creating powerful autonom


D
davila7

⭐ 0

npx claude-code-templates@latest --agent=cli-tool/components/skills/development/agent-development --yes


View Details


FullStack
🤖

Agent Evaluation

You're a quality engineer who has seen agents that aced benchmarks fail spectacularly in


D
davila7

⭐ 0

npx claude-code-templates@latest --agent=cli-tool/components/skills/ai-research/agent-evaluation --yes


View Details


FullStack
🤖

Agent Manager Skill

Use this skill when you need to:


D
davila7

⭐ 0

npx claude-code-templates@latest --agent=cli-tool/components/skills/ai-research/agent-manager-skill --yes


View Details


FullStack
🤖

Agent MD Refactor

A Claude Code skill that transforms bloated agent instruction files into clean, organized documentation using progressive disclosure principles.


D
davila7

⭐ 0

npx claude-code-templates@latest --agent=cli-tool/components/skills/development/agent-md-refactor --yes


View Details


FullStack
🤖

Agent Memory Skill

This skill provides a persistent, searchable memory bank that automatically syncs with project documentation. It runs as an MCP server to allow reading/writing/searching of long-term memories.


D
davila7

⭐ 0

npx claude-code-templates@latest --agent=cli-tool/components/skills/ai-research/agent-memory-mcp --yes


View Details


FullStack
🤖

Agent Memory Systems

You are a cognitive architect who understands that memory makes agents intelligent.


D
davila7

⭐ 0

npx claude-code-templates@latest --agent=cli-tool/components/skills/ai-research/agent-memory-systems --yes


View Details


FullStack
🤖

Agent Messaging Protocol (AMP)

Send and receive cryptographically signed messages between AI agents. AMP works **locally by default** — no external dependencies needed for basic messaging. Part of the [AI Maestro](https://github.c


D
davila7

⭐ 0

npx claude-code-templates@latest --agent=cli-tool/components/skills/ai-maestro/agent-messaging --yes


View Details


FullStack
🤖

Agent SDK — Python

The Claude Agent SDK provides a higher-level interface for building AI agents with built-in tools, safety features, and agentic capabilities.


D
davila7

⭐ 0

npx claude-code-templates@latest --agent=cli-tool/components/skills/development/claude-api/python/agent-sdk --yes


View Details


FullStack
🤖

Agent SDK — TypeScript

The Claude Agent SDK provides a higher-level interface for building AI agents with built-in tools, safety features, and agentic capabilities.


D
davila7

⭐ 0

npx claude-code-templates@latest --agent=cli-tool/components/skills/development/claude-api/typescript/agent-sdk --yes


View Details


FullStack
🤖

Agent Tool Builder

You are an expert in the interface between LLMs and the outside world.


D
davila7

⭐ 0

npx claude-code-templates@latest --agent=cli-tool/components/skills/ai-research/agent-tool-builder --yes


View Details


FullStack
🤖

AGIRAILS — Agent Payment Infrastructure

You are a payments engineer for the AI agent economy. Your job is to onboard agents onto the


D
davila7

⭐ 0

npx claude-code-templates@latest --agent=cli-tool/components/skills/development/agirails-agent-payments --yes


View Details


FullStack
🤖

AI Agents Architect

**Role**: AI Agent Systems Architect


D
davila7

⭐ 0

npx claude-code-templates@latest --agent=cli-tool/components/skills/ai-research/ai-agents-architect --yes


View Details


FullStack
🤖

AI Maestro Agent Management

Create, manage, and orchestrate multiple AI agents through a unified CLI. Handles the full agent lifecycle: create, hibernate, wake, rename, export/import, and plugin management. Part of the [AI Maest


D
davila7

⭐ 0

npx claude-code-templates@latest --agent=cli-tool/components/skills/ai-maestro/agent-management --yes


View Details


FullStack
🤖

AI-Assisted Agent Generation Template

Use this template to generate agents using Claude with the agent creation system prompt.


D
davila7

⭐ 0

npx claude-code-templates@latest --agent=cli-tool/components/skills/development/agent-development/examples --yes


View Details


FullStack
🤖

Analyze bundle size

Use this agent for:


D
davila7

⭐ 0

npx claude-code-templates@latest --agent=cli-tool/templates/javascript-typescript/examples/react-app/agents --yes


View Details


FullStack
🤖

Apify Actor Expert Agent

You help developers integrate Apify Actors into their projects. You adapt to their existing stack and deliver integrations that are safe, well-documented, and production-ready.


D
davila7

⭐ 0

npx claude-code-templates@latest --agent=cli-tool/components/agents/devops-infrastructure --yes


View Details


FullStack
🤖

AutoClaude

Autonomous multi-agent coding framework for Claude Code (Claude Agent SDK) that integrates the full SDLC – "plans, builds, and validates software for you". Features a slick kanban-style UI and a well-


?
Community

⭐ 0



View Details


FullStack
🤖

AutoGPT – Autonomous AI Agent Platform

Comprehensive platform for building, deploying, and managing continuous AI agents through a visual interface or development toolkit.


D
davila7

⭐ 0

npx claude-code-templates@latest --agent=cli-tool/components/skills/ai-research/agents-autogpt --yes


View Details


FullStack
🤖

AutoGPT Advanced Usage Guide

from backend.data.block import Block, BlockSchema, BlockType


D
davila7

⭐ 0

npx claude-code-templates@latest --agent=cli-tool/components/skills/ai-research/agents-autogpt/references --yes


View Details


FullStack
🤖

Autonomous Agents

You are an agent architect who has learned the hard lessons of autonomous AI.


D
davila7

⭐ 0

npx claude-code-templates@latest --agent=cli-tool/components/skills/ai-research/autonomous-agents --yes


View Details


FullStack
🤖

BettorEdge Value Finder

An AI agent specialized in finding positive expected value (+EV) betting opportunities on BettorEdge prediction markets.


D
davila7

⭐ 0

npx claude-code-templates@latest --agent=cli-tool/components/agents/finance --yes


View Details


FullStack
🤖

Bias monitoring implementation example

– **Fairness**: Equitable treatment across all user groups


D
davila7

⭐ 0

npx claude-code-templates@latest --agent=cli-tool/components/agents/ai-specialists --yes


View Details


FullStack
🤖

Blockchain Web3

Initialize blockchain development by understanding project requirements.


D
davila7

⭐ 0

npx claude-code-templates@latest --agent=cli-tool/components/agents/blockchain-web3 --yes


View Details


FullStack
🤖

Business Marketing

Initialize business analysis by understanding organizational needs.


D
davila7

⭐ 0

npx claude-code-templates@latest --agent=cli-tool/components/agents/business-marketing --yes


View Details


FullStack
🤖

Claude Code Flow

This mode serves as a code-first orchestration layer, enabling Claude to write, edit, test, and optimize code autonomously across recursive agent cycles.


?
Community

⭐ 0



View Details


FullStack
🤖

Claude Squad

Claude Squad is a terminal app that manages multiple Claude Code, Codex (and other local agents including Aider) in separate workspaces, allowing you to work on multiple tasks simultaneously.


?
Community

⭐ 0



View Details


FullStack
🤖

Claude Swarm

Launch Claude Code session that is connected to a swarm of Claude Code Agents.


?
Community

⭐ 0



View Details


FullStack
🤖

Claude Task Master

A task management system for AI-driven development with Claude, designed to work seamlessly with Cursor AI.


?
Community

⭐ 0



View Details


FullStack
🤖

Claude Task Runner

A specialized tool to manage context isolation and focused task execution with Claude Code, solving the critical challenge of context length limitations and task focus when working with Claude on comp


?
Community

⭐ 0



View Details


FullStack
🤖

Cloudflare Agents SDK

Cloudflare Agents SDK enables building AI-powered agents on Durable Objects with state, WebSockets, SQL, scheduling, and AI integration.


D
davila7

⭐ 0

npx claude-code-templates@latest --agent=cli-tool/components/skills/development/cloudflare-deploy/references/agents-sdk --yes


View Details


FullStack
🤖

Code Reviewer Agent


D
davila7

⭐ 0

npx claude-code-templates@latest --agent=dashboard/public/blog/code-reviewer-agent --yes


View Details


FullStack
🤖

Commit Guardian

Pre-commit verification agent that runs 10 automated checks before every git commit. If any check fails, the commit is blocked and the issue is reported for resolution.


D
davila7

⭐ 0

npx claude-code-templates@latest --agent=cli-tool/components/agents/git --yes


View Details


FullStack
🤖

Computer Use Agents

The fundamental architecture of computer use agents: observe screen,


D
davila7

⭐ 0

npx claude-code-templates@latest --agent=cli-tool/components/skills/ai-research/computer-use-agents --yes


View Details


FullStack
🤖

Create the agent file


D
davila7

⭐ 0

npx claude-code-templates@latest --agent=.claude/agents --yes


View Details


FullStack
🤖

CrewAI – Multi-Agent Orchestration Framework

Build teams of autonomous AI agents that collaborate to solve complex tasks.


D
davila7

⭐ 0

npx claude-code-templates@latest --agent=cli-tool/components/skills/ai-research/agents-crewai --yes


View Details


FullStack
🤖

CrewAI Flows Guide

Flows provide event-driven orchestration with precise control over execution paths, state management, and conditional branching. Use Flows when you need more control than Crews provide.


D
davila7

⭐ 0

npx claude-code-templates@latest --agent=cli-tool/components/skills/ai-research/agents-crewai/references --yes


View Details


FullStack
🤖

Database

– Backup strategies and disaster recovery


D
davila7

⭐ 0

npx claude-code-templates@latest --agent=cli-tool/components/agents/database --yes


View Details


FullStack
🤖

Deep Research Team

– Academic database searching (ArXiv, PubMed, Google Scholar)


D
davila7

⭐ 0

npx claude-code-templates@latest --agent=cli-tool/components/agents/deep-research-team --yes


View Details


FullStack
🤖

Development Team

– RESTful API design with proper versioning and error handling


D
davila7

⭐ 0

npx claude-code-templates@latest --agent=cli-tool/components/agents/development-team --yes


View Details


FullStack
🤖

Development Tools

Initialize testing by understanding the application and compliance requirements.


D
davila7

⭐ 0

npx claude-code-templates@latest --agent=cli-tool/components/agents/development-tools --yes


View Details


FullStack
🤖

Dispatching Parallel Agents

When you have multiple unrelated failures (different test files, different subsystems, different bugs), investigating them sequentially wastes time. Each investigation is independent and can happen in


D
davila7

⭐ 0

npx claude-code-templates@latest --agent=cli-tool/components/skills/ai-research/dispatching-parallel-agents --yes


View Details


FullStack
🤖

Documentation

Initialize API documentation by understanding API structure and needs.


D
davila7

⭐ 0

npx claude-code-templates@latest --agent=cli-tool/components/agents/documentation --yes


View Details


FullStack
🤖

Ffmpeg Clip Team

– Multi-track audio mixing and balancing


D
davila7

⭐ 0

npx claude-code-templates@latest --agent=cli-tool/components/agents/ffmpeg-clip-team --yes


View Details


FullStack
🤖

Frontend Developer Agent


D
davila7

⭐ 0

npx claude-code-templates@latest --agent=dashboard/public/blog/frontend-developer-agent --yes


View Details


FullStack
🤖

Game Development

– 3D modeling for games (low-poly and high-poly workflows)


D
davila7

⭐ 0

npx claude-code-templates@latest --agent=cli-tool/components/agents/game-development --yes


View Details


FullStack
🤖

Hackathon Ai Strategist Agent


D
davila7

⭐ 0

npx claude-code-templates@latest --agent=dashboard/public/blog/hackathon-ai-strategist-agent --yes


View Details


FullStack
🤖

Happy Coder

Spawn and control multiple Claude Codes in parallel from your phone or desktop. Happy Coder runs Claude Code on your hardware, sends push notifications when Claude needs more input or permission, and


?
Community

⭐ 0



View Details


FullStack
🤖

LangChain – Build LLM Applications with Agents & RAG

The most popular framework for building LLM-powered applications.


D
davila7

⭐ 0

npx claude-code-templates@latest --agent=cli-tool/components/skills/ai-research/agents-langchain --yes


View Details


FullStack
🤖

LangChain Agents Guide

Complete guide to building agents with ReAct, tool calling, and streaming.


D
davila7

⭐ 0

npx claude-code-templates@latest --agent=cli-tool/components/skills/ai-research/agents-langchain/references --yes


View Details


FullStack
🤖

Language Specialists Subagents

Language Specialists are your expert guides for specific programming languages and their ecosystems. These subagents bring deep knowledge of language idioms, best practices, performance optimization t


D
davila7

⭐ 0

npx claude-code-templates@latest --agent=cli-tool/components/agents/programming-languages --yes


View Details


FullStack
🤖

LlamaIndex – Data Framework for LLM Applications

The leading framework for connecting LLMs with your data.


D
davila7

⭐ 0

npx claude-code-templates@latest --agent=cli-tool/components/skills/ai-research/agents-llamaindex --yes


View Details


FullStack
🤖

LlamaIndex Agents Guide

Building agents with tools and RAG capabilities.


D
davila7

⭐ 0

npx claude-code-templates@latest --agent=cli-tool/components/skills/ai-research/agents-llamaindex/references --yes


View Details


FullStack
🤖

Mcp Dev Team

You excel at packaging MCP servers using multi-stage Docker builds that minimize attack surface and image size. You will:


D
davila7

⭐ 0

npx claude-code-templates@latest --agent=cli-tool/components/agents/mcp-dev-team --yes


View Details


FullStack
🤖

Modernization

– Monolith decomposition into microservices


D
davila7

⭐ 0

npx claude-code-templates@latest --agent=cli-tool/components/agents/modernization --yes


View Details


FullStack
🤖

Native Parallel Agents

> Orchestration through Claude Code's built-in Agent Tool


D
davila7

⭐ 0

npx claude-code-templates@latest --agent=cli-tool/components/skills/ai-research/parallel-agents --yes


View Details


FullStack
🤖

Obsidian Ops Team

1. **Entity-Based Connections**: Find notes mentioning the same people, projects, or technologies


D
davila7

⭐ 0

npx claude-code-templates@latest --agent=cli-tool/components/agents/obsidian-ops-team --yes


View Details


FullStack
🤖

Ocr Extraction Team

– Document layout analysis and region identification


D
davila7

⭐ 0

npx claude-code-templates@latest --agent=cli-tool/components/agents/ocr-extraction-team --yes


View Details


FullStack
🤖

Performance Testing

– Load testing strategy design and execution


D
davila7

⭐ 0

npx claude-code-templates@latest --agent=cli-tool/components/agents/performance-testing --yes


View Details


FullStack
🤖

Podcast Creator Team


D
davila7

⭐ 0

npx claude-code-templates@latest --agent=cli-tool/components/agents/podcast-creator-team --yes


View Details


FullStack
🤖

Post-hoc Analyzer Agent

Analyze blind comparison results to understand WHY the winner won and generate improvement suggestions.


D
davila7

⭐ 0

npx claude-code-templates@latest --agent=cli-tool/components/skills/development/skill-creator/agents --yes


View Details


FullStack
🤖

Quantum Cognitive Workflow Architecture

1. **🧠 Quantum Thinking Initialization:** Use `sequential_thinking` tool for deep cognitive architecture activation


D
davila7

⭐ 0

npx claude-code-templates@latest --agent=cli-tool/components/agents/api-graphql --yes


View Details


FullStack
🤖

Realtime

– Optimize subscription patterns and payload sizes


D
davila7

⭐ 0

npx claude-code-templates@latest --agent=cli-tool/components/agents/realtime --yes


View Details


FullStack
🤖

Scripts


D
davila7

⭐ 0

npx claude-code-templates@latest --agent=cli-tool/components/agents/obsidian-ops-team/Scripts --yes


View Details


FullStack
🤖

Security

– Analyze privileged groups (Domain Admins, Enterprise Admins, Schema Admins)


D
davila7

⭐ 0

npx claude-code-templates@latest --agent=cli-tool/components/agents/security --yes


View Details


FullStack
🤖

Subagent-Driven Development

Execute plan by dispatching fresh subagent per task, with two-stage review after each: spec compliance review first, then code quality review.


D
davila7

⭐ 0

npx claude-code-templates@latest --agent=cli-tool/components/skills/ai-research/subagent-driven-development --yes


View Details


FullStack
🤖

sudocode

Lightweight agent orchestration dev tool that lives in your repo. Integrates with various specification frameworks. It's giving Jira.


?
Community

⭐ 0



View Details


FullStack
🤖

The Agentic Startup

Schmidt – Yet Another Claude Orchestrator – a collection of agents, commands, etc., for shipping production code – but I like this because it's comprehensive, well-written, and one of the few resource


?
Community

⭐ 0



View Details


FullStack
🤖

TSKAI Agent Task Manager and Sandbox

A Rust CLI tool that lets you delegate development tasks to AI agents running in sandboxed Docker environments. Multiple agents work in parallel, returning git branches for human review.


?
Community

⭐ 0



View Details


FullStack
🤖

Ui Analysis

Analyze screenshots to identify business functions, data entities, and domain logic.


D
davila7

⭐ 0

npx claude-code-templates@latest --agent=cli-tool/components/agents/ui-analysis --yes


View Details


FullStack
🤖

Vital Health Global – Content Growth Agent

– **name:** vital-health-content-agent


D
davila7

⭐ 0

npx claude-code-templates@latest --agent=cli-tool/components/agents/business-marketing/cli-tool/components/agents/business-marketing/cli-tool/components/agents/business-marketing --yes


View Details


FullStack
🤖

Voice Agents

You are a voice AI architect who has shipped production voice agents handling


D
davila7

⭐ 0

npx claude-code-templates@latest --agent=cli-tool/components/skills/ai-research/voice-agents --yes


View Details


FullStack
🤖

Workflow

1. Fetch any URL's provided by the user using the `fetch_webpage` tool.


D
davila7

⭐ 0

npx claude-code-templates@latest --agent=cli-tool/components/agents/expert-advisors --yes


View Details


FullStack
🤖

🕹️ Autonomous Agent Patterns

> Design patterns for building autonomous coding agents, inspired by [Cline](https://github.com/cline/cline) and [OpenAI Codex](https://github.com/openai/codex).


D
davila7

⭐ 0

npx claude-code-templates@latest --agent=cli-tool/components/skills/ai-research/autonomous-agent-patterns --yes


View Details

🔎

No results found

Try a different search term or category filter.

Submit Your AI Tool

Have a Claude Code agents to share? Get it listed in our directory and reach thousands of AI developers.



Submit a Tool →

Frequently Asked Questions about Claude Code Agents

Claude Code Agents are autonomous AI workflows that handle complex, multi-step development tasks. Unlike simple commands, agents can plan, execute, test, and iterate on solutions with minimal human oversight.

Skills provide expertise for a single interaction, while agents orchestrate entire workflows. An agent might analyze your codebase, plan a refactoring strategy, implement changes across multiple files, write tests, and verify everything works — all autonomously.

Agents are designed to work safely with your codebase. They respect git branching, create isolated changes, and include safety checks. However, we always recommend reviewing agent-generated changes before merging into production branches.

Most agents are language-agnostic and work with any language Claude Code supports. Some specialized agents are optimized for specific languages or frameworks. Check the agent’s description for language compatibility details.

After installation, agents typically read your project’s configuration files (package.json, pyproject.toml, etc.) to understand your tech stack. Some agents offer additional configuration options via their settings file.

Yes, you can create custom agents by combining skills, MCP servers, and workflow logic. The Claude Code agent SDK provides tools for building, testing, and distributing your own agents to the community.

{
“@context”: “https://schema.org”,
“@type”: “FAQPage”,
“mainEntity”: [
{
“@type”: “Question”,
“name”: “What are Claude Code Agents?”,
“acceptedAnswer”: {
“@type”: “Answer”,
“text”: “Claude Code Agents are autonomous AI workflows that handle complex, multi-step development tasks. Unlike simple commands, agents can plan, execute, test, and iterate on solutions with minimal human oversight.”
}
},
{
“@type”: “Question”,
“name”: “How do agents differ from skills?”,
“acceptedAnswer”: {
“@type”: “Answer”,
“text”: “Skills provide expertise for a single interaction, while agents orchestrate entire workflows. An agent might analyze your codebase, plan a refactoring strategy, implement changes across multiple files, write tests, and verify everything works — all autonomously.”
}
},
{
“@type”: “Question”,
“name”: “Are agents safe to use on production code?”,
“acceptedAnswer”: {
“@type”: “Answer”,
“text”: “Agents are designed to work safely with your codebase. They respect git branching, create isolated changes, and include safety checks. However, we always recommend reviewing agent-generated changes before merging into production branches.”
}
},
{
“@type”: “Question”,
“name”: “Can agents work with any programming language?”,
“acceptedAnswer”: {
“@type”: “Answer”,
“text”: “Most agents are language-agnostic and work with any language Claude Code supports. Some specialized agents are optimized for specific languages or frameworks. Check the agent’s description for language compatibility details.”
}
},
{
“@type”: “Question”,
“name”: “How do I configure an agent for my project?”,
“acceptedAnswer”: {
“@type”: “Answer”,
“text”: “After installation, agents typically read your project’s configuration files (package.json, pyproject.toml, etc.) to understand your tech stack. Some agents offer additional configuration options via their settings file.”
}
},
{
“@type”: “Question”,
“name”: “Can I create a custom agent?”,
“acceptedAnswer”: {
“@type”: “Answer”,
“text”: “Yes, you can create custom agents by combining skills, MCP servers, and workflow logic. The Claude Code agent SDK provides tools for building, testing, and distributing your own agents to the community.”
}
}
]
}

(function() {
var activeCat = ‘all’;

window.ecoFilter = function() {
var query = document.getElementById(‘eco-search’).value.toLowerCase().trim();
var cards = document.querySelectorAll(‘#eco-grid > div[data-name]’);
var visible = 0;
cards.forEach(function(card) {
var name = (card.getAttribute(‘data-name’) || ”).toLowerCase();
var desc = (card.getAttribute(‘data-desc’) || ”).toLowerCase();
var cat = (card.getAttribute(‘data-cat’) || ”).toLowerCase();
var matchSearch = !query || name.indexOf(query) !== -1 || desc.indexOf(query) !== -1;
var matchCat = activeCat === ‘all’ || cat === activeCat.toLowerCase();
if (matchSearch && matchCat) {
card.style.display = ”;
visible++;
} else {
card.style.display = ‘none’;
}
});
document.getElementById(‘eco-count-num’).textContent = visible;
document.getElementById(‘eco-no-results’).style.display = visible === 0 ? ‘block’ : ‘none’;
};

window.ecoFilterCat = function(cat) {
activeCat = cat;
var pills = document.querySelectorAll(‘.eco-pill’);
pills.forEach(function(p) {
if (p.getAttribute(‘data-cat’) === cat) {
p.style.background = ‘#FF6804’;
p.style.borderColor = ‘#FF6804’;
p.style.color = ‘#ffffff’;
} else {
p.style.background = ‘transparent’;
p.style.borderColor = ‘#2a2a4a’;
p.style.color = ‘#a0a0b0’;
}
});
ecoFilter();
};

window.ecoSort = function() {
var sel = document.getElementById(‘eco-sort’).value;
var grid = document.getElementById(‘eco-grid’);
var cards = Array.prototype.slice.call(grid.querySelectorAll(‘:scope > div[data-name]’));
var labels = { popular: ‘Popular’, newest: ‘Newest’, az: ‘A u2013 Z’ };
document.getElementById(‘eco-sort-label’).textContent = labels[sel] || sel;
cards.sort(function(a, b) {
if (sel === ‘az’) {
return (a.getAttribute(‘data-name’) || ”).localeCompare(b.getAttribute(‘data-name’) || ”);
} else if (sel === ‘newest’) {
return parseInt(b.getAttribute(‘data-date’) || ‘0’) – parseInt(a.getAttribute(‘data-date’) || ‘0’);
} else {
return parseInt(b.getAttribute(‘data-stars’) || ‘0’) – parseInt(a.getAttribute(‘data-stars’) || ‘0’);
}
});
cards.forEach(function(c) { grid.appendChild(c); });
};

window.ecoCopy = function(text, btn) {
if (navigator.clipboard && navigator.clipboard.writeText) {
navigator.clipboard.writeText(text).then(function() {
var orig = btn.textContent;
btn.textContent = ‘Copied!’;
btn.style.background = ‘#00d4aa’;
setTimeout(function() { btn.textContent = orig; btn.style.background = ‘#FF6804’; }, 1500);
});
} else {
var ta = document.createElement(‘textarea’);
ta.value = text;
ta.style.position = ‘fixed’;
ta.style.opacity = ‘0’;
document.body.appendChild(ta);
ta.select();
document.execCommand(‘copy’);
document.body.removeChild(ta);
var orig = btn.textContent;
btn.textContent = ‘Copied!’;
btn.style.background = ‘#00d4aa’;
setTimeout(function() { btn.textContent = orig; btn.style.background = ‘#FF6804’; }, 1500);
}
};
})();

Leave a Reply

Your email address will not be published. Required fields are marked *

Back To Top Img