토스(Toss) Frontend Fundamentals 기반의 프론트엔드 개발 종합 가이드. 코드 품질(가독성, 예측 가능성, 응집도, 결합도), 번들링(Webpack, 트리셰이킹, 코드 스플리팅), 접근성(A11y, 스크린 리더, ARIA), 디버깅(진단, 재현, 수정, 재발 방지) 4개 도메인을 포괄한다. 반드시 이 스킬을 사용해야 하는 상황: - 프론트엔드 코드 리뷰, 리팩토링, 코드 품질 개선 요청 시 - React/TypeScript 컴포넌트의 가독성, 응집도, 결합도 관련 질문 시 - Webpack, Rollup, Vite 등 번들링 설정, 트리셰이킹, 코드 스플리팅 질문 시 - 웹 접근성(a11y), ARIA, 스크린 리더, 키보드 내비게이션 관련 질문 시 - 프론트엔드 디버깅 전략, 에러 메시지 분석, 버그 재현/수정/방지 질문 시 - "좋은 코드란?", "변경하기 쉬운 코드", "클린 코드" 등의 추상적 질문 시 - 면접 준비에서 프론트엔드 기초 개념을 정리하고 싶을 때 - 컴포넌트 분리 전략, Props Drilling, 매직 넘버, 삼항 연산자 등 구체적 패턴 질문 시 - ESM vs CJS, sideEffects, 번들 분석, HMR, 소스맵 등 빌드 관련 질문 시 - 버튼 안에 버튼, 테이블 행 클릭, 폼 접근성 등 UI 접근성 안티패턴 질문 시
Best practices for Remotion - Video creation in React
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.