<Devsly/>
NotebookLM Watermark Remover
Remove the NotebookLM watermark from PDF slide exports — free, unlimited, and 100% in your browser.
View
NotebookLM Video Watermark Remover
Remove the NotebookLM watermark from every frame of your MP4 and auto-trim the end card — free and unlimited.
View
Gemini Watermark Remover
Remove the Gemini (Veo) sparkle watermark from every frame of your AI-generated MP4 — free and unlimited.
View
MCP https://devsly.io/mcp MCP Tools Best Skills API Docs

Keyboard Shortcuts

Navigation

Quick Search
⌘ / Ctrl + K
Toggle Dark Mode
⌘ / Ctrl + D
Close Dialogs
Esc

Tool Actions

Execute / Process
⌘ / Ctrl + Enter
Clear Input
⌘ / Ctrl + Shift + C
Copy Output
⌘ / Ctrl + Shift + X

Editor

Select All
⌘ / Ctrl + A
Undo
⌘ / Ctrl + Z
Redo
⌘ / Ctrl + Shift + Z

Updated 10mo ago

by ancoleman

ai-design-components

Comprehensive UI/UX and Backend component design skills for AI-assisted development with Claude

Works with
  • Claude

525 GitHub stars (525)

+4 in 20 days

Stars gained per day · daily snapshots since Sep 26
Stars gained per day, Sep 26 to Oct 16: +4 in total; the busiest day was Oct 3 with +2 stars.Sep 27: 0 starsSep 28: 0 starsSep 29: +1 starsSep 30: +1 starsOct 1: 0 starsOct 2: 0 starsOct 3: +2 starsOct 4: 0 starsOct 5: 0 starsOct 6: 0 starsOct 7: +1 starsOct 8: 0 starsOct 9: 0 starsOct 10: −2 starsOct 11: +1 starsOct 12: 0 starsOct 13: 0 starsOct 14: 0 starsOct 15: 0 starsOct 16: 0 stars
Stars gained between daily snapshots
PeriodNew stars
Sep 270
Sep 280
Sep 29+1
Sep 30+1
Oct 10
Oct 20
Oct 3+2
Oct 40
Oct 50
Oct 60
Oct 7+1
Oct 80
Oct 90
Oct 10−2
Oct 11+1
Oct 120
Oct 130
Oct 140
Oct 150
Oct 160
  • 30 skills (30 skills found in its SKILL.md files)
  • 76 forks (76 forks)
  • 10mo ago last update (Last updated 10mo ago)

Install

Skills CLI

npx skills add ancoleman/ai-design-components

Asks which skills and agents to install. Just one: npx skills add ancoleman/ai-design-components --skill administering-linux — add -g for every project.

Claude Code

git clone https://github.com/ancoleman/ai-design-componentscp -r "ai-design-components/skills/administering-linux" ~/.claude/skills/

Copies the administering-linux skill into ~/.claude/skills/ for every project (use .claude/skills/ for one project). Repeat for the other skills listed below.

Plugin

/plugin marketplace add ancoleman/ai-design-components

Run inside Claude Code if the repository ships a plugin marketplace, then pick plugins from /plugin.

Skills can run code on your machine — read the SKILL.md first.

What it does

