lighthouse
Lighthouse Audit
Google Lighthouse를 로컬에서 실행하여 웹 페이지의 성능, 접근성, SEO 등을 분석하고 개선점을 제안하는 스킬.
동작 흐름
1단계: 대상 URL 결정
사용자가 URL을 명시한 경우 그대로 사용한다. URL이 여러 개이면 모두 수집하여 한 번에 분석한다. URL이 없으면 프로젝트 설정 파일을 확인하여 프레임워크를 감지하고 기본 로컬 URL을 추론한다.
| 감지 파일 | 프레임워크 | 기본 URL |
|---|---|---|
vite.config.ts / vite.config.js |
Vite (React, Vue 등) | http://localhost:5173 |
next.config.ts / next.config.js / next.config.mjs |
Next.js | http://localhost:3000 |
nuxt.config.ts / nuxt.config.js |
Nuxt | http://localhost:3000 |
svelte.config.js / svelte.config.ts |
SvelteKit | http://localhost:5173 |
angular.json |
Angular | http://localhost:4200 |
More from parkyoungwoong/skills
react-vite-scaffold
(heropy) Use when initializing a new Vite + React (CSR) project or when an existing Vite React project needs missing configuration (ESLint, Prettier, TanStack Query, React Router, Zustand, Tailwind CSS, VSCode settings, path aliases).
62kb-bank-styles
KB국민은행 / KB스타뱅킹의 시각 언어를 따라 한국 금융권(뱅킹 앱·웹) UI를 만드는 스타일 가이드. "KB 스타일", "국민은행 스타일", "한국 뱅킹 UI", "한국 금융권 UI" 같은 요청에 사용한다. 토큰(컬러·타이포·스페이싱)·컴포넌트 스니펫·홈/송금/내역 페이지 템플릿을 제공한다.
19react-next-scaffold
(heropy) Use when initializing a new Next.js (SSR) project or when an existing Next.js project needs missing configuration (ESLint, Prettier, TanStack Query, Tailwind CSS, VSCode settings, path aliases).
12react-vite-to-next-migration
(heropy) Use when migrating an existing Vite + React (TypeScript) project to Next.js (App Router, v16). Converts entry points, routing (React Router → App Router), environment variables, path aliases, static assets, and styling setup.
8skill-commit
(heropy) Use when committing changes in this project. Analyzes changes to generate appropriate commit messages and bumps skill versions in frontmatter when SKILL.md files are modified.
6web-design-guidelines
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".
3