Help us improve
Share bugs, ideas, or general feedback.
From bkit — AI Native Development OS
Guides beginners through static web development with HTML/CSS/JS or Next.js App Router. Initializes project structure, offers dev guidance, and answers basic questions.
npx claudepluginhub popup-studio-ai/bkit-claude-code --plugin bkitHow this skill is triggered — by the user, by Claude, or both
Slash command
/bkit:starter [init|guide|help][init|guide|help]bkit:starter-guideThis skill is limited to the following tools:
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
| Action | Description | Example |
Creates personalized portfolio web projects for beginners using Next.js 16, TypeScript, Tailwind, shadcn/ui, and Zustand, customized by MBTI, profession, and style inputs via interactive prompts.
Guides creation of production-ready Power Pages code sites as SPAs using React, Angular, Vue, or Astro, from requirements discovery to deployment with live dev server previews and git commits.
Scaffolds new projects from user ideas: asks for requirements and tech preferences, recommends stacks with reasons, initializes via official CLI tools like create-next-app or uv init, configures structure/deps/entry code, verifies execution, suggests next skills.
Share bugs, ideas, or general feedback.
| Action | Description | Example |
|---|---|---|
init | Project initialization (/init-starter feature) | /starter init my-portfolio |
guide | Display development guide | /starter guide |
help | Beginner help | /starter help |
HTML5 → Web page structure
CSS3 → Styling
JavaScript → Dynamic features (optional)
Next.js 14+ → React-based framework
Tailwind CSS → Utility CSS
TypeScript → Type safety (optional)
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/
├── 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
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
<!-- 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>
/* 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;
}
}
// 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>
);
}
// 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
">
1. Create GitHub repository
2. Push code
3. Settings → Pages → Source: main branch
4. Access at https://username.github.io/repo-name
1. Sign up at vercel.com (GitHub integration)
2. "New Project" → Select repository
3. Click "Deploy"
4. URL automatically generated
❌ Login/Registration (requires server)
❌ Data storage (requires database)
❌ Admin pages (requires backend)
❌ Payment features (requires backend)
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"
For the best learning experience, activate the learning output style:
/output-style bkit-learning
This provides:
bkit 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 is not available for Starter level projects. When you upgrade to Dynamic level, you unlock 2-teammate parallel PDCA mode.
| 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 |