/starter
Static web development for beginners — HTML/CSS/JS and Next.js App Router. Triggers: static website, portfolio, landing page, beginner
$ npx -y skills add popup-studio-ai/bkit-claude-code --skill starter --agent claude-codeHow it fires
How this skill gets triggered: by you, by Claude, or both.
- Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.Auto-invocation is when the right skill fires by itself at the right moment, driven by a FLOW.md router and a hook, instead of you invoking it by name. It is the difference between a skill being installed and a skill actually getting used.Read the full definition →
- You can call itInvoke it directly when you want it.
- Slash command
/starter
Context preview
The summary Claude sees to decide when to auto-load this skill.
Static web development for beginners — HTML/CSS/JS and Next.js App Router. Triggers: static website, portfolio, landing page, beginner
SKILL.md
starter.SKILL.mdname: starter
classification: capability
classification-reason: Pattern guidance may overlap with model's built-in knowledge as it improves
deprecation-risk: medium
effort: medium
description: |
Static web development for beginners — HTML/CSS/JS and Next.js App Router.
Triggers: static website, portfolio, landing page, beginner
argument-hint: "[init|guide|help]"
agent: bkit: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 CLAUDE.md (Level: Starter specified) 4. Create docs/ folder structure (for PDCA documents) 5. Initialize .bkit-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)
<!-- 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)
/* 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)
// 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)
// 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"
bkit Features for Starter Level (v1.5.1)
Output Style: bkit-learning (Recommended)
For the best learning experience, activate the learning output style:
/output-style bkit-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)
bkit agents automatically remember your learning progress acr
Read more
name: starter
classification: capability
classification-reason: Pattern guidance may overlap with model's built-in knowledge as it improves
deprecation-risk: medium
effort: medium
description: |
Static web development for beginners — HTML/CSS/JS and Next.js App Router.
Triggers: static website, portfolio, landing page, beginner
argument-hint: "[init|guide|help]"
agent: bkit: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 CLAUDE.md (Level: Starter specified) 4. Create docs/ folder structure (for PDCA documents) 5. Initialize .bkit-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)
<!-- 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)
/* 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)
// 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)
// 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"
bkit Features for Starter Level (v1.5.1)
Output Style: bkit-learning (Recommended)
For the best learning experience, activate the learning output style:
/output-style bkit-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)
bkit agents automatically remember your learning progress acr
A Claude Code plugin that verifies AI-generated code against its own design specs. Three commands. Anyone — even someone vibe-coding for the first time — can ship robust, production-quality software.
Repo: popup-studio-ai/bkit-claude-code
Other skills on bkit.
- /audit
View audit logs, decision traces, and session history for AI transparency. ACTION_TYPES (19 entries) include PDCA events (phase_transition, gate_passed/failed, agent_spawned/completed/failed, rollback_executed, destructive_blocked) and Sprint events (sprint_paused,
Open skill - /bkend-auth
bkend.ai authentication — email/social login, JWT tokens, RBAC, session management. Triggers: bkend auth, bkend login, bkend signup, bkend JWT, bkend RBAC
Open skill - /bkend-cookbook
bkend.ai project tutorials (todo to SaaS) and common error troubleshooting. Triggers: bkend tutorial, bkend cookbook, bkend troubleshooting
Open skill - /bkend-data
bkend.ai database — CRUD, column types, filtering, sorting, relations, indexing. Triggers: bkend table, bkend CRUD, bkend column, bkend relation, bkend data
Open skill - /bkend-quickstart
bkend.ai onboarding — MCP setup, resource hierarchy, tenant/user model, first project. Triggers: bkend quickstart, bkend onboarding, bkend setup, bkend MCP
Open skill - /bkend-storage
bkend.ai file storage — upload (presigned URL), download (CDN), visibility levels, buckets. Triggers: bkend file, bkend upload, bkend download, bkend storage, bkend presigned URL
Open skill