Frontend

ui-demo는 Playwright, 보이는 커서 이동, 자연스러운 템포를 활용해 세련된 웹 앱 데모 영상을 녹화하는 데 도움을 줍니다. 워크스루, 온보딩 클립, 기능 소개, 튜토리얼형 녹화에 ui-demo 스킬을 사용하세요. 안정적인 결과를 위해 discover, rehearse, record 순서의 워크플로를 따르세요. 특히 프로토타입이나 빠르게 변하는 UI에서 유용합니다.

nuxt4-patterns는 Nuxt 4에서 하이드레이션 안전성, route rules, 지연 로딩, SSR 안전 데이터 패칭을 다루는 스킬입니다. 이 nuxt4-patterns 스킬을 사용해 Frontend Development 의사결정을 더 잘 내리고, 불일치를 줄이며, 각 페이지나 컴포넌트에 맞는 패턴을 적용하세요.

nextjs-turbopack 스킬은 Next.js 16+에서 Turbopack을 활용해 로컬 개발 속도, HMR, 번들러 선택 기준을 더 잘 잡도록 돕습니다. Frontend Development 워크플로에서 설치, 사용법, 그리고 webpack으로 되돌아가야 하는 시점을 실전형 nextjs-turbopack 가이드로 확인하세요.

healthcare-emr-patterns는 의료 분야의 EMR/EHR 설계를 위한 실용적인 skill입니다. 환자 진료 워크플로, 임상 노트 작성, 약물 확인, 검사 결과 강조 표시, 감사 추적, CDSS 연동, 그리고 더 안전한 의료진 워크플로를 위한 접근성 우선 의료 데이터 입력을 다룹니다.

gan-style-harness는 Agent Orchestration용 Generator-Evaluator 스킬로, 더 엄격한 비평, 더 나은 반복 개선, 더 적은 취약점을 바탕으로 완성도 높은 앱을 만드는 데 도움을 줍니다. 프런트엔드 중심 작업, 풀스택 작업, 또는 리뷰 품질이 속도보다 중요한 프로덕션 지향 작업에서 gan-style-harness 스킬이 필요할 때 사용하세요.

frontend-slides는 처음부터 애니메이션이 풍부한 HTML 프레젠테이션을 만들거나 PowerPoint 파일을 변환해 만드는 데 도움이 됩니다. 발표, 피치덱, 워크숍, 사내 데모에 적합하며, 시각적 탐색이 필요하고 의존성 없는 브라우저 출력과 한 화면(viewport)에 꼭 맞는 슬라이드가 필요할 때 frontend-slides for UI Design에 사용하세요.

frontend-patterns는 React와 Next.js 프론트엔드 개발에 실용적인 스킬로, 컴포넌트, 상태, 폼, 라우팅, 접근성, 성능에 대해 유지보수하기 좋은 패턴을 선택하도록 도와줍니다. 단순한 일반 모범 사례가 아니라 명확한 구현 가이드와 패턴 선택이 필요할 때 frontend-patterns 가이드를 활용하세요.

frontend-design을 사용해 뚜렷한 시각적 방향성을 가진, 프로덕션 수준의 프론트엔드 인터페이스를 만드세요. 이 frontend-design 스킬은 랜딩 페이지, 대시보드, 앱 셸, 컴포넌트처럼 구현만큼 계층, 타이포그래피, 모션, 완성도가 중요한 작업에 맞춰져 있습니다. 디자인 우선 UI 작업을 위한 설치 및 사용 가이드도 포함합니다.

dart-flutter-patterns는 프런트엔드 개발을 위한 실용적인 Dart 및 Flutter 스킬로, null safety, immutable state, async composition, widget structure, state management, GoRouter navigation, Dio networking, testing, clean architecture를 다룹니다. 새 기능을 만들거나 리팩터링할 때 production-ready 패턴을 선택하는 데 dart-flutter-patterns 가이드를 활용하세요.

click-path-audit 스킬은 모든 상태 변화를 따라 UI 핸들러 흐름을 추적해, 리팩터링 이후나 코드 리뷰 중에 발생하는 순서 버그, 공유 상태 충돌, 최종 상태 불일치를 찾아내는 데 도움을 줍니다.

bun-runtime 스킬은 새 JavaScript 또는 TypeScript 프로젝트에서 Bun을 선택할지, Node 마이그레이션에 사용할지, 스크립트·테스트·Vercel 설정에 적합한지 판단하는 데 도움을 줍니다. bun-runtime 사용법, 설치 가이드, Bun vs Node의 트레이드오프, 프런트엔드 및 풀스택 개발에서의 실전 워크플로를 다룹니다.

