starter

这段内容是审核时保存的快照。外部来源才是完整且最新的版本。

---
name: starter
classification: capability
classification-reason: Pattern guidance may overlap with model's built-in knowledge as it improves
deprecation-risk: medium
description: |
  Static web development skill for beginners and non-developers.
  Covers HTML/CSS/JavaScript and Next.js App Router basics.

  Project initialization with "init starter" or "starter init".

  Use proactively when user is a beginner or wants a simple static website.

  Triggers: static website, portfolio, landing page, HTML CSS, beginner, first website,
  simple web, personal site, init starter, starter init,
  정적 웹, 포트폴리오, 랜딩페이지, 초보자, 첫 웹사이트, 간단한 웹,
  静的サイト, ポートフォリオ, 初心者, 静态网站, 个人网站, 初学者,
  sitio web estático, portafolio, página de inicio, principiante, primer sitio web,
  site web statique, portfolio, page d'accueil, débutant, premier site web,
  statische Website, Portfolio, Landingpage, Anfänger, erste Website,
  sito web statico, portfolio, pagina di destinazione, principiante, primo sito web

  Do NOT use for: fullstack apps with backend, authentication features, or database needs.
argument-hint: "[init|guide|help]"
agent: rkit:starter-guide
allowed-tools:
  - Read
  - Write
  - Edit
  - Glob
  - Grep
  - WebSearch
  - WebFetch
user-invocable: true
imports:
  - ${PLUGIN_ROOT}/templates/design-starter.template.md
next-skill: phase-1-schema
pdca-phase: plan
task-template: "[Init-Starter] {feature}"
---

<!-- BEGIN: cycle3-body-neutral -->

## 0. 문서 구조 (본 SKILL의 세 층)

1. **도메인 본문 (§1 ~ §N)**: 이 SKILL의 프로토콜.
   잠금 어휘 사용 0건이 `verify-policy --check body-neutrality`로 자동 검증됩니다.
2. **방법론 본문 — 도메인 중립**: Cycle 3에서 `<!-- BEGIN: cycle3-body-neutral -->` ~ `<!-- END: cycle3-body-neutral -->` 마커로 감싸진 영역.
3. **도메인 예시 부록 (§A)**: MCU/MPU/WPF 도메인별 사례.
   SoT(`policies/locked-vocab.json`)에서 `scripts/gen-locked-vocab.mjs`가 자동 생성합니다.

직접 부록을 편집하지 마세요 — `node scripts/gen-locked-vocab.mjs`로 재생성됩니다.

---

# Beginner (Starter) Skill

## Actions

| Action | Description | Example |
|--------|-------------|---------|
| `init` | Project initialization (/init-starter feature) | `/starter init my-portfolio` |
| `guide` | Display development guide | `/starter guide` |
| `help` | Beginner help | `/starter help` |

### init (Project Initialization)
1. Create project directory structure (HTML/CSS/JS or Next.js)
2. Generate package.json (when Next.js selected)
3. Create CLAUDE.md (Level: Starter specified)
4. Create docs/ folder structure (for PDCA documents)
5. Initialize .rkit/state/memory.json

### guide (Development Guide)
- Analyze current project state
- Suggest next steps appropriate for Starter level
- Phase 1-3 focused Pipeline guide

### help (Beginner Help)
- Explain HTML/CSS/JS basic concepts
- Answer frequently asked questions
- Provide example code

## Target Audience

- Those learning programming for the first time
- Those who want to create a simple website
- Those who need a portfolio site

## Tech Stack

### Option A: Pure HTML/CSS/JS (For Complete Beginners)

```
HTML5        → Web page structure
CSS3         → Styling
JavaScript   → Dynamic features (optional)
```

### Option B: Next.js (Using Framework)

```
Next.js 14+  → React-based framework
Tailwind CSS → Utility CSS
TypeScript   → Type safety (optional)
```

### Language Tier Guidance (v1.3.0)

> **Recommended**: Tier 1 languages only (Python, TypeScript, JavaScript)
>
> Starter level focuses on AI-Native development with maximum AI tool support.

| Tier | Allowed | Reason |
|------|---------|--------|
| Tier 1 | ✅ Yes | Full AI support, Vibe Coding optimized |
| Tier 2 | ⚠️ Limited | Consider Dynamic level instead |
| Tier 3-4 | ❌ No | Upgrade to Dynamic/Enterprise |

## Project Structure

### Option A: HTML/CSS/JS

```
project/
├── index.html          # Main page
├── about.html          # About page
├── css/
│   └── style.css       # Styles
├── js/
│   └── main.js         # JavaScript
├── images/             # Image files
├── docs/               # PDCA documents
│   ├── 01-plan/
│   └── 02-design/
└