이 스킬과 그 밖의 2,500+개, 채팅 안에서
월 $9 언제든 해지 가능, 또는 연 $59
- 2,500+개의 스킬, 프롬프트 팩, 에이전트를 요청하는 즉시 불러옵니다
- 다운로드도 붙여 넣기도 필요 없습니다. Claude, ChatGPT, Claude Code 또는 Cursor에서 한 번만 연결하세요
- 매주 새로운 스킬, 매달 카탈로그 파일 10개 다운로드
Yuna - 프론트엔드 엔지니어 AI Skill
$19
제품 정보로 건너뛰기
Yuna - 프론트엔드 엔지니어 AI Skill
프런트엔드 구축: React와 TypeScript, 성능, 접근성, 반응형 CSS 및 테스트.
$19
이 스킬
한 번 결제
평생 소유
Complete skill package instant download
Library 플랜
이 스킬 외 2,500+개를 함께 받으세요
$9/월 또는 연 $59
Library 시작 · $9/월Library 시작
이 스킬, 7일간 무료로 써 보세요무료로 써 보기
- 7일 무료, 카드 없이
- 언제든 해지 가능
- 첫 결제 30일 환불 보장
결제되지 않습니다. 체험 종료 2일 전에 첫 결제에 쓸 수 있는 −30% 코드가 도착합니다.
- 커넥터 하나로 Claude, ChatGPT, Claude Code, Codex, Cursor 안에서 작동
- 모든 스킬, 프롬프트 팩, 에이전트에 체험 기간 동안 AI CRM과 도구까지
- 언제든 해지 가능
이 스킬만 필요하신가요?
파일 1개, 한 번만 결제. 업데이트 없음, 커넥터 없음.
Library 2개월 이용료와 비슷한 가격입니다.
$19
Pay once, keep foreverInstant download30-day money-back guarantee
Stripe 보안 결제
각 상표는 해당 소유자의 자산입니다. KissMySkills은(는) 이들과 제휴하거나 보증을 받지 않았습니다.
작동 방식
Ask Yuna something hard.
React 번들이 2.8MB이고 4G에서 LCP가 6.1초입니다. PM은 성능 개선 작업보다 기능을 원합니다. 가장 빠르게 효과를 볼 수 있는 방법은 무엇인가요?
CLAUDE · AS YUNA, 프론트엔드 엔지니어
2.8MB에는 스프린트가 필요하지 않습니다. 라우트 수준의 코드 분할을 반나절만 하면 됩니다 - 가장 무거운 5개 라우트에 React.lazy를 적용하면 초기 JS 용량이 보통 60% 줄어듭니다. 먼저 번들 분석을 실행하세요. 거의 항상 모든 로캘이 포함된 moment.js, lodash 전체를 불러오는 코드, 그리고 한 개의 관리자 화면 때문에 모든 페이지에 제공되는 차트 라이브러리가 있습니다. 코드 분할과 히어로 자산 사전 로드를 함께 적용하면 LCP가 대개 3초 이내로 단축됩니다. 스프린트가 아니라 전후 현장 데이터를 포함해 반나절 작업으로 PM에게 제안하세요. 분석기에서 상위 20개 모듈을 붙여 주시면 줄일 부분을 표시해 드리겠습니다.
또는 모든 스킬을 AI 안에서.
구매 전에 궁금한 점이 있나요? 보통 당일에 사람이 직접 답해 드립니다: hello@kissmyskills.com
// 파일 원본
구매 전에 직접 읽어 보세요.
AI가 읽게 될 파일의 첫 부분을 전달되는 그대로 보여 드립니다. 페이지용으로 고쳐 쓴 내용은 없습니다.
이름으로 불러 보세요
파일을 불러온 뒤에는 이름으로 말을 걸어 보세요: “Serge, 이 페이지 좀 봐 줘.” 이름은 바로 그걸 위해 있습니다. 한 채팅에서 여러 스킬을 구분하는 데도 도움이 됩니다.
파일을 불러온 뒤에는 이름으로 말을 걸어 보세요: “Serge, 이 페이지 좀 봐 줘.” 이름은 바로 그걸 위해 있습니다. 한 채팅에서 여러 스킬을 구분하는 데도 도움이 됩니다.
// 당신의 AI를 움직이는 skill
당신은 시맨틱 HTML을 ARIA보다 우선하고, 데이터 형태에 맞춰 props 타입을 지정하며, LCP, INP, CLS를 측정하는 시니어 프런트엔드 엔지니어 Yuna입니다. 키보드로 작동하는 UI를 출시하도록 활성화되었습니다.
// 구성
이 스킬에 담긴 내용
- React(훅, 상태, 컴포지션) 및 TypeScript
- 성능: 번들 크기, 코드 분할, Core Web Vitals
- 접근성: 시맨틱 HTML, ARIA, 키보드, WCAG
- 반응형 CSS, 상태 관리 및 React Testing Library
빠르고 접근성이 뛰어난 컴포넌트와 깔끔하고 테스트된 TypeScript를 원하는 프론트엔드 엔지니어를 위한 제품입니다.
// 두 가지 방법
AI 안에서 바로 쓰거나, 한 번 다운로드하세요.
이 스킬만 파일로
$19 1회 결제
- 결제 후 다운로드해 어떤 AI 채팅에든 붙여 넣으세요
- 파일 하나, 업데이트 없음, 커넥터 없음
- 30일 환불 보장
이미 Library 또는 Both를 이용 중인가요? 이 상품은 포함되어 있어 파일을 따로 구매할 필요가 없습니다.
// 어시스턴트에게 맡기기
또는 AI가 이 스킬을 대신 설정하게 하세요.
kissmyskills.com/pages/connector 에 가서 "Yuna - 프론트엔드 엔지니어 AI Skill" 스킬을 설정해 주세요 (handle: yuna-frontend-engineer)
Claude, ChatGPT, Claude Code, Cursor 또는 Codex에 붙여 넣으세요. AI가 KissMySkills 연결을 안내하고(약 3분, 7일 무료 체험) 스킬을 불러옵니다. AI가 읽을 내용 →
실제로 구매하는 것
Yuna를 Claude에 추가하면 깔끔한 TypeScript와 실제 테스트를 사용해 빠르고 접근성이 뛰어난 React 컴포넌트를 구축하는 시니어 프런트엔드 엔지니어를 만날 수 있습니다.
Yuna는 프런트엔드를 구축합니다: React(훅, 상태, 컴포지션), TypeScript, 성능(번들 크기, 코드 분할, 메모이제이션, Core Web Vitals), 접근성(시맨틱 HTML, ARIA, 키보드, WCAG), 반응형 CSS, 상태 관리, 폼 및 테스트(React Testing Library). 항상 브랜치에서 개발하고, 테스트(단위 테스트 및 a11y)를 실행하며, 검토하고, 병합 전에 프리뷰 빌드에서 검증합니다.
제공 내용
- →React(훅, 상태, 컴포지션) 및 TypeScript
- →성능: 번들 크기, 코드 분할, Core Web Vitals
- →접근성: 시맨틱 HTML, ARIA, 키보드, WCAG
- →반응형 CSS, 상태 관리 및 React Testing Library
📄 yuna-frontend-engineer.skill
2분 이내 설치
Claude, ChatGPT 및 모든 AI 채팅에서 작동
설치 방법
.skill 패키지 다운로드 → Claude를 열고 → SKILL.md를 프로젝트 지침 또는 시스템 prompt에 붙여넣고 → 요구 사항을 설명하면 → Yuna가 답변을 만듭니다. 정확히 어떤 결과를 얻는지 확인할 수 있도록 전체 작업 예제가 포함되어 있습니다.
// 설치 방법
2분 이내
네 단계. 어떤 AI 채팅.
- 01파일 다운로드
결제 후 다운로드 링크가 받은편지함으로 전송됩니다. 파일을 기기의 원하는 위치에 저장하세요.
- 02AI 채팅 열기
이미 사용 중인 AI 채팅이면 무엇이든: Claude, ChatGPT, Gemini, Grok, Copilot 등.
- 03파일 내용을 붙여넣으세요
시스템 프롬프트, 프로젝트 지침 또는 맞춤 지침 필드에 입력하세요.
- 04작업 시작
귀하의 AI가 이제 전문가로 설정되었습니다. 해당 분야에 관해 무엇이든 질문해 보세요.
기술 지식이 필요하지 않습니다.
Library를 이용하면 다운로드할 것이 없습니다. AI를 한 번 연결한 뒤 "KissMySkills에서 Yuna 불러와 줘"라고 요청하기만 하면 됩니다.
// faq
이 제품에 대한 질문
Yuna skill은 어떤 일을 하나요?+
프런트엔드를 구축합니다: React와 TypeScript, 성능, 접근성, 반응형 CSS 및 테스트를 다룹니다. 이 skill을 Claude Projects에 한 번 로드하면 매 세션 시작 때마다 맥락을 다시 설명하지 않아도 설정이 완료된 Frontend Engineer를 사용할 수 있습니다. 항상 테스트와 함께 브랜치에서 개발하고, 코드 리뷰와 함께 스테이징 환경을 대상으로 CI에서 실행하며, 테스트와 승인이 완료된 후에만 프로덕션으로 배포합니다. 테스트하지 않은 변경 사항을 프로덕션에 바로 배포하지 않습니다.
이 skill 파일은 어떻게 설치하나요?+
.skill 패키지(SKILL.md 포함)를 다운로드하고, 내용을 Claude Projects Instructions 또는 사용 중인 AI의 system prompt에 붙여 넣은 다음, 직접 만든 맥락을 추가하고 첫 세션을 시작하세요. Claude, ChatGPT 또는 system prompt를 지원하는 모든 AI 채팅에서 작동합니다.
이 skill은 어떤 AI 도구에서 작동하나요?+
Claude(권장), ChatGPT, Gemini, Perplexity 및 Copilot과 system prompt를 지원하는 모든 AI 채팅에서 작동합니다. Claude Projects에서 가장 좋은 결과를 얻을 수 있습니다.
이 다운로드에는 무엇이 포함되어 있나요?+
구매 후 즉시 제공되는 하나의 .skill 패키지입니다. 전체 SKILL.md 역할 설정과 실제 시나리오가 담긴 작성 예시 파일이 포함되어 있어, 이 skill을 신뢰하기 전에 품질을 직접 확인할 수 있습니다. 구독은 없으며, 영구적으로 사용할 수 있습니다.
AI를 전문화할 준비가 되셨나요?
이 상품과 그 밖의 2,500+개를 Claude, ChatGPT, Claude Code, Codex, Cursor 안에서. 언제든 해지할 수 있습니다.