Claude Skills

Build scalable design systems with Tailwind CSS, design tokens, component libraries, and responsive patterns. Use when creating component libraries, implementing design systems, or standardizing UI patterns.

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

테스트 주도 개발 - 테스트 먼저 작성 후 구현. "TDD", "테스트 먼저", "테스트 주도" 키워드에 활성화.

모호한 UI 아이디어를 Stitch에 최적화된 상세 프롬프트로 변환합니다. 구체성 향상, UI/UX 키워드 추가, 디자인 시스템 컨텍스트 주입. "프롬프트 향상", "Stitch 프롬프트", "UI 아이디어" 키워드에 활성화.

코드 단순화 및 리팩토링. "단순화", "simplify", "리팩토링" 키워드에 활성화.

Complete shadcn/ui component library guide including installation, configuration, and implementation of accessible React components. Use when setting up shadcn/ui, installing components, building forms with React Hook Form and Zod, customizing themes with Tailwind CSS, or implementing UI patterns like buttons, dialogs, dropdowns, tables, and complex form layouts.

현재 브랜치의 변경사항 코드 리뷰. "리뷰", "review", "검토" 키워드에 활성화.

UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient. Integrations: shadcn/ui MCP for component search and examples.

복잡한 작업 전 계획 수립. Plan 모드에서 사용하거나 "계획", "플랜", "어떻게 구현" 등의 키워드에 자동 활성화.

REQUIRED for all image generation requests. Generate and edit images using Nano Banana (Gemini CLI). Handles blog featured images, YouTube thumbnails, icons, diagrams, patterns, illustrations, photos, visual assets, graphics, artwork, pictures. Use this skill whenever the user asks to create, generate, make, draw, design, or edit any image or visual content.

세션 종료 전 HANDOFF.md 작업 인계 문서 생성. "인계", "handoff", "세션 정리" 키워드에 활성화.

Master Python asyncio, concurrent programming, and async/await patterns for high-performance applications. Use when building async APIs, concurrent systems, or I/O-bound applications requiring non-blocking operations.

Master REST and GraphQL API design principles to build intuitive, scalable, and maintainable APIs that delight developers. Use when designing new APIs, reviewing API specifications, or establishing API design standards.

WordPress performance code review and optimization analysis. Use when reviewing WordPress PHP code for performance issues, auditing themes/plugins for scalability, optimizing WP_Query, analyzing caching strategies, checking code before launch, or detecting anti-patterns, or when user mentions "performance review", "optimization audit", "slow WordPress", "slow queries", "high-traffic", "scale WordPress", "code review", "timeout", "500 error", "out of memory", or "site won't load". Detects anti-patterns in database queries, hooks, object caching, AJAX, and template loading.

작업 완료 후 코드 검증 (타입체크, 린트, 테스트, 빌드). "검증", "verify", "테스트", "빌드" 키워드에 활성화.

VVM (Vibe Virtual Machine) is a language for agentic programs where the LLM is the runtime. Activate when: running .vvm files, mentioning VVM, calling /vvm-boot, /vvm-run, /vvm-compile, /vvm-generate, or orchestrating multi-agent workflows. Read spec.md for the language specification and vvm.md for execution semantics.

Look up documentation and source code for libraries and packages. Use when the user asks a question about a library, needs to understand a library's API, or when you need information about a library that you don't know about. Triggers on questions like "How do I use X library?", "What's the API for Y?", "Show me how Z library handles this", or when encountering unfamiliar library usage.

Automatically discover frontend development skills when working with React, Next.js, UI components, state management, data fetching, forms, accessibility, performance optimization, or SEO. Activates for frontend web development tasks.

Automatically discover eBPF and kernel skills when working with eBPF, kernel tracing, XDP, kprobes, BPF, Linux kernel, or network filtering. Activates for eBPF development tasks.

Automatically discover machine learning and AI skills when working with machine learning, PyTorch, training, inference, RAG, embeddings, fine-tuning, LLM, DSPy, HuggingFace, or diffusion models. Activates for ML development tasks.

Automatically discover infrastructure and DevOps skills when working with Terraform, IaC, infrastructure as code, cloud platforms, Cloudflare Workers, or cost optimization. Activates for infrastructure development tasks.

Automatically discover CI/CD and automation skills when working with GitHub Actions, Jenkins, GitLab CI, pipelines, continuous integration, continuous deployment, or automated testing. Activates for CI/CD development tasks.

Automatically discover API design skills when working with REST APIs, GraphQL schemas, API authentication, OAuth, JWT, rate limiting, API versioning, error handling, or endpoint design. Activates for backend API development tasks.

Automatically discover agentic workflow skills when building AI agents, implementing tool use patterns, managing context windows, decomposing complex tasks, or designing multi-step autonomous workflows. Activates for agentic AI development.