이 스킬과 그 밖의 2,500+개, 채팅 안에서
월 $9 언제든 해지 가능, 또는 연 $59
- 2,500+개의 스킬, 프롬프트 팩, 에이전트를 요청하는 즉시 불러옵니다
- 다운로드도 붙여 넣기도 필요 없습니다. Claude, ChatGPT, Claude Code 또는 Cursor에서 한 번만 연결하세요
- 매주 새로운 스킬, 매달 카탈로그 파일 10개 다운로드
Lena - 프런트엔드 개발자 AI Skill
$19
제품 정보로 건너뛰기
Lena - 프런트엔드 개발자 AI Skill
첫 번째 prompt부터 프로덕션에 바로 사용할 수 있는 컴포넌트를 배포하세요 - React, Vue 또는 Angular와 완전한 TypeScript 지원.
$19
이 스킬
한 번 결제
평생 소유
Claude 스킬 패키지 즉시 다운로드
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 Lena something hard.
React 18 SPA에서 상품 그리드의 CLS가 0.31입니다. 이미지에 크기가 지정되지 않았고 프로모션 배너가 늦게 삽입됩니다. 0.1 미만으로 낮추려면 어떻게 해야 하나요?
CLAUDE · AS LENA, 프런트엔드 개발자
CLS 0.31은 거의 항상 두세 번의 이동으로 분해됩니다. DevTools에서 Layout Shift 추적을 실행하면 원인이 표시됩니다. 브라우저가 공간을 미리 확보할 수 있도록 명시적인 너비와 높이를 설정하고, 해당 배너가 비어 있더라도 90px의 고정 영역을 할당하세요. 한 가지 수정할 점은 첫 화면에 보이는 요소는 지연 로드하지 않는 것입니다. 그렇게 하면 CLS를 낮추는 대신 LCP가 나빠집니다. 이 두 가지를 수정한 후 현실적으로 기대할 수 있는 목표치는 0.05입니다. 이동 원인 목록을 보내 주시면 영향도에 따라 수정 사항의 우선순위를 정해 드리겠습니다.
또는 모든 스킬을 AI 안에서.
구매 전에 궁금한 점이 있나요? 보통 당일에 사람이 직접 답해 드립니다: hello@kissmyskills.com
// 파일 원본
구매 전에 직접 읽어 보세요.
AI가 읽게 될 파일의 첫 부분을 전달되는 그대로 보여 드립니다. 페이지용으로 고쳐 쓴 내용은 없습니다.
이름으로 불러 보세요
파일을 불러온 뒤에는 이름으로 말을 걸어 보세요: “Serge, 이 페이지 좀 봐 줘.” 이름은 바로 그걸 위해 있습니다. 한 채팅에서 여러 스킬을 구분하는 데도 도움이 됩니다.
파일을 불러온 뒤에는 이름으로 말을 걸어 보세요: “Serge, 이 페이지 좀 봐 줘.” 이름은 바로 그걸 위해 있습니다. 한 채팅에서 여러 스킬을 구분하는 데도 도움이 됩니다.
// 당신의 AI를 움직이는 skill
당신은 React, Vue, Angular 분야에서 10년 이상의 경력을 쌓은 시니어 프런트엔드 개발자 Lena이며, 기본적으로 TypeScript를 사용하고 접근성을 출발점으로 삼습니다. 사용자가 1년 후에도 읽을 수 있는 인터페이스 코드를 출시하도록 돕기 위해 활성화되었습니다.
// 구성
이 스킬에 담긴 내용
- 올바른 상태 패턴과 아키텍처를 갖춘 컴포넌트
- Figma-to-code, 픽셀 단위로 정확하고 반응형
- Core Web Vitals: LCP, INP, CLS 최적화
- WCAG 2.1 AA 접근성 및 전체 테스트 커버리지
빠르면서도 정확한 결과를 원하는 프런트엔드 개발자와 팀.
// 두 가지 방법
AI 안에서 바로 쓰거나, 한 번 다운로드하세요.
이 스킬만 파일로
$19 1회 결제
- 결제 후 다운로드해 어떤 AI 채팅에든 붙여 넣으세요
- 파일 하나, 업데이트 없음, 커넥터 없음
- 30일 환불 보장
이미 Library 또는 Both를 이용 중인가요? 이 상품은 포함되어 있어 파일을 따로 구매할 필요가 없습니다.
// 어시스턴트에게 맡기기
또는 AI가 이 스킬을 대신 설정하게 하세요.
kissmyskills.com/pages/connector 에 가서 "Lena - 프런트엔드 개발자 AI Skill" 스킬을 설정해 주세요 (handle: frontend-developer-skill)
Claude, ChatGPT, Claude Code, Cursor 또는 Codex에 붙여 넣으세요. AI가 KissMySkills 연결을 안내하고(약 3분, 7일 무료 체험) 스킬을 불러옵니다. AI가 읽을 내용 →
실제로 구매하는 것
Lena를 Claude에 추가하면 첫 prompt부터 프로덕션용 컴포넌트를 작성하는 시니어 프론트엔드 개발자를 만나게 됩니다 - React, Vue 3, Angular를 완전한 TypeScript로 지원하고, Figma-to-code 변환과 Lighthouse 감사 때마다 당황할 필요 없이 Core Web Vitals를 통과하는 UI를 제공합니다.
아키텍처 없는 컴포넌트는 만들지 않습니다. Lena는 단 하나의 요소를 작성하기 전에 적절한 상태 관리 패턴, 빌드 도구, 접근성 접근 방식을 파악합니다 - 빠르게 출시하는 것과 제대로 출시하는 것은 서로 반대가 아니기 때문입니다.
제공되는 기능
- → React(훅, 컨텍스트, suspense), Vue 3(Composition API), Angular 15+ - 전 과정에 걸친 완전한 TypeScript 타입 지정
- → Redux Toolkit, Zustand, Pinia 또는 NgRx를 활용한 상태 관리 - 기본값으로 정하지 않고 기술 스택에 맞게 적용
- → Figma/Sketch를 픽셀 단위로 정확한 반응형 코드로 변환 - Tailwind, CSS Modules 또는 Styled Components 사용
- → Vite, Webpack 5, Turbopack 빌드 파이프라인 구성 - 코드 분할, 트리 셰이킹, 청크 최적화
- → Core Web Vitals 최적화 - Lighthouse 감사 및 실제 사용자 모니터링 전략과 함께 LCP, INP, CLS 개선
- → WCAG 2.1 AA 준수 - 시맨틱 HTML, ARIA 역할, 키보드 탐색, 스크린 리더 테스트
- → Jest/Vitest + React Testing Library를 사용한 테스트, Playwright/Cypress E2E, Storybook 컴포넌트 문서
// 설치 방법
2분 이내
네 단계. 어떤 AI 채팅.
- 01파일 다운로드
결제 후 다운로드 링크가 이메일로 전송됩니다. .skill 파일을 저장하세요. Claude는 그대로 사용할 수 있습니다.
- 02AI 채팅 열기
이미 사용 중인 AI 채팅이면 무엇이든: Claude, ChatGPT, Gemini, Grok, Copilot 등.
- 03AI에 추가하기
Claude: Settings → Capabilities → Skills에서 .skill 파일을 업로드하세요. ChatGPT, Gemini 등: .skill 파일을 .zip 압축 파일처럼 열고 SKILL.md를 맞춤 지침이나 프로젝트 지침에 붙여넣으세요.
- 04작업 시작
귀하의 AI가 이제 전문가로 설정되었습니다. 해당 분야에 관해 무엇이든 질문해 보세요.
기술 지식이 필요하지 않습니다.
Library를 이용하면 다운로드할 것이 없습니다. AI를 한 번 연결한 뒤 "KissMySkills에서 Lena 불러와 줘"라고 요청하기만 하면 됩니다.
// faq
이 제품에 대한 질문
Lena 스킬은 어떤 기능을 하나요?+
Lena는 접근성, 성능, 유지 관리성을 기본으로 갖춘 프로덕션 수준의 컴포넌트를 첫 번째 prompt부터 React, Vue 3, Angular로 작성합니다. 한 번 Claude Projects에 불러오면 매 세션을 시작할 때마다 컨텍스트를 설명하지 않아도 설정이 완료된 프런트엔드 개발자를 사용할 수 있습니다.
이 스킬 파일은 어떻게 설치하나요?+
.skill 패키지를 다운로드하세요(SKILL.md가 포함되어 있습니다). 내용을 Claude Projects Instructions 또는 AI의 시스템 prompt에 붙여 넣고, 자신만의 컨텍스트를 추가한 다음 첫 세션을 시작하세요. Claude, ChatGPT 또는 시스템 prompt를 허용하는 모든 AI 채팅에서 사용할 수 있습니다.
이 스킬은 어떤 AI 도구에서 작동하나요?+
Claude(권장), ChatGPT 및 시스템 prompt를 허용하는 모든 AI 채팅에서 작동합니다. Claude Projects에서 가장 좋은 결과를 얻을 수 있습니다. 이 스킬은 Claude의 지시 따르기 기능에 맞게 최적화되어 있습니다.
이 다운로드에는 무엇이 포함되어 있나요?+
구매 후 즉시 제공되는 하나의 .skill 패키지입니다. 전체 SKILL.md 역할 설정과 실제 시나리오가 담긴 작업 예시 파일이 포함되어 있어, 이 스킬을 사용하기 전에 품질을 확인할 수 있습니다. 구독은 없으며, 영구적으로 소유할 수 있습니다.
AI를 전문화할 준비가 되셨나요?
이 상품과 그 밖의 2,500+개를 Claude, ChatGPT, Claude Code, Codex, Cursor 안에서. 언제든 해지할 수 있습니다.