playbooks

home / skills / ancoleman / ai-design-components

ancoleman/ai-design-components

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

76 skills
GitHub

Sponsored

configuring-firewalls

ancoleman/ai-design-components

278
This skill helps you configure host-based and cloud firewall rules with practical patterns for web, database, and bastion scenarios.
configuring-nginx

ancoleman/ai-design-components

278
This skill helps you configure nginx for static sites, reverse proxies, load balancing, and TLS with security best practices.
creating-dashboards

ancoleman/ai-design-components

278
This skill helps you build cohesive dashboards by composing KPI cards, charts, filters, and real-time widgets into responsive analytics interfaces.
debugging-techniques

ancoleman/ai-design-components

278
This skill guides production-safe debugging across languages and containers, enabling breakpoints, remote access, and correlation tracing to diagnose issues
implementing-api-patterns

ancoleman/ai-design-components

278
This skill helps design and implement REST, GraphQL, gRPC, and tRPC APIs with framework guidance, patterns, and OpenAPI documentation.
Advertise on playbooks
Reach thousands of developers actively evaluating dev tools, MCP servers, and agent skills. Floating banners, pinned cards, and in-feed placements.
learn more
implementing-compliance

ancoleman/ai-design-components

278
This skill helps implementing-compliance by unifying control mapping, policy-as-code, and automated evidence collection across SOC 2, HIPAA, PCI-DSS, and GDPR.
implementing-mlops

ancoleman/ai-design-components

278
This skill guides you to operationalize ML models from experimentation to production, covering tracking, registry, features, serving, pipelines, and monitoring.
ingesting-data

ancoleman/ai-design-components

278
This skill guides data ingestion across cloud storage, files, APIs, and streaming sources, enabling reliable ETL pipelines and scalable data loading.
managing-dns

ancoleman/ai-design-components

278
This skill helps you configure and automate DNS records, TTL strategies, and DNS-as-code across providers to ensure reliable domain resolution.
resource-tagging

ancoleman/ai-design-components

278
This skill applies and enforces cloud resource tagging strategies across multi-clouds to improve cost allocation, governance, and automation.
securing-authentication

ancoleman/ai-design-components

278
This skill helps you implement modern authentication, authorization, and API security across languages, ensuring secure OAuth 2.1 flows, JWT handling, and
security-hardening

ancoleman/ai-design-components

278
This skill helps you harden production infrastructure across OS, containers, cloud, network, and databases using CIS benchmarks.
theming-components

ancoleman/ai-design-components

278
This skill provides a complete design token and theming system for consistent branding, theme switching, RTL support, and accessible UI.
model-serving

ancoleman/ai-design-components

278
This skill helps deploy and optimize LLM and ML model serving for production using vLLM, BentoML, Triton, LangChain, and RAG workflows.
designing-layouts

ancoleman/ai-design-components

278
This skill guides designing responsive layouts with grids, flexbox, and container queries to build adaptable, accessible interfaces.
generating-documentation

ancoleman/ai-design-components

278
This skill generates comprehensive API, code, site, ADR, and diagram documentation to accelerate developer understanding and project maintainability.
architecting-security

ancoleman/ai-design-components

278
This skill helps design comprehensive security architectures with defense-in-depth, zero trust, threat modeling, and control mappings to risk frameworks.
implementing-service-mesh

ancoleman/ai-design-components

278
This skill helps you implement production-grade service mesh deployments with Istio, Linkerd, or Cilium for secure, observable microservices.
deploying-on-gcp

ancoleman/ai-design-components

278
This skill helps you design and deploy scalable GCP architectures using Cloud Run, GKE, BigQuery, Vertex AI, and Terraform.
optimizing-costs

ancoleman/ai-design-components

278
This skill helps you reduce cloud spend using FinOps, right-sizing, and automated cost governance across multi-cloud environments.
secret-management

ancoleman/ai-design-components

278
This skill helps you securely store, rotate, and deliver secrets across Vault, cloud providers, and Kubernetes to protect applications.
using-message-queues

ancoleman/ai-design-components

278
This skill helps you design and implement asynchronous messaging using brokers like Kafka, RabbitMQ, and Redis to improve reliability and scalability.
using-document-databases

ancoleman/ai-design-components

278
This skill helps you design and implement flexible document databases across MongoDB, DynamoDB, and Firestore to accelerate schemas, indexing, and queries.
using-relational-databases

ancoleman/ai-design-components

278
This skill helps you design and implement relational databases across languages, optimizing ORM, query builders, and migrations for reliable CRUD applications.
architecting-data