browser-qa는 브라우저 자동화를 활용해 배포 후 비주얼 테스트, 상호작용 점검, 반응형 스크린샷, 접근성 검토를 수행하는 브라우저 QA 스킬입니다. 프론트엔드 개발자와 QA 팀이 일반적인 프롬프트 대신 반복 가능한 browser-qa 가이드를 바탕으로 staging 또는 preview 페이지를 검증할 수 있도록 돕습니다.

shadcn 스킬을 사용해 프로젝트 컨텍스트를 점검하고, 적절한 CLI 명령을 실행하며, 컴포넌트를 설치하고, base vs radix, 폼, 테마, 레지스트리에 대한 문서화된 패턴으로 UI를 구성할 수 있습니다.

frontend-design은 막연한 UI 아이디어를 실제 프론트엔드 코드와 뚜렷한 미적 방향성으로 구현해, 생산 단계에 바로 쓸 수 있는 개성 있는 인터페이스를 만들고 흔한 AI 스타일링을 줄여줍니다.

webapp-testing은 Python Playwright로 로컬 웹앱을 테스트하는 스킬입니다. `scripts/with_server.py`로 서버를 띄우고, 렌더링된 UI와 selector를 확인하며, 스크린샷과 콘솔 로그를 수집해 프런트엔드 동작을 정찰 중심 워크플로로 검증할 수 있습니다.

fullstack-developer skill은 React, Next.js, Node.js, API, 데이터베이스, 인증, 배포까지 아우르는 현대적 JavaScript·TypeScript 웹 앱 작업용 재사용 프롬프트 패키지입니다. 스크립트나 템플릿을 제공하기보다는, 단일 SKILL.md 파일로 적용 범위와 작업 흐름을 정의하는 방식이며, 여러 레이어를 함께 고려해야 하는 기획·구현 작업에 특히 잘 맞습니다.

benchmark 스킬은 웹 및 앱 워크플로에서 성능 저하를 감지하는 데 도움이 됩니다. 기준선을 설정하고, 변경 전후를 비교하며, PR로 인해 페이지가 더 느려졌는지, 더 무거워졌는지, 또는 안정성이 떨어졌는지 추적하는 데 활용하세요. 성능 최적화, Core Web Vitals, Lighthouse 점검, 번들 크기, 로드 시간 추세를 살펴보는 실용적인 벤치마크 가이드입니다.

migrate-to-shoehorn은 TypeScript 테스트에서 `as` 캐스트를 더 안전한 부분 픽스처를 위해 @total-typescript/shoehorn으로 바꾸는 데 도움을 줍니다. 캐스트가 많은 테스트 데이터를 정리해야 하거나, migrate-to-shoehorn 가이드를 따라야 하거나, Test Automation에 맞게 migrate-to-shoehorn을 표준화해야 할 때 이 스킬을 사용하세요.

prototype 스킬은 실제 구현에 들어가기 전에, 한 가지 구체적인 질문에 답해 주는 버릴 코드를 만들 때 도움이 됩니다. 로직, 상태 전환, 데이터 형태, 또는 UI 방향을 검증해야 할 때, 호스트 저장소의 규칙을 따르는 실행 가능한 프로토타입으로 빠르게 확인해 보세요. 최종 기능이 아니라 빠른 프로토타입 가이드가 필요할 때 가장 잘 맞습니다.

ckm:ui-styling은 shadcn/ui, Tailwind CSS, 캔버스 기반 비주얼 디자인을 활용해 접근성 높고 실전용 UI를 손쉽게 구현할 수 있도록 돕습니다. React 프로젝트에서 구조화된 반응형 레이아웃, 접근성 컴포넌트, 다크 모드, 일관된 디자인 시스템이 필요할 때 적합합니다. UI 디자인, 테마 적용, 빠른 프로토타이핑에 실용적이고 스택별 맞춤 가이드를 제공합니다.

ckm:slides로 거친 아이디어를 전략적인 HTML 슬라이드 덱으로 변환하세요. 슬라이드 전략, 카피라이팅 공식, 레이아웃 패턴, Chart.js용 템플릿까지 포함됩니다.

ckm:design-system은 명확한 토큰 아키텍처를 바탕으로 3계층 토큰, 컴포넌트 스펙, CSS variables, Tailwind mappings, 브랜드 일관 슬라이드 에셋을 생성하도록 도와줍니다.

accessibility-compliance 스킬은 실무에 바로 적용할 수 있는 WCAG 2.2, ARIA, 키보드 접근성, 스크린 리더, 모바일 접근성 가이드를 바탕으로 팀이 웹 또는 모바일 UI를 점검하고 개선하도록 돕습니다. UX 감사, 컴포넌트 수정, 구현 가능한 권고안이 필요한 경우에 특히 적합합니다.

design-system-patterns는 디자인 시스템과 컴포넌트 라이브러리를 위해 토큰 구조, 테마 아키텍처, 재사용 가능한 컴포넌트 API 패턴을 정리해 확장 가능한 UI 기반을 설계할 수 있도록 돕는 스킬입니다.