chore(rebar): Pier_T_rebar 작업 폴더 초기 구성 및 외부 의존 파일 통합
- Code\rebar_pipeline, review_pipeline, pier-program을 정션에서 실제 폴더로 전환 - Code\rhino_mcp 및 CLAUDE_rhino배경.md 추가, .mcp.json은 PYTHONPATH로 새 위치 사용 - pier-program 내부 .git 제거(이력은 backup\pier-program_20261028.bundle에 보관) - worktree 가이드 반영(CLAUDE.local.md, HANDOFF.md) - D:\Rhino-MCP 경로 참조를 새 위치로 치환 Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
This commit is contained in:
ahnyongjooandClaude Sonnet 5.5 committed
commit
964a841de1
3978 files changed
+58013356
No files matched your search
@@ -0,0 +1,292 @@
|
||||
---
|
||||
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 for beginners — HTML/CSS/JS and Next.js App Router.
|
||||
Triggers: static website, portfolio, landing page, beginner, 정적 웹, 초보자, init starter.
|
||||
argument-hint: "[init|guide|help]"
|
||||
agent: hmcmkit: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}"
|
||||
---
|
||||
|
||||
# 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 agents.md (Level: Starter specified)
|
||||
4. Create docs/ folder structure (for PDCA documents)
|
||||
5. Initialize .hmcmkit-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/
|
||||
└── README.md
|
||||
```
|
||||
|
||||
### Option B: Next.js
|
||||
|
||||
```
|
||||
project/
|
||||
├── src/
|
||||
│ ├── app/
|
||||
│ │ ├── layout.tsx # Common layout
|
||||
│ │ ├── page.tsx # Main page
|
||||
│ │ └── about/
|
||||
│ │ └── page.tsx # About page
|
||||
│ └── components/ # Reusable components
|
||||
├── public/ # Static files
|
||||
├── docs/ # PDCA documents
|
||||
├── package.json
|
||||
├── tailwind.config.js
|
||||
└── README.md
|
||||
```
|
||||
|
||||
## Core Concept Explanations
|
||||
|
||||
### HTML (Web Page Structure)
|
||||
|
||||
```html
|
||||
<!-- Basic structure -->
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>My Website</title>
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<header>Header</header>
|
||||
<main>Main content</main>
|
||||
<footer>Footer</footer>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
### CSS (Styling Web Pages)
|
||||
|
||||
```css
|
||||
/* Basic styles */
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Center alignment */
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
/* Responsive (mobile support) */
|
||||
@media (max-width: 768px) {
|
||||
.container {
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Next.js App Router (Creating Pages)
|
||||
|
||||
```tsx
|
||||
// app/page.tsx - Main page
|
||||
export default function Home() {
|
||||
return (
|
||||
<main className="container mx-auto p-4">
|
||||
<h1 className="text-3xl font-bold">
|
||||
Welcome!
|
||||
</h1>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
// app/about/page.tsx - About page
|
||||
// URL: /about
|
||||
export default function About() {
|
||||
return (
|
||||
<div className="container mx-auto p-4">
|
||||
<h1>About</h1>
|
||||
<p>I am ...</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### Tailwind CSS (Quick Styling)
|
||||
|
||||
```tsx
|
||||
// Frequently used classes
|
||||
<div className="
|
||||
container // Center alignment
|
||||
mx-auto // Auto left/right margin
|
||||
p-4 // Padding 16px
|
||||
text-center // Center text
|
||||
text-xl // Large text
|
||||
font-bold // Bold text
|
||||
bg-blue-500 // Blue background
|
||||
text-white // White text
|
||||
rounded-lg // Rounded corners
|
||||
hover:bg-blue-600 // Color change on hover
|
||||
">
|
||||
```
|
||||
|
||||
## Deployment Methods
|
||||
|
||||
### GitHub Pages (Free)
|
||||
|
||||
```
|
||||
1. Create GitHub repository
|
||||
2. Push code
|
||||
3. Settings → Pages → Source: main branch
|
||||
4. Access at https://username.github.io/repo-name
|
||||
```
|
||||
|
||||
### Vercel (Recommended for Next.js)
|
||||
|
||||
```
|
||||
1. Sign up at vercel.com (GitHub integration)
|
||||
2. "New Project" → Select repository
|
||||
3. Click "Deploy"
|
||||
4. URL automatically generated
|
||||
```
|
||||
|
||||
## Limitations
|
||||
|
||||
```
|
||||
❌ Login/Registration (requires server)
|
||||
❌ Data storage (requires database)
|
||||
❌ Admin pages (requires backend)
|
||||
❌ Payment features (requires backend)
|
||||
```
|
||||
|
||||
## When to Upgrade
|
||||
|
||||
Move to **Dynamic Level** if you need:
|
||||
|
||||
```
|
||||
→ "I need login functionality"
|
||||
→ "I want to store data"
|
||||
→ "I need an admin page"
|
||||
→ "I want users to communicate with each other"
|
||||
```
|
||||
|
||||
## hmcmkit Features for Starter Level (v1.5.1)
|
||||
|
||||
### Output Style: hmcmkit-learning (Recommended)
|
||||
|
||||
For the best learning experience, activate the learning output style:
|
||||
|
||||
```
|
||||
/output-style hmcmkit-learning
|
||||
```
|
||||
|
||||
This provides:
|
||||
- Learning points after each task explaining what you did and why
|
||||
- TODO(learner) markers encouraging hands-on practice
|
||||
- Concept explanations adjusted for beginner difficulty
|
||||
|
||||
### Agent Memory (Auto-Active)
|
||||
|
||||
hmcmkit agents automatically remember your learning progress across sessions.
|
||||
No setup needed — your `starter-guide` agent uses `user` scope memory,
|
||||
so learning context persists even across different projects.
|
||||
|
||||
### Agent Teams
|
||||
|
||||
Agent Teams is not available for Starter level projects.
|
||||
When you upgrade to Dynamic level, you unlock 2-teammate parallel PDCA mode.
|
||||
|
||||
---
|
||||
|
||||
## Common Mistakes
|
||||
|
||||
| Mistake | Solution |
|
||||
|---------|----------|
|
||||
| Image not showing | Check path (`./images/photo.jpg`) |
|
||||
| CSS not applied | Check link tag path |
|
||||
| Page navigation not working | Check href path (`./about.html`) |
|
||||
| Broken on mobile | Check `<meta name="viewport">` tag |
|
||||
Reference in new issue
Block a user