In the author's own words, from each skill's SKILL.md — showing the first 30 of 76 files.

  • administering-linux

    Manage Linux systems covering systemd services, process management, filesystems, networking, performance tuning, and troubleshooting. Use when deploying applications, optimizing server performance, diagnosing production issues, or managing users and security on Linux servers.

    skills/administering-linux/SKILL.md on GitHub (opens in a new tab)
  • ai-data-engineering

    Data pipelines, feature stores, and embedding generation for AI/ML systems. Use when building RAG pipelines, ML feature serving, or data transformations. Covers feature stores (Feast, Tecton), embedding pipelines, chunking strategies, orchestration (Dagster, Prefect, Airflow), dbt transformations, data versioning (LakeFS), and experiment tracking (MLflow, W&B).

    skills/ai-data-engineering/SKILL.md on GitHub (opens in a new tab)
  • architecting-data

    Strategic guidance for designing modern data platforms, covering storage paradigms (data lake, warehouse, lakehouse), modeling approaches (dimensional, normalized, data vault, wide tables), data mesh principles, and medallion architecture patterns. Use when architecting data platforms, choosing between centralized vs decentralized patterns, selecting table formats (Iceberg, Delta Lake), or design…

    skills/architecting-data/SKILL.md on GitHub (opens in a new tab)
  • architecting-networks

    Design cloud network architectures with VPC patterns, subnet strategies, zero trust principles, and hybrid connectivity. Use when planning VPC topology, implementing multi-cloud networking, or establishing secure network segmentation for cloud workloads.

    skills/architecting-networks/SKILL.md on GitHub (opens in a new tab)
  • architecting-security

    Design comprehensive security architectures using defense-in-depth, zero trust principles, threat modeling (STRIDE, PASTA), and control frameworks (NIST CSF, CIS Controls, ISO 27001). Use when designing security for new systems, auditing existing architectures, or establishing security governance programs.

    skills/architecting-security/SKILL.md on GitHub (opens in a new tab)
  • assembling-components

    Assembles component outputs from AI Design Components skills into unified, production-ready component systems with validated token integration, proper import chains, and framework-specific scaffolding. Use as the capstone skill after running theming, layout, dashboard, data-viz, or feedback skills to wire components into working React/Next.js, Python, or Rust projects.

    skills/assembling-components/SKILL.md on GitHub (opens in a new tab)
  • building-ai-chat

    Builds AI chat interfaces and conversational UI with streaming responses, context management, and multi-modal support. Use when creating ChatGPT-style interfaces, AI assistants, code copilots, or conversational agents. Handles streaming text, token limits, regeneration, feedback loops, tool usage visualization, and AI-specific error patterns. Provides battle-tested components from leading AI prod…

    skills/building-ai-chat/SKILL.md on GitHub (opens in a new tab)
  • building-ci-pipelines

    Constructs secure, efficient CI/CD pipelines with supply chain security (SLSA), monorepo optimization, caching strategies, and parallelization patterns for GitHub Actions, GitLab CI, and Argo Workflows. Use when setting up automated testing, building, or deployment workflows.

    skills/building-ci-pipelines/SKILL.md on GitHub (opens in a new tab)
  • building-clis

    Build professional command-line interfaces in Python, Go, and Rust using modern frameworks like Typer, Cobra, and clap. Use when creating developer tools, automation scripts, or infrastructure management CLIs with robust argument parsing, interactive features, and multi-platform distribution.

    skills/building-clis/SKILL.md on GitHub (opens in a new tab)
  • building-forms

    Builds form components and data collection interfaces including contact forms, registration flows, checkout processes, surveys, and settings pages. Includes 50+ input types, validation strategies, accessibility patterns (WCAG 2.1), multi-step wizards, and UX best practices. Provides decision trees from data type to component selection, validation timing guidance, and error handling patterns. Use…

    skills/building-forms/SKILL.md on GitHub (opens in a new tab)
  • building-tables

    Builds tables and data grids for displaying tabular information, from simple HTML tables to complex enterprise data grids. Use when creating tables, implementing sorting/filtering/pagination, handling large datasets (10-1M+ rows), building spreadsheet-like interfaces, or designing data-heavy components. Provides performance optimization strategies, accessibility patterns (WCAG/ARIA), responsive d…

    skills/building-tables/SKILL.md on GitHub (opens in a new tab)
  • configuring-firewalls

    Configure host-based firewalls (iptables, nftables, UFW) and cloud security groups (AWS, GCP, Azure) with practical rules for common scenarios like web servers, databases, and bastion hosts. Use when exposing services, hardening servers, or implementing network segmentation with defense-in-depth strategies.

    skills/configuring-firewalls/SKILL.md on GitHub (opens in a new tab)
  • configuring-nginx

    Configure nginx for static sites, reverse proxying, load balancing, SSL/TLS termination, caching, and performance tuning. When setting up web servers, application proxies, or load balancers, this skill provides production-ready patterns with modern security best practices for TLS 1.3, rate limiting, and security headers.

    skills/configuring-nginx/SKILL.md on GitHub (opens in a new tab)
  • creating-dashboards

    Creates comprehensive dashboard and analytics interfaces that combine data visualization, KPI cards, real-time updates, and interactive layouts. Use this skill when building business intelligence dashboards, monitoring systems, executive reports, or any interface that requires multiple coordinated data displays with filters, metrics, and visualizations working together.

    skills/creating-dashboards/SKILL.md on GitHub (opens in a new tab)
  • debugging-techniques

    Debugging workflows for Python (pdb, debugpy), Go (delve), Rust (lldb), and Node.js, including container debugging (kubectl debug, ephemeral containers) and production-safe debugging techniques with distributed tracing and correlation IDs. Use when setting breakpoints, debugging containers/pods, remote debugging, or production debugging.

    skills/debugging-techniques/SKILL.md on GitHub (opens in a new tab)
  • deploying-applications

    Deployment patterns from Kubernetes to serverless and edge functions. Use when deploying applications, setting up CI/CD, or managing infrastructure. Covers Kubernetes (Helm, ArgoCD), serverless (Vercel, Lambda), edge (Cloudflare Workers, Deno), IaC (Pulumi, OpenTofu, SST), and GitOps patterns.

    skills/deploying-applications/SKILL.md on GitHub (opens in a new tab)
  • deploying-on-aws

    Selecting and implementing AWS services and architectural patterns. Use when designing AWS cloud architectures, choosing compute/storage/database services, implementing serverless or container patterns, or applying AWS Well-Architected Framework principles.

    skills/deploying-on-aws/SKILL.md on GitHub (opens in a new tab)
  • deploying-on-azure

    Design and implement Azure cloud architectures using best practices for compute, storage, databases, AI services, networking, and governance. Use when building applications on Microsoft Azure or migrating workloads to Azure cloud platform.

    skills/deploying-on-azure/SKILL.md on GitHub (opens in a new tab)
  • deploying-on-gcp

    Implement applications using Google Cloud Platform (GCP) services. Use when building on GCP infrastructure, selecting compute/storage/database services, designing data analytics pipelines, implementing ML workflows, or architecting cloud-native applications with BigQuery, Cloud Run, GKE, Vertex AI, and other GCP services.

    skills/deploying-on-gcp/SKILL.md on GitHub (opens in a new tab)
  • designing-apis

    Design APIs that are secure, scalable, and maintainable using RESTful, GraphQL, and event-driven patterns. Use when designing new APIs, evolving existing APIs, or establishing API standards for teams.

    skills/designing-apis/SKILL.md on GitHub (opens in a new tab)
  • designing-distributed-systems

    When designing distributed systems for scalability, reliability, and consistency. Covers CAP/PACELC theorems, consistency models (strong, eventual, causal), replication patterns (leader-follower, multi-leader, leaderless), partitioning strategies (hash, range, geographic), transaction patterns (saga, event sourcing, CQRS), resilience patterns (circuit breaker, bulkhead), service discovery, and ca…

    skills/designing-distributed-systems/SKILL.md on GitHub (opens in a new tab)
  • designing-layouts

    Designs layout systems and responsive interfaces including grid systems, flexbox patterns, sidebar layouts, and responsive breakpoints. Use when structuring app layouts, building responsive designs, or creating complex page structures.

    skills/designing-layouts/SKILL.md on GitHub (opens in a new tab)
  • designing-sdks

    Design production-ready SDKs with retry logic, error handling, pagination, and multi-language support. Use when building client libraries for APIs or creating developer-facing SDK interfaces.

    skills/designing-sdks/SKILL.md on GitHub (opens in a new tab)
  • displaying-timelines

    Displays chronological events and activity through timelines, activity feeds, Gantt charts, and calendar interfaces. Use when showing historical events, project schedules, social feeds, notifications, audit logs, or time-based data. Provides implementation patterns for vertical/horizontal timelines, interactive visualizations, real-time updates, and responsive designs with accessibility (WCAG/ARI…

    skills/displaying-timelines/SKILL.md on GitHub (opens in a new tab)
  • embedding-optimization

    Optimizing vector embeddings for RAG systems through model selection, chunking strategies, caching, and performance tuning. Use when building semantic search, RAG pipelines, or document retrieval systems that require cost-effective, high-quality embeddings.

    skills/embedding-optimization/SKILL.md on GitHub (opens in a new tab)
  • evaluating-llms

    Evaluate LLM systems using automated metrics, LLM-as-judge, and benchmarks. Use when testing prompt quality, validating RAG pipelines, measuring safety (hallucinations, bias), or comparing models for production deployment.

    skills/evaluating-llms/SKILL.md on GitHub (opens in a new tab)
  • generating-documentation

    Generate comprehensive technical documentation including API docs (OpenAPI/Swagger), code documentation (TypeDoc/Sphinx), documentation sites (Docusaurus/MkDocs), Architecture Decision Records (ADRs), and diagrams (Mermaid/PlantUML). Use when documenting APIs, libraries, systems architecture, or building developer-facing documentation sites.

    skills/generating-documentation/SKILL.md on GitHub (opens in a new tab)
  • guiding-users

    Implements onboarding and help systems including product tours, interactive tutorials, tooltips, checklists, help panels, and progressive disclosure patterns. Use when building first-time experiences, feature discovery, guided walkthroughs, contextual help, setup flows, or user activation features. Provides timing strategies, accessibility patterns (keyboard, screen readers, reduced motion), and…

    skills/guiding-users/SKILL.md on GitHub (opens in a new tab)
  • implementing-api-patterns

    API design and implementation across REST, GraphQL, gRPC, and tRPC patterns. Use when building backend services, public APIs, or service-to-service communication. Covers REST frameworks (FastAPI, Axum, Gin, Hono), GraphQL libraries (Strawberry, async-graphql, gqlgen, Pothos), gRPC (Tonic, Connect-Go), tRPC for TypeScript, pagination strategies (cursor-based, offset-based), rate limiting, caching,…

    skills/implementing-api-patterns/SKILL.md on GitHub (opens in a new tab)
  • implementing-compliance

    Implement and maintain compliance with SOC 2, HIPAA, PCI-DSS, and GDPR using unified control mapping, policy-as-code enforcement, and automated evidence collection. Use when building systems requiring regulatory compliance, implementing security controls across multiple frameworks, or automating audit preparation.

    skills/implementing-compliance/SKILL.md on GitHub (opens in a new tab)

Review before you install

A skill is a set of instructions and scripts your agent will follow, and it can run code on your machine. Read the SKILL.md and any scripts first — this listing is not a security review.