init-web-skill

init-web은 웹앱 아이디어가 적힌 텍스트 파일을 읽고, AI 코딩 에이전트가 바로 개발을 시작할 수 있도록 두 개의 문서를 만들어 주는 스킬입니다.

• plan.md: 개발 계획서
• design.md: 디자인 설계서

학교 선생님들이 생성형 AI로 웹앱을 만들 때, 처음부터 코드를 바로 만들기보다 아이디어를 먼저 정리하고 개발 계획과 화면 설계를 잡는 용도로 사용할 수 있습니다.

또한 npm 패키지를 설치할 때 악성 패키지나 개인정보 탈취 목적 코드가 들어올 수 있다는 점을 고려해, 생성되는 문서에 패키지 설치 전 보안 점검 항목도 자동으로 포함합니다.

어떤 일을 하나요?

프로젝트 폴더에 idea.txt를 만들어 웹앱 아이디어를 적어 두면, AI 에이전트가 그 내용을 읽고 다음 두 파일을 생성합니다.

plan.md
design.md

idea.txt가 없으면 프로젝트 폴더 안의 다른 .txt 파일 중 아이디어가 적힌 파일을 찾아봅니다.

아이디어 내용이 부족하면 바로 문서를 만들지 않고, 완성도 있는 문서를 만들기 위해 필요한 질문을 먼저 합니다.

기본 개발 방식

이 스킬은 특별한 요청이 없으면 아래 조합을 기본값으로 사용합니다.

• React
• TypeScript
• Vite
• Vercel 배포

즉, 선생님이 “출석 체크 웹앱”, “퀴즈 웹앱”, “수업 활동 기록 웹앱” 같은 아이디어를 적어 두면, AI가 현대적인 프런트엔드 웹앱 기준으로 개발 계획서와 디자인 설계서를 만들어 줍니다.

보안 내용도 자동으로 들어갑니다

plan.md에는 npm 패키지 설치 전 확인해야 할 공급망 보안 항목이 포함됩니다.

예를 들면 다음과 같은 내용입니다.

• 꼭 필요한 패키지만 최소한으로 설치하기
• 패키지 이름을 정확히 확인해 typo-squatting 패키지 피하기
• npm view <패키지명>으로 저장소, 라이선스, 관리자, 최근 배포 이력 확인하기
• 낯선 패키지는 설치 전 GitHub 저장소와 코드 구조 확인하기
• npm install --package-lock-only로 먼저 lock 파일 변화를 확인하기
• npm audit로 알려진 취약점 확인하기
• .env, API 키, 토큰, 학생 개인정보 파일을 Git에 올리지 않기
• 실제 학생 개인정보를 AI 프롬프트나 예시 데이터에 넣지 않기

design.md에는 개인정보가 화면에 불필요하게 노출되지 않도록 하는 UX 주의사항도 포함됩니다.

자동 설치

자동 설치는 npx 명령어를 사용합니다. 따라서 컴퓨터에 Node.js가 설치되어 있어야 합니다.

설치 여부 확인:

node -v
npm -v
npx -v

설치되어 있지 않다면 Node.js LTS 버전을 먼저 설치하세요.

에이전트별 자동 설치 명령어

Codex

npx init-web-skill codex

설치 위치:

~/.codex/skills/init-web

CODEX_HOME을 사용하는 경우:

$CODEX_HOME/skills/init-web

Claude Code

npx init-web-skill claude

설치 위치:

~/.claude/skills/init-web

사용할 때:

/init-web

Antigravity

npx init-web-skill antigravity

설치 위치:

~/.gemini/antigravity/skills/init-web

Cline

npx init-web-skill cline

설치 위치:

~/Documents/Cline/Rules/init-web.md

OpenClaw

npx init-web-skill openclaw

설치 위치:

~/.openclaw/skills/init-web

Cursor

Cursor는 이 설치 도구에서 확인된 전역 SKILL.md 스킬 폴더가 없습니다. 대신 아래 명령은 범용 지침 파일을 설치하고, Cursor User Rules에 넣는 방법을 안내합니다.

npx init-web-skill cursor

설치되는 범용 지침 위치:

~/.agents/AGENTS.md

한 번에 모두 설치

여러 에이전트를 함께 쓰는 경우:

npx init-web-skill all

설치 위치만 미리 확인:

npx init-web-skill all --dry-run

기존 설치를 덮어쓰기:

npx init-web-skill all --force

사용 방법

