모바일 우선 반응형 디자인, 터치 대상 및 PWA 패턴
YepAPI/skills는 모바일 우선 디자인 원칙에 따라 반응형 웹 애플리케이션과 프로그레시브 웹 앱(PWA)을 구축하기 위한 포괄적인 가이드입니다. 이 스킬은 `min-width` 중단점을 사용하여 데스크톱을 향상시키는 모바일 우선 접근 방식을 강조하며, 버튼과 링크의 터치 대상 크기를 최소 44x44px로 유지하고, 모바일 브라우저 크롬을 고려한 `dvh` 뷰포트 단위를 사용하며, 노치가 있는 기기에서 `env(safe-area-inset-*)`를 통해 안전 영역을 지원합니다. 또한 PWA 기본 사항으로 `manifest.json`, 서비스 워커, `<meta name="theme-color">`를 다루고, 첫 로드 시 JS 용량을 200KB 미만으로 유지하는 성능 예산을 제시합니다. `type="email"`, `type="tel"`, `type="number"`와 같은 올바른 입력 유형을 사용하여 모바일 키보드를 최적화하고, 탭 인터랙션만으로도 모든 기능이 작동하도록 호버 전용 상호작용을 금지하며, 실제 기기에서의 테스트를 강조하여 에뮬레이터가 놓칠 수 있는 성능 문제와 터치 버그를 발견하도록 돕습니다.
npx skills add https://github.com/YepAPI/skills/tree/HEAD/skills/mobile-firstmin-width 중단점 사용dvh 사용 (모바일 브라우저 크롬 고려)env(safe-area-inset-*) 사용manifest.json, 서비스 워커, <meta name="theme-color">type="email", type="tel", type="number" — 올바른 키보드 트리거This repo contains 20 individual skills — each has its own dedicated page.
WCAG 2.1 AA — semantic HTML, keyboard navigation, screen readers.
Experiment setup, variant splitting, statistical significance, and feature flag integration.
CRUD generators, data tables, user management, role-based access, and bulk operations.
Monitor what ChatGPT and Gemini say about your brand using YepAPI.
Queue workers with BullMQ/Inngest/Trigger.dev, job retries, dead letter queues, concurrency.
Commander.js, interactive prompts with Clack, spinners, colors, config files, exit codes, and npm publishing.
cmdk integration, Cmd+K trigger, fuzzy search, grouped actions, keyboard navigation, and dynamic action registration.
Content planning with trend and sentiment data from YepAPI.
Content calendar, keyword-driven planning, and content briefs.
Theme switching with CSS variables, system preference detection, next-themes, and persistence.
Threaded comments, @mentions, reactions, moderation queue, optimistic UI, and cursor pagination.
Competitive analysis between domains using YepAPI.
Layout grids, KPI cards, data tables with sorting/filtering, sidebar navigation, and responsive breakpoints.
Data encryption — TLS everywhere, AES-256-GCM for PII, bcrypt passwords, encrypted backups.
Chart patterns with Recharts/Nivo/D3, responsive containers, color scales, and accessibility.
Drizzle schema definition, push vs migrate, type-safe queries, relations, transactions, and prepared statements.
Upload handling, resize/compress, CDN delivery, blur placeholders, and next/image patterns.
Local business and Google Maps research using YepAPI.
Cursor-based pagination, IntersectionObserver, virtualized lists with @tanstack/react-virtual, and scroll position restoration.
Chat UI components, streaming responses with AI SDK, context window management, and RAG patterns.
ElevenLabs text-to-speech with mac-style say UX.
Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.
Capture and automate macOS UI with the Peekaboo CLI.
Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".
Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.
Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".