gemini-frontend-assistant

mattnigh

업데이트됨 5 days ago

3 조회

기타reactaidesign

정보

이 스킬은 Gemini CLI를 사용하여 텍스트 설명이나 이미지로부터 프론트엔드 UI 코드를 생성합니다. React 컴포넌트를 Tailwind CSS와 함께 만드는 데 특화되어 있어, 스크린샷이나 디자인 컨셉을 실제 작동하는 코드로 변환하는 데 이상적입니다. 개발자들은 신속한 프로토타이핑, 스타일링 지원, 코드 리팩토링 작업에 이를 활용할 수 있습니다.

빠른 설치

Claude Code

GitHub 저장소

mattnigh/skills_collection

경로: collection/MrOwaisAbdullah__ai-humanoid-robotics__claude__skills__gemini-frontend-assistant__SKILL.md

연관 스킬

chatbot-widget-creator

기타

이 스킬은 프론트엔드 통합용으로 제작 준비가 완료된 ChatGPT 스타일 챗봇 위젯을 생성합니다. 무한 재렌더링 방지, 텍스트 선택 "Ask AI" 기능, RAG 백엔드 및 SSE 스트리밍과의 즉시 통합 등 핵심 기능을 포함합니다. 검증되고 모니터링되는 채팅 인터페이스를 신속하게 배포하는 데 사용하세요.

스킬 보기

chatbot-widget-creator

기타

이 스킬은 일반적인 프론트엔드 문제에 대한 내장 솔루션을 갖춘 프로덕션 준비 완료 ChatGPT 스타일 챗봇 위젯을 생성합니다. 무한 재렌더링 방지, 텍스트 선택 "Ask AI" 기능, 스트리밍 SSE 및 RAG 백엔드에 대한 통합 지원을 제공합니다. 웹 애플리케이션에서 모니터링 가능한 고성능 채팅 인터페이스를 신속하게 구현할 수 있습니다.

스킬 보기

react-patterns

기타

이 스킬은 서버 컴포넌트, 액션, `useOptimistic` 및 서스펜스와 같은 동시성 기능을 포함한 React 19의 최신 패턴에 대한 전문적인 지침을 제공합니다. 컴포넌트 아키텍처, 상태 관리, 성능 최적화, 그리고 현대적인 TypeScript 개발 구현에 활용하세요. React 19 개발 관련 질문이나 코드 리뷰를 위한 필수 리소스입니다.

스킬 보기

typescript-docs

기타

이 스킬은 JSDoc과 TypeDoc을 활용해 API 레퍼런스, 아키텍처 결정 기록(ADR), 프레임워크별 예제를 포함한 포괄적인 TypeScript 문서를 생성합니다. 모듈 자동 문서화, 다양한 대상에 맞는 다층적 문서 작성, NestJS, Express, React, Angular, Vue 프로젝트의 문서 구축에 활용할 수 있습니다.

스킬 보기