1. 웹앱을 만들 프로젝트 폴더를 만듭니다.
2. 그 폴더 안에 idea.txt 파일을 만듭니다.
3. 만들고 싶은 웹앱 아이디어를 자유롭게 적습니다.

예시:

학생들이 수업 후 자기평가를 입력하는 웹앱.
교사는 학생별 응답을 확인하고 간단한 통계를 볼 수 있어야 함.
로그인은 없어도 되고, 첫 버전은 한 반에서만 사용.

그 다음 AI 에이전트에게 이렇게 요청합니다.

Codex 예시

$init-web 스킬을 사용해서 이 프로젝트의 아이디어 txt를 읽고 plan.md와 design.md를 만들어줘.

또는:

Use $init-web to read the project idea text and create plan.md and design.md.

Claude Code 예시

/init-web

일반 에이전트 예시

init-web 스킬을 사용해서 이 프로젝트의 아이디어 txt를 읽고 plan.md와 design.md를 만들어줘.

수동 설치

Node.js를 설치하지 않았거나, npx 명령어 사용이 어려운 경우에는 수동으로 설치할 수 있습니다.

이 저장소에서 실제 스킬은 init-web/ 폴더입니다.

init-web/
├── SKILL.md
└── agents/
    └── openai.yaml

이 폴더를 에이전트별 스킬 폴더에 그대로 복사하면 됩니다.

Codex 수동 설치

mkdir -p ~/.codex/skills
cp -R init-web ~/.codex/skills/init-web

CODEX_HOME을 사용하는 경우:

mkdir -p "$CODEX_HOME/skills"
cp -R init-web "$CODEX_HOME/skills/init-web"

Claude Code 수동 설치

mkdir -p ~/.claude/skills
cp -R init-web ~/.claude/skills/init-web

Antigravity 수동 설치

mkdir -p ~/.gemini/antigravity/skills
cp -R init-web ~/.gemini/antigravity/skills/init-web

OpenClaw 수동 설치

mkdir -p ~/.openclaw/skills
cp -R init-web ~/.openclaw/skills/init-web

Cline 수동 설치

Cline은 스킬 폴더 대신 전역 Rules 파일을 사용합니다.

mkdir -p ~/Documents/Cline/Rules
cp init-web/SKILL.md ~/Documents/Cline/Rules/init-web.md

Cursor 수동 설치

Cursor에서는 init-web/SKILL.md 내용을 Cursor User Rules에 붙여 넣어 사용하는 방식을 권장합니다.

또는 범용 AGENTS.md 파일로 설치할 수 있습니다.

mkdir -p ~/.agents
cp init-web/SKILL.md ~/.agents/AGENTS.md

생성되는 plan.md 내용

plan.md에는 보통 다음 내용이 들어갑니다.

• 프로젝트 개요
• 목표 사용자와 해결하려는 문제
• MVP 범위
• 주요 기능
• 기술 스택
• 폴더 구조
• 데이터 모델과 상태 관리
• 화면별 구현 계획
• 개발 단계
• 검증 계획
• Vercel 배포 계획
• npm 패키지 설치 및 공급망 보안 점검
• 리스크와 추가 확인 질문

생성되는 design.md 내용

design.md에는 보통 다음 내용이 들어갑니다.

• 디자인 목표
• 사용자 경험 원칙
• 정보 구조
• 주요 사용자 흐름
• 화면 설계
• 컴포넌트 설계
• 색상, 글꼴, 간격 등 비주얼 시스템
• 반응형 디자인
• 접근성
• 빈 상태, 로딩, 오류, 성공 상태
• 개인정보 및 보안 UX
• 구현 시 주의사항

업데이트 방법

자동 설치로 업데이트:

npx init-web-skill all --force

수동 설치로 업데이트하려면 기존 폴더를 지우고 새 init-web/ 폴더를 다시 복사하면 됩니다.

예: Codex

rm -rf ~/.codex/skills/init-web
cp -R init-web ~/.codex/skills/init-web

npm 패키지

이 스킬은 npm에 배포되어 있습니다.

npx init-web-skill --help

패키지 이름:

init-web-skill

저장소 구성

init-web-skill/
├── init-web/                 # 실제 스킬 폴더
│   ├── SKILL.md
│   └── agents/
│       └── openai.yaml
├── bin/
│   └── install-init-web.js   # npx 자동 설치 스크립트
├── package.json
├── README.md
└── skill-distribution-guide.md

라이선스

MIT