binjuhor/shadcn-lar
31 skills853 installs2.9k starsGitHub
Install
npx skills add https://github.com/binjuhor/shadcn-larSkills in this repo
1Ui Ux Pro MaxUI UX Pro Max skill from binjuhor/shadcn-lar focused on building premium shadcn and Tailwind interfaces with expert layout, accessibility, component design, and UX decisions for SaaS, extensions, and content web products.222installs2ThreejsThis skill teaches building 3D web experiences with Three.js across WebGL and WebGPU. It covers scene setup, geometries, materials, lighting, asset loaders, post-processing, custom shaders, performance techniques like instancing and LOD, and VR/XR. A developer uses it when creating 3D visualizations, games, configurators, or interactive graphics on the web.34installs3Ck:Frontend DevelopmentThis skill is a guide for modern React and TypeScript development. It emphasizes Suspense-based data fetching with useSuspenseQuery, lazy loading, TanStack Router folder-based routing, MUI v7 styling, and a feature-directory file organization. A developer uses it when creating components or features and wants consistent patterns for performance, loading states, and TypeScript typing.33installs4Ui StylingThis skill guides building accessible user interfaces with shadcn/ui components on Radix UI plus Tailwind CSS utility styling. It covers component installation, theming and dark mode, responsive mobile-first layouts, accessibility patterns, and canvas-based visual design. A developer uses it when building or styling React UIs and design systems.29installs5Ck:Problem SolvingThis skill provides systematic problem-solving techniques for different kinds of stuck-ness. It matches symptoms to techniques such as Simplification Cascades, Collision-Zone Thinking, Meta-Pattern Recognition, Inversion Exercise, and the Scale Game, each with a key insight and red-flag signal. A developer uses it when facing a complexity spiral, an innovation block, a forced assumption, or general uncertainty about how to proceed.24installs6Frontend DesignThis skill guides the creation of distinctive, production-grade frontend interfaces with high design quality. A developer uses it to build web components, pages, or applications, or to replicate a provided screenshot or design reference. For screenshot inputs it extracts design guidelines first, then implements code that matches the colors, typography, and layout while avoiding generic AI aesthetics.24installs7Skill CreatorThis skill is a guide for creating and optimizing Claude skills. It explains skill anatomy (SKILL.md frontmatter plus scripts, references, and assets), metadata quality for auto-activation, and progressive-disclosure rules that keep SKILL.md and reference files short. A developer uses it when authoring a new skill or improving an existing one.24installs8Chrome DevtoolsThis skill automates and debugs browsers using Puppeteer CLI scripts. A developer uses it to take screenshots, monitor network traffic, analyze performance, scrape pages, automate forms, and debug JavaScript. Scripts output JSON and reuse a persistent browser session, with an ARIA snapshot workflow to discover and interact with page elements by reference.23installs9Ck:Google Adk PythonThe SKILL.md bundled under this listing is a DevOps skill that deploys and manages cloud infrastructure across Cloudflare Workers, Docker, Google Cloud, and Kubernetes. It covers serverless deployment, containerization, GitOps, CI/CD pipelines, and security audits. A developer uses it when shipping apps to the edge or a container platform and managing clusters with kubectl and Helm. Note the listing slug reads google-adk-python but the actual document content is the ck:devops skill.22installs10Code ReviewThis skill guides code review practices emphasizing technical rigor, evidence-based claims, and verification over performative responses. A developer uses it when receiving review feedback, requesting reviews via a code-reviewer subagent, or before making any completion or success claim. It enforces verification gates that require running commands and reading output before stating that tests pass or work is complete.22installs11Backend DevelopmentThis skill is a reference guide for building production backend systems. A developer uses it when designing APIs, implementing authentication, optimizing database queries, or setting up CI/CD and microservices. It provides technology decision matrices and links to reference files covering API design, security, performance, architecture, testing, and DevOps.21installs12Better AuthThis skill implements authentication and authorization using Better Auth, a framework-agnostic TypeScript auth framework. A developer uses it to add email/password login, OAuth providers, 2FA, passkeys, sessions, and RBAC to web apps built with Next.js, Nuxt, SvelteKit, Remix, Hono, Express, and others. It provides install steps, server and client setup snippets, and a feature-selection matrix.21installs13Mcp BuilderThis skill is a guide for creating high-quality MCP (Model Context Protocol) servers that let LLMs interact with external services through well-designed tools. A developer uses it when building an MCP server to integrate an external API or service in Python (FastMCP) or Node/TypeScript. It covers agent-centric tool design, a four-phase workflow, input validation, and actionable error handling.21installs14Mobile DevelopmentThis skill guides building mobile applications with React Native, Flutter, Swift/SwiftUI, and Kotlin/Jetpack Compose. A developer uses it to implement mobile-first design and UX patterns, optimize for mobile constraints, make native versus cross-platform decisions, and deploy to app stores. It includes framework comparison matrices, performance targets, and security best practices.21installs15Sequential ThinkingThis skill applies a structured, reflective problem-solving method that breaks complex tasks into numbered thoughts that can be revised, branched, and verified. It is aimed at problems with unclear scope, multi-step solutions, and hypothesis-driven debugging. Optional Node scripts validate and format the thought sequence when persistence is needed.21installs16Web FrameworksThis skill guides building full-stack web apps with Next.js, managing monorepos with Turborepo, and adding icons with RemixIcon. It covers the App Router, Server Components, rendering strategies, Turborepo task pipelines and caching, and icon integration. A developer uses it when building React apps or setting up monorepos with shared packages.21installs17Docs SeekerThis skill searches technical documentation using executable scripts that detect the query type, fetch content from llms.txt sources such as context7.com, and analyze the results. A developer uses it to find topic-specific docs, library or framework documentation, or to analyze a GitHub repository. It recommends an agent distribution strategy when multiple documentation URLs are returned.20installs18Mcp ManagementThis skill manages Model Context Protocol servers by discovering, analyzing, and executing their tools, prompts, and resources. A developer uses it to list available MCP capabilities, select relevant tools for a task, execute tools programmatically, and coordinate across multiple servers. It emphasizes context-efficient progressive disclosure so MCP discovery does not pollute the main context window.20installs19Payment IntegrationThis skill implements payment integrations with SePay, a Vietnamese payment gateway, and Polar, a global SaaS monetization platform. A developer uses it to build checkout flows, manage subscriptions, handle webhooks, process bank transfers or QR payments, and automate benefit delivery. It provides platform selection guidance plus bundled webhook-verification and checkout helper scripts.20installs20ResearchThis skill runs a structured technical-research methodology for an agent: define scope, gather information across sources, synthesize findings, and produce a markdown report. It supports an optional Gemini CLI search path with a WebSearch fallback and caps research at five tool calls. A developer uses it to evaluate technologies, gather best practices, and design solutions before building.20installs21Template SkillThis is a placeholder skill template: a bare SKILL.md skeleton with frontmatter placeholders and no real instructions. It exists to be copied as a starting point when authoring a new skill. There is no functional behavior to describe beyond the empty scaffold.20installs22Ai MultimodalThis skill processes and generates multimedia content through the Google Gemini API. A developer uses it to transcribe audio, analyze images and screenshots, process videos and PDF documents, and generate images with Imagen 4 or videos with Veo 3 from text prompts. It bundles Python CLI scripts (gemini_batch_process.py, media_optimizer.py, document_converter.py) that resolve API keys and handle inline vs File API uploads.19installs23DatabasesThis skill is a unified guide for working with MongoDB and PostgreSQL databases. A developer uses it to design schemas, write SQL or MongoDB queries, build aggregation pipelines, optimize indexes, run migrations, and administer production deployments. It includes a decision guide for choosing between document and relational databases per use case.19installs24DevopsThis skill guides deploying and managing cloud infrastructure across the Cloudflare edge platform, Docker containers, and Google Cloud Platform. A developer uses it to ship serverless functions to the edge, containerize applications, set up CI/CD pipelines, run multi-region deployments, and optimize infrastructure costs. It includes a platform selection guide for choosing between Cloudflare, Docker, and GCP.19installs25RepomixThis skill wraps the Repomix CLI to package an entire repository into a single AI-friendly file for feeding to LLMs. It covers include/exclude filters, output formats, comment removal, remote-repo packing, token counting, and Secretlint-based security checks. A developer uses it to prepare codebase context for LLM analysis, review, or security audits.19installs26ShopifyThis skill guides building on the Shopify platform: apps, checkout and admin extensions, and Liquid themes using the Shopify CLI, GraphQL/REST Admin APIs, and Polaris UI. It includes OAuth, billing, webhooks, and product/order/customer data operations. A developer uses it when building Shopify apps or customizing storefront and checkout flows.19installs27Media ProcessingThis skill processes multimedia files using FFmpeg, ImageMagick, and RMBG command-line tools. A developer uses it to convert media formats, encode video with specific codecs, resize or crop images, extract audio, remove backgrounds, generate thumbnails, or build media processing pipelines. It includes a tool-selection table and ready-to-run command examples.18installs28Ck:PdfThis skill covers essential PDF processing with Python libraries and command-line tools. It handles text and table extraction with pdfplumber, merging and splitting with pypdf, PDF creation with reportlab, OCR of scanned PDFs, watermarking, encryption, and programmatic form filling. A developer uses it when generating, analyzing, or transforming PDF documents in batch.15installs29Ck:DocxThis skill guides an agent through creating, editing, and analyzing Microsoft Word .docx files. It covers text extraction with pandoc, raw OOXML editing via an unpack/pack script workflow, creating new documents with docx-js, and a tracked-changes redlining workflow for reviewing someone else's document. A developer uses it when they need to generate reports or edit legal, academic, or business documents while preserving formatting.14installs30Ck:PptxThis skill guides creating, editing, and analyzing PowerPoint .pptx files. It covers text extraction with markitdown, raw OOXML access for speaker notes and layouts, and an html2pptx workflow that converts HTML slides to PowerPoint with accurate positioning. It includes design principles and example color palettes. A developer uses it when generating or modifying slide decks programmatically.14installs31Ck:XlsxThis skill creates, edits, and analyzes spreadsheets in .xlsx, .csv, and .tsv formats. A developer uses it to build Excel formulas, pivot tables, charts, and financial models, and to analyze data with pandas and openpyxl. It enforces zero formula errors, industry-standard financial color-coding and number formatting, and mandatory formula recalculation via a bundled recalc.py script.14installs