ancoleman/ai-design-components

278
This skill guides you in designing modern data platforms, selecting storage, modeling, and governance patterns to optimize architecture.
writing-github-actions

ancoleman/ai-design-components

278
This skill helps you write GitHub Actions workflows with proper syntax, reusable patterns, caching, and security best practices for CI/CD.
architecting-networks

ancoleman/ai-design-components

278
This skill helps you design secure, scalable cloud network architectures across AWS, GCP, and Azure, guiding VPC patterns and zero trust.
shell-scripting

ancoleman/ai-design-components

278
This skill helps you write robust portable shell scripts with error handling, argument parsing, and testing, improving automation reliability.
designing-distributed-systems

ancoleman/ai-design-components

278
This skill helps you design scalable distributed systems by applying CAP, replication, partitioning, and resilience patterns for reliable, global services.
streaming-data

ancoleman/ai-design-components

278
This skill helps you design and implement real-time streaming pipelines with Kafka, Pulsar, Flink, and Spark across languages.
managing-git-workflows

ancoleman/ai-design-components

278
This skill helps teams design and enforce Git workflows, conventional commits, and monorepo patterns to boost collaboration and automated releases.
managing-incidents

ancoleman/ai-design-components

278
This skill guides end-to-end incident management using SRE principles, enabling faster responses, blameless post-mortems, and effective on-call practices.
operating-kubernetes

ancoleman/ai-design-components

278
This skill helps you deploy and operate Kubernetes clusters efficiently by guiding resource management, scheduling, networking, storage, security, and
administering-linux

ancoleman/ai-design-components

278
This skill empowers you to manage Linux servers, optimize performance, and troubleshoot production issues with systemd, networking, and security best practices.
ai-data-engineering

ancoleman/ai-design-components

278
This skill helps you design and implement end-to-end AI data pipelines for RAG, feature stores, and embeddings across production systems.
deploying-on-azure

ancoleman/ai-design-components

278
This skill helps you design secure, cost-efficient Azure architectures by selecting services, configuring governance, and optimizing performance across
building-ci-pipelines

ancoleman/ai-design-components

278
This skill helps you design and deploy secure, efficient CI/CD pipelines across GitHub Actions, GitLab CI, and Argo Workflows.
building-clis

ancoleman/ai-design-components

278
This skill helps you build professional command-line interfaces in Python, Go, and Rust with modern frameworks and robust argument parsing.
building-forms

ancoleman/ai-design-components

278
This skill guides building accessible, multi-step forms with validation, data typing, and UX best practices for reliable user input collection.
building-tables

ancoleman/ai-design-components

278
This skill helps you design and optimize tables and data grids across simple HTML to enterprise scales, with accessibility, performance, and responsive
deploying-applications

ancoleman/ai-design-components

278
This skill guides choosing deployment strategies across Kubernetes, serverless, and edge, and setting up IaC and GitOps for automated production.
deploying-on-aws

ancoleman/ai-design-components

278
This skill helps you design and implement AWS architectures selecting compute, storage, and well-architected patterns to optimize cost and reliability.
designing-apis

ancoleman/ai-design-components

278
This skill helps you design secure, scalable APIs across REST, GraphQL, and event-driven patterns with clear standards.
prompt-engineering

ancoleman/ai-design-components

278
This skill helps you engineer reliable LLM prompts across zero-shot, few-shot, and structured outputs for multi-model deployments.
designing-sdks

ancoleman/ai-design-components

278
This skill helps you design production-ready SDKs with robust error handling, retries, and pagination to accelerate API client development.
displaying-timelines

ancoleman/ai-design-components

278
This skill helps you design and implement timelines and activity components with accessible, real-time, responsive patterns for calendars, feeds, and Gantt
embedding-optimization

ancoleman/ai-design-components

278
This skill helps optimize embedding generation for cost, performance, and quality in RAG and semantic search systems.
testing-strategies

ancoleman/ai-design-components

278
This skill helps you design and implement balanced testing strategies across unit, integration, E2E, and contract testing for multi-language projects.
evaluating-llms

ancoleman/ai-design-components

278
This skill helps you evaluate LLM systems with automated metrics, LLM-as-judge, and benchmarks to ensure quality and safety in production.
assembling-components

ancoleman/ai-design-components

278
This skill assembles AI Design Components outputs into production-ready component systems with verified tokens and proper scaffolding for React, Next.js,
guiding-users

ancoleman/ai-design-components

