Agent Skill
2/7/2026

moai-platform-stitch

Google Stitch MCP integration for AI-powered UI/UX design generation. Use when generating UI designs from text, extracting design context from screens, exporting screen code and images, or managing Stitch projects and screens.

T
taewook486
0GitHub Stars
1Views
npx skills add taewook486/arVix-portal

SKILL.md

Namemoai-platform-stitch
DescriptionGoogle Stitch MCP integration for AI-powered UI/UX design generation. Use when generating UI designs from text, extracting design context from screens, exporting screen code and images, or managing Stitch projects and screens.

arXiv 논문 포털

arXiv 논문을 검색하고, AI로 분석하며, 북마크를 관리할 수 있는 개인용 웹 애플리케이션입니다.

주요 기능

  • 논문 검색: arXiv API를 통한 논문 검색 및 카테고리 필터링
  • 검색 결과 더보기: 페이지네이션을 통한 추가 결과 로드
  • 유사 논문 검색: Gemini AI가 논문 내용을 분석하여 유사한 논문 검색 키워드 생성
  • 논문 상세 보기: 제목, 저자, 초록, 카테고리, PDF 링크, arXiv ID 제공
  • 한글 카테고리 태그: 100개 이상의 arXiv 카테고리를 한글로 표시
  • 초록 번역: Gemini AI를 활용한 영문 초록 한국어 번역
  • AI 분석: 논문 요약, 핵심 포인트 추출, 연구 의의 분석 (DB 캐싱)
  • 인포그래픽 생성: AI 기반 논문 시각화 이미지 생성 (Supabase Storage)
  • 북마크 관리: 브라우저 localStorage 기반 개인화 북마크
  • 버킷 (읽기 목록): 관심 논문을 버킷에 담아 관리
  • 결과 캐싱: 번역, 분석, 인포그래픽 결과를 DB에 저장하여 재사용

기술 스택

  • 프레임워크: Next.js 14 (App Router)
  • 언어: TypeScript
  • 스타일링: Tailwind CSS
  • AI: Google Gemini API
    • gemini-3-flash-preview: 텍스트 분석 및 번역
    • gemini-3-pro-image-preview: 인포그래픽 생성
  • 데이터베이스: PostgreSQL (번역/분석 캐싱)
  • 스토리지: Supabase Storage (인포그래픽 이미지)
  • 북마크 저장소: 브라우저 localStorage

시작하기

사전 요구사항

  • Node.js 18 이상
  • Google Gemini API 키

설치

# 저장소 클론
git clone git@github.com:revfactory/arVix-portal.git
cd arVix-portal

# 의존성 설치
npm install

환경 변수 설정

프로젝트 루트에 .env.local 파일을 생성하고 다음 내용을 추가합니다:

GEMINI_API_KEY=your_gemini_api_key
DATABASE_URL=postgresql://user:password@host:port/database
NEXT_PUBLIC_SUPABASE_URL=your_supabase_project_url
NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY=your_supabase_publishable_key
변수필수설명
GEMINI_API_KEYOGoogle Gemini API 키
DATABASE_URLOPostgreSQL 연결 문자열 (번역/분석 캐싱용)
NEXT_PUBLIC_SUPABASE_URLOSupabase 프로젝트 URL (스토리지용)
NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEYOSupabase Publishable 키

Supabase 설정

  1. Supabase에서 프로젝트 생성
  2. SQL Editor에서 supabase-schema.sql 실행
  3. Storage에서 infographics 버킷 생성 (Public 체크)

Storage Policy 설정

infographics 버킷에 다음 정책을 추가합니다:

1. SELECT (읽기) 정책 - 모든 사용자 허용

-- Policy name: Public Read Access
CREATE POLICY "Public Read Access"
ON storage.objects FOR SELECT
USING (bucket_id = 'infographics');

2. INSERT (업로드) 정책 - 모든 사용자 허용

-- Policy name: Public Upload Access
CREATE POLICY "Public Upload Access"
ON storage.objects FOR INSERT
WITH CHECK (bucket_id = 'infographics');

3. UPDATE (수정) 정책 - 모든 사용자 허용

-- Policy name: Public Update Access
CREATE POLICY "Public Update Access"
ON storage.objects FOR UPDATE
USING (bucket_id = 'infographics');

또는 Supabase 대시보드에서 설정:

  1. Storage → infographics 버킷 → Policies 탭
  2. "New Policy" 클릭
  3. "For full customization" 선택
  4. 각각 SELECT, INSERT, UPDATE에 대해 정책 추가
    • Policy name: 위 이름 사용
    • Allowed operation: SELECT / INSERT / UPDATE
    • Target roles: 체크 안함 (모든 사용자)
    • USING/WITH CHECK expression: bucket_id = 'infographics'

참고: 북마크는 브라우저 localStorage에 저장됩니다. 번역, AI 분석, 인포그래픽은 PostgreSQL에 캐싱되어 재사용됩니다.

실행

# 개발 서버 실행
npm run dev

브라우저에서 http://localhost:3000을 열어 확인합니다.

프로젝트 구조

arVix-portal/
├── src/
│   ├── app/
│   │   ├── layout.tsx              # 루트 레이아웃
│   │   ├── page.tsx                # 메인 페이지 (검색)
│   │   ├── paper/[id]/page.tsx     # 논문 상세 페이지
│   │   ├── bookmarks/page.tsx      # 북마크 목록 페이지
│   │   └── api/
│   │       ├── arxiv/route.ts       # arXiv API 프록시
│   │       ├── analyze/route.ts     # AI 분석 API (캐싱)
│   │       ├── translate/route.ts   # 번역 API (캐싱)
│   │       ├── infographic/route.ts # 인포그래픽 생성 API
│   │       ├── similar-search/route.ts # 유사 논문 검색어 생성 API
│   │       └── paper-cache/route.ts # 캐시 조회 API
│   ├── components/
│   │   ├── Navigation.tsx          # 네비게이션 바
│   │   ├── SearchBar.tsx           # 검색 입력
│   │   ├── PaperCard.tsx           # 논문 카드
│   │   ├── PaperList.tsx           # 논문 목록 (그리드)
│   │   ├── CategoryFilter.tsx      # 카테고리 필터
│   │   ├── BookmarkButton.tsx      # 북마크 버튼
│   │   ├── BucketButton.tsx        # 버킷(읽기 목록) 버튼
│   │   ├── AIAnalysis.tsx          # AI 분석 결과
│   │   ├── InfographicGenerator.tsx # 인포그래픽 생성기
│   │   └── MarkdownView.tsx        # 마크다운 렌더러
│   ├── lib/
│   │   ├── arxiv.ts                # arXiv API 유틸리티
│   │   ├── ai.ts                   # AI 분석 유틸리티
│   │   ├── bookmarks.ts            # 북마크 관리 (localStorage)
│   │   ├── bucket.ts               # 버킷(읽기 목록) 관리 (localStorage)
│   │   ├── db.ts                   # PostgreSQL 연결 및 캐시 함수
│   │   └── storage.ts              # Supabase Storage 유틸리티
│   └── types/
│       └── paper.ts                # 타입 정의
└── public/
    └── infographics/               # 생성된 인포그래픽 저장

주요 카테고리

카테고리설명
cs.AI인공지능
cs.LG머신러닝
cs.CL자연어처리
cs.CV컴퓨터비전
cs.NE신경망 및 진화연산
stat.ML통계적 머신러닝

라이선스

MIT License

Skills Info
Original Name:moai-platform-stitchAuthor:taewook486