bilalmk
- 16 skills
- 0 followers
- 1 week ago last updated
- ▌ Browsing With Playwright · bilalmk bundleBrowser automation using Playwright MCP. Navigate websites, fill forms, click elements, take screenshots, and extract data. Use when tasks require web browsing, form submission, web scraping, UI testing, or any browser interaction. NOT when only fetching static content (use curl/wget instead).
- ▌ Building Chat Interfaces · bilalmk bundleBuild AI chat interfaces with custom backends, authentication, and context injection. Use when integrating chat UI with AI agents, adding auth to chat, injecting user/page context, or implementing httpOnly cookie proxies. Covers ChatKitServer, useChatKit, and MCP auth patterns. NOT when building simple chatbots without persistence or custom agent integration.
- ▌ Frontend Design System · bilalmk bundleComprehensive UI/UX design skill for building modern, responsive web applications with Tailwind CSS, shadcn/ui, Material UI, Chakra UI, Ant Design, and Mantine. Use when users need to - (1) Choose a design system for their project, (2) Build responsive layouts and components, (3) Implement forms with validation, (4) Create accessible user interfaces, (5) Design task management UIs (todo apps, dashboards), (6) Apply responsive design patterns, (7) Implement dark mode, or (8) Build component libraries. Triggers include requests like 'design a todo app', 'create responsive layout', 'which UI library should I use', 'implement dark mode', 'build a form with validation', or 'make this mobile-friendly'.
- ▌ Betterauth Fastapi JWT Bridge · bilalmk bundleImplement secure authentication bridge between Better Auth (Next.js frontend) and FastAPI (Python backend) using JWKS JWT token verification. Use this skill when users need to (1) Integrate Better Auth with FastAPI backend, (2) Implement JWT authentication with JWKS verification, (3) Set up user isolation and authorization in FastAPI endpoints, (4) Configure frontend to send authenticated API requests, or (5) Troubleshoot Better Auth + FastAPI authentication issues.
- ▌ Browser Use · bilalmk bundleBrowser automation using Playwright MCP. Navigate websites, fill forms, click elements, take screenshots, and extract data. Use when tasks require web browsing, form submission, web scraping, UI testing, or any browser interaction.
- ▌ Building MCP Servers · bilalmk bundleGuides creation of high-quality MCP (Model Context Protocol) servers that enable LLMs to interact with external services through well-designed tools. Use when building MCP servers to integrate external APIs or services, whether in Python (FastMCP) or Node/TypeScript (MCP SDK). Covers tool design, authentication, Docker deployment, and evaluation creation. NOT when consuming existing MCP servers (use the server directly).
- ▌ Building Nextjs Apps · bilalmk bundleBuild Next.js 16 applications with correct patterns and distinctive design. Use when creating pages, layouts, dynamic routes, upgrading from Next.js 15, or implementing proxy.ts. Covers breaking changes (async params/searchParams, Turbopack, cacheComponents) and frontend aesthetics. NOT when building non-React or backend-only applications.
- ▌ Context Optimization · bilalmk bundleApply optimization techniques to extend effective context capacity. Use when context limits constrain agent performance, when optimizing for cost or latency, or when implementing long-running agent systems.
- ▌ Multi Agent Patterns · bilalmk bundleDesign multi-agent architectures for complex tasks. Use when single-agent context limits are exceeded, when tasks decompose naturally into subtasks, or when specializing agents improves quality.
- ▌ Building Chat Widgets · bilalmk bundleBuild interactive AI chat widgets with buttons, forms, and bidirectional actions. Use when creating agentic UIs with clickable widgets, entity tagging (@mentions), composer tools, or server-handled widget actions. Covers full widget lifecycle. NOT when building simple text-only chat without interactive elements.
- ▌ Configuring Better Auth · bilalmk bundleImplement OAuth 2.1 / OIDC authentication using Better Auth with MCP assistance. Use when setting up a centralized auth server (SSO provider), implementing SSO clients in Next.js apps, configuring PKCE flows, or managing tokens with JWKS verification. Uses Better Auth MCP for guided setup. NOT when using simple session-only auth without OAuth/OIDC requirements.
- ▌ Fastapi Expert · bilalmk bundleComprehensive FastAPI knowledge for building production-ready APIs from basic to planet-scale. Use when building FastAPI applications, implementing REST APIs, setting up database operations with SQLModel, implementing authentication (OAuth2/JWT), deploying to Docker/Kubernetes, or needing guidance on middleware, WebSockets, background tasks, dependency injection, security, scalability, or performance optimization. Triggers include "FastAPI", "build API", "REST endpoint", "SQLModel", "OAuth2", "JWT", "deploy FastAPI", "Docker FastAPI", "Kubernetes", "API security", or questions about Python web frameworks.
- ▌ Sqlmodel Expert · bilalmk bundleAdvanced SQLModel patterns and comprehensive database migrations with Alembic. Use when creating SQLModel models, defining relationships (one-to-many, many-to-many, self-referential), setting up database migrations, optimizing queries, solving N+1 problems, implementing inheritance patterns, working with composite keys, creating indexes, performing data migrations, or troubleshooting Alembic issues. Triggers include "SQLModel", "Alembic migration", "database model", "relationship", "foreign key", "migration", "N+1 query", "query optimization", "database schema", or questions about ORM patterns.
- ▌ Context Degradation · bilalmk bundleRecognize, diagnose, and mitigate patterns of context degradation in agent systems. Use when context grows large, agent performance degrades unexpectedly, or debugging agent failures.
- ▌ Tool Design · bilalmk bundleDesign tools that agents can use effectively. Use when creating new tools for agents, debugging tool-related failures, or optimizing existing tool sets.
- ▌ Nextjs Devtools · bilalmk bundleNext.js development tooling via MCP. Inspect routes, components, build info, and debug Next.js apps. Use when working on Next.js applications, debugging routing, or inspecting app structure. NOT for general React or non-Next.js projects.