278
This skill helps you design onboarding and contextual help systems that boost activation and feature adoption through guided tours and progressive disclosure.
implementing-drag-drop

ancoleman/ai-design-components

278
This skill helps you implement drag-and-drop and sortable interfaces in React/TypeScript, delivering accessible, touch-friendly interactions for kanban boards,
implementing-gitops

ancoleman/ai-design-components

278
This skill enables automated GitOps deployments to Kubernetes using declarative, pull-based pipelines with Git as the single source of truth.
implementing-navigation

ancoleman/ai-design-components

278
This skill guides implementing navigation and routing across frontend and backend, enabling accessible menus, routing patterns, and server-side configuration.
implementing-observability

ancoleman/ai-design-components

278
This skill implements production observability with OpenTelemetry across metrics, logs, and traces to boost visibility and reliability.
implementing-realtime-sync

ancoleman/ai-design-components

278
This skill helps you implement real-time sync patterns across SSE, WebSocket, CRDTs, and presence to build collaborative apps efficiently.
implementing-search-filter

ancoleman/ai-design-components

278
This skill helps you implement end-to-end search and filtering across frontend and backend, including debouncing, faceted UI, and optimized queries.
implementing-tls

ancoleman/ai-design-components

278
This skill helps you implement TLS and mTLS for secure communications, automate certificates, and debug issues across environments.
visualizing-data

ancoleman/ai-design-components

278
This skill helps you select, implement, and optimize data visualizations with accessible, high-performance charts across datasets and dashboards.
load-balancing-patterns

ancoleman/ai-design-components

278
This skill helps you select and configure the right load balancing strategy across L4/L7, cloud-managed, self-managed, and Kubernetes, with health checks and
managing-configuration

ancoleman/ai-design-components

278
This skill helps you automate server configurations with Ansible, enforce idempotency, manage secrets, test roles, and implement GitOps workflows.
managing-media

ancoleman/ai-design-components

278
This skill helps you implement comprehensive media and file management components, enabling efficient uploads, rich galleries, adaptive players, and optimized
managing-vulnerabilities

ancoleman/ai-design-components

278
This skill helps you integrate multi-layer vulnerability scanning, SBOM generation, and risk-based prioritization into CI/CD for DevSecOps security gates.
optimizing-sql

ancoleman/ai-design-components

278
This skill helps you optimize SQL query performance across PostgreSQL, MySQL, and SQL Server using explain analysis, indexing strategies, and query rewriting.
performance-engineering

ancoleman/ai-design-components

278
This skill helps you validate capacity, identify bottlenecks, and optimize response times through load testing, profiling, and targeted performance
platform-engineering

ancoleman/ai-design-components

278
This skill helps you design and implement internal developer platforms that boost DevEx through self-service templates, golden paths, and platform engineering
providing-feedback

ancoleman/ai-design-components

278
This skill standardizes user feedback and notifications across toasts, modals, and progress indicators to clearly communicate system state and actions.
siem-logging

ancoleman/ai-design-components

278
This skill helps you design and implement centralized SIEM logging, detection rules, and compliance strategies across cloud and on-prem environments.
transforming-data

ancoleman/ai-design-components

278
This skill helps you transform raw data into clean, production-ready analytical assets using dbt, pandas, polars, PySpark, and Airflow.
using-vector-databases

ancoleman/ai-design-components

278
This skill helps you design and implement vector DB powered RAG and semantic search workflows across Python and TypeScript.
planning-disaster-recovery

ancoleman/ai-design-components

278
This skill helps design and validate disaster recovery plans with RTO/RPO targets, cross-region replication, and chaotic testing to ensure resilience.
writing-dockerfiles

ancoleman/ai-design-components

278
This skill helps you write optimized, secure multi-stage Dockerfiles across languages, improving image size, security, and deployment speed.
using-graph-databases

ancoleman/ai-design-components

278
This skill helps you design and implement graph databases for relationship-rich applications, boosting traversal efficiency, pattern matching, and multi-model
using-timeseries-databases

ancoleman/ai-design-components

278
This skill helps you design and implement time-series data stores and dashboards by selecting appropriate TSDBs, downsampling, and retention strategies.
writing-infrastructure-code

ancoleman/ai-design-components

278
This skill helps you design and manage cloud infrastructure with IaC tools, enabling reusable modules, safe state handling, and scalable deployment workflows.
building-ai-chat

ancoleman/ai-design-components

278
This skill helps you build AI chat interfaces with streaming, context management, and multi-modal support for chatbots and assistants.