Skip to content

Claude Skills by ByeongminLee

github.com/ByeongminLee

91 skillsA× 85B× 67 installs179 views

Ai SdkBVercel AI SDK expert guidance. Use when building AI-powered features — chat interfaces, text generation, structured output, tool calling, agents, MCP integration, streaming, embeddings, reranking, image generation, or working with any LLM provider.data-airustgoVotes: 0GitHub stars: 3
Analytics TrackingAWhen the user wants to set up, improve, or audit analytics tracking and measurement. Also use when the user mentions "set up tracking," "GA4," "Google Analytics," "conversion tracking," "event tracking," "UTM parameters," "tag manager," "GTM," "analytics implementation," "tracking plan," "how do I measure this," "track conversions," "attribution," "Mixpanel," "Segment," "are my events firing," or "analytics isn't working." Use this whenever someone asks how to know if something is working or ...data-aijavascriptgoVotes: 0GitHub stars: 3
Apollo ClientAGuide for building React applications with Apollo Client 4.x. Use this skill when: (1) setting up Apollo Client in a React project, (2) writing GraphQL queries or mutations with hooks, (3) configuring caching or cache policies, (4) managing local state with reactive variables, (5) troubleshooting Apollo Client errors or performance issues.developmentjavascripttypescriptVotes: 0GitHub stars: 3
Better Auth Best PracticesAConfigure Better Auth server and client, set up database adapters, manage sessions, add plugins, and handle environment variables. Use when users mention Better Auth, betterauth, auth.ts, or need to set up TypeScript authentication with email/password, OAuth, or plugin configuration.developmenttypescriptrustVotes: 0GitHub stars: 3
Changelog MaintenanceAMaintain a clear and informative changelog for software releases. Use when documenting version changes, tracking features, or communicating updates to users. Handles semantic versioning, changelog formats, and release notes.developmentjavascriptgoVotes: 0GitHub stars: 3
Create Github Action Workflow SpecificationBCreate a formal specification for an existing GitHub Actions CI/CD workflow, optimized for AI consumption and workflow maintenance.data-aigonodeVotes: 0GitHub stars: 3
Skills DirectorySkills Directory Look up any of 103,619 scanned skills — grade, score, and every finding. Free.Check a skill
Emil Design EngAThis skill encodes Emil Kowalski's philosophy on UI polish, component design, animation decisions, and the invisible details that make software feel great.developmentjavascriptgoVotes: 0GitHub stars: 3
Github Actions TemplatesACreate production-ready GitHub Actions workflows for automated testing, building, and deploying applications. Use when setting up CI/CD with GitHub Actions, automating development workflows, or creating reusable workflow templates.data-aipythonnodeVotes: 0GitHub stars: 3
I18n Best PracticesA- **next-intl**: Recommended for Next.js App Router (RSC-compatible, type-safe) - **react-intl**: ICU MessageFormat, good for complex plurals/gender - **i18next + react-i18next**: Framework-agnostic, largest ecosystemdevelopmentgoreactVotes: 0GitHub stars: 3
Investor MaterialsACreate and update pitch decks, one-pagers, investor memos, accelerator applications, financial models, and fundraising materials. Use when the user needs investor-facing documents, projections, use-of-funds tables, milestone plans, or materials that must stay internally consistent across multiple fundraising assets.data-aigofrontendVotes: 0GitHub stars: 3
Investor OutreachADraft cold emails, warm intro blurbs, follow-ups, update emails, and investor communications for fundraising. Use when the user wants outreach to angels, VCs, strategic investors, or accelerators and needs concise, personalized, investor-facing messaging.data-aigoVotes: 0GitHub stars: 3
Javascript Testing PatternsAImplement comprehensive testing strategies using Jest, Vitest, and Testing Library for unit tests, integration tests, and end-to-end testing with mocking, fixtures, and test-driven development. Use when writing JavaScript/TypeScript tests, setting up test infrastructure, or implementing TDD/BDD workflows.developmentjavascripttypescriptVotes: 0GitHub stars: 3
Javascript Typescript JestABest practices for writing JavaScript/TypeScript tests using Jest, including mocking strategies, test structure, and common patterns.developmentjavascripttypescriptVotes: 0GitHub stars: 3
Log AnalysisAAnalyze application logs to identify errors, performance issues, and security anomalies. Use when debugging issues, monitoring system health, or investigating incidents. Handles various log formats including Apache, Nginx, application logs, and JSON logs.data-aijavascriptjavaVotes: 0GitHub stars: 3
Next Best PracticesANext.js best practices - file conventions, RSC boundaries, data patterns, async APIs, metadata, error handling, route handlers, image/font optimization, bundlingdata-aigoreactVotes: 0GitHub stars: 3
Next Cache ComponentsANext.js 16 Cache Components - PPR, use cache directive, cacheLife, cacheTag, updateTagdevelopmentgoshellVotes: 0GitHub stars: 3
Nextjs App Router FundamentalsAGuide for working with Next.js App Router (Next.js 13+). Use when migrating from Pages Router to App Router, creating layouts, implementing routing, handling metadata, or building Next.js 13+ applications. Activates for App Router migration, layout creation, routing patterns, or Next.js 13+ development tasks.developmentjavascripttypescriptVotes: 0GitHub stars: 3
Openapi SpecA```yaml openapi: 3.1.0 info: title: API Name version: 1.0.0 paths: /resource: get: operationId: listResources tags: [resources] parameters: [{ $ref: '#/components/parameters/Pagination' }] responses: '200': { $ref: '#/components/responses/ResourceList' } components: schemas: {} parameters: {} responses: {} securitySchemes: {} ```developmenttypescriptreactVotes: 0GitHub stars: 3
Playwright Best PracticesAUse when writing Playwright tests, fixing flaky tests, debugging failures, implementing Page Object Model, configuring CI/CD, optimizing performance, mocking APIs, handling authentication or OAuth, testing accessibility (axe-core), file uploads/downloads, date/time mocking, WebSockets, geolocation, permissions, multi-tab/popup flows, mobile/responsive layouts, touch gestures, GraphQL, error handling, offline mode, multi-user collaboration, third-party services (payments, email verification), ...developmentreactvueVotes: 0GitHub stars: 3
Pwa PatternsA- **Web App Manifest** (`manifest.json`): name, icons (192+512px), start_url, display: standalone - **Service Worker**: Caching strategy, offline fallback, background sync - **HTTPS**: Required for service worker registrationdata-aishellnextjsVotes: 0GitHub stars: 3
React Hook Form ZodABuild type-safe validated forms in React using React Hook Form and Zod schema validation. Single schema works on both client and server for DRY validation with full TypeScript type inference via z.infer. Use when: building forms with validation, integrating shadcn/ui Form components, implementing multi-step wizards, handling dynamic field arrays with useFieldArray, or fixing uncontrolled to controlled warnings, resolver errors, async validation issues.developmenttypescriptrustVotes: 0GitHub stars: 3
Routing MiddlewareAVercel Routing Middleware guidance — request interception before cache, rewrites, redirects, personalization. Works with any framework. Supports Edge, Node.js, and Bun runtimes. Use when intercepting requests at the platform level.developmentbashnextjsVotes: 0GitHub stars: 3
Seo AuditAWhen the user wants to audit, review, or diagnose SEO issues on their site. Also use when the user mentions "SEO audit," "technical SEO," "why am I not ranking," "SEO issues," "on-page SEO," "meta tags review," "SEO health check," "my traffic dropped," "lost rankings," "not showing up in Google," "site isn't ranking," "Google update hit me," "page speed," "core web vitals," "crawl errors," or "indexing issues." Use this even if the user just says something vague like "my SEO is bad" or "help ...data-aijavascriptrustVotes: 0GitHub stars: 3
ShadcnBManages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI. Provides project context, component docs, and usage examples. Applies when working with shadcn/ui, component registries, presets, --preset codes, or any project with a components.json file. Also triggers for "shadcn init", "create an app with --preset", or "switch to --preset".data-aibashreactVotes: 0GitHub stars: 3
StorybookA- Use `@storybook/nextjs` framework for automatic Next.js config support - Configure `main.ts`: `framework: { name: '@storybook/nextjs' }` - Stories location: `stories: ['../src/**/*.stories.@(ts|tsx)']`data-aireactnextjsVotes: 0GitHub stars: 3
Tailwind Design SystemABuild scalable design systems with Tailwind CSS v4, design tokens, component libraries, and responsive patterns. Use when creating component libraries, implementing design systems, or standardizing UI patterns.developmenttypescriptgoVotes: 0GitHub stars: 3
Tanstack Query Best PracticesATanStack Query (React Query) best practices for data fetching, caching, mutations, and server state management. Activate when building data-driven React applications with server state.data-aigoreactVotes: 0GitHub stars: 3
TurbopackATurbopack expert guidance. Use when configuring the Next.js bundler, optimizing HMR, debugging build issues, or understanding the Turbopack vs Webpack differences.developmentjavascripttypescriptVotes: 0GitHub stars: 3
TurborepoATurborepo monorepo build system guidance. Triggers on: turbo.json, task pipelines, dependsOn, caching, remote cache, the "turbo" CLI, --filter, --affected, CI optimization, environment variables, internal packages, monorepo structure/best practices, and boundaries. Use when user: configures tasks/workflows/pipelines, creates packages, sets up monorepo, shares code between apps, runs changed/affected packages, debugs cache, or has apps/packages directories.developmentjavascripttypescriptVotes: 0GitHub stars: 3
Ui Ux Pro MaxAUI/UX design intelligence for web and mobile. Includes 50+ styles, 161 color palettes, 57 font pairings, 161 product types, 99 UX guidelines, and 25 chart types across 10 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, and HTML/CSS). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, and check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, and mob...developmentpythongoVotes: 0GitHub stars: 3
Vercel FunctionsAVercel Functions expert guidance — Serverless Functions, Edge Functions, Fluid Compute, streaming, Cron Jobs, and runtime configuration. Use when configuring, debugging, or optimizing server-side code running on Vercel.developmentpythonrustVotes: 0GitHub stars: 3
Vercel StorageAVercel storage expert guidance — Blob, Edge Config, and Marketplace storage (Neon Postgres, Upstash Redis). Use when choosing, configuring, or using data storage with Vercel applications.developmentjavascriptgoVotes: 0GitHub stars: 3
Web VitalsA- **LCP** (Largest Contentful Paint): < 2.5s — largest visible element render time - **INP** (Interaction to Next Paint): < 200ms — responsiveness to user input - **CLS** (Cumulative Layout Shift): < 0.1 — visual stabilitydata-aireactnextjsVotes: 0GitHub stars: 3
ZustandAZustand state management guide. Use when working with store code (src/store/**), implementing actions, managing state, or creating slices. Triggers on Zustand store development, state management questions, or action implementation.developmenttypescriptreactVotes: 0GitHub stars: 3
Claude Code GuideAAdvanced Claude Code usage guide covering token optimization, memory/context management, subagent architecture, parallelization strategies, verification loops, continuous learning, environment setup, workflow patterns, and agentic security. Use this skill whenever the user asks about Claude Code tips, best practices, workflows, optimization, context management, subagents, parallel work, efficient development setup, CLAUDE.md, hooks, skills creation, session management, or agent security. Also...ai-agentstestinggitVotes: 0GitHub stars: 3
Claude Plugin ReferenceAReference guide for major Claude Code plugins and spec-driven development tools. Covers GSD, gstack, Everything Claude Code, Oh My OpenAgent, Superpowers, Vercel Plugin, Spec Kit, and OpenSpec. Use this skill when the user asks about Claude Code plugins, plugin comparisons, spec-driven development (SDD), workflow tools, or wants to learn features from other plugins. Also trigger on keywords like "plugin reference", "GSD", "gstack", "ECC", "superpowers", "spec-kit", "openspec", "SDD", "spec-dr...ai-agentsgonextjsVotes: 0GitHub stars: 3
Plugin TestARun NCC plugin E2E tests. Supports quick (4 projects), full (4+monorepo+modifications), or custom test modes. Installs from current dev branch, validates spec→dev flow, skills, hooks, code quality, security, a11y, and token efficiency.ai-agentstypescriptgoVotes: 0GitHub stars: 3
UpstreamBAnswer questions about the AI SDK and help build AI-powered features. Use when developers: (1) Ask about AI SDK functions like generateText, streamText, ToolLoopAgent, embed, or tools, (2) Want to build AI agents, chatbots, RAG systems, or text generation features, (3) Have questions about AI providers (OpenAI, Anthropic, Google, etc.), streaming, tool calling, structured output, or embeddings, (4) Use React hooks like useChat or useCompletion. Triggers on: "AI SDK", "Vercel AI SDK", "generat...ai-agentsrustgoVotes: 0GitHub stars: 3
CopywritingAWhen the user wants to write, rewrite, or improve marketing copy for any page — including homepage, landing pages, pricing pages, feature pages, about pages, or product pages. Also use when the user says "write copy for," "improve this copy," "rewrite this page," "marketing copy," "headline help," "CTA copy," "value proposition," "tagline," "subheadline," "hero section copy," "above the fold," "this copy is weak," "make this more compelling," or "help me describe my product." Use this wheneve...ai-agentsrustgoVotes: 0GitHub stars: 3
Marketing PsychologyAWhen the user wants to apply psychological principles, mental models, or behavioral science to marketing. Also use when the user mentions 'psychology,' 'mental models,' 'cognitive bias,' 'persuasion,' 'behavioral science,' 'why people buy,' 'decision-making,' 'consumer behavior,' 'anchoring,' 'social proof,' 'scarcity,' 'loss aversion,' 'framing,' or 'nudge.' Use this whenever someone wants to understand or leverage how people think and make decisions in a marketing context.content-marketingrustgoVotes: 0GitHub stars: 3
Pm Product StrategyAProduct strategy frameworks for startup and product teams. Covers vision, competitive analysis (Porter, PESTLE), market sizing, SWOT, personas, BMC, Lean Canvas, pricing, PRD, and user stories.ai-agentsrustgoVotes: 0GitHub stars: 3