popup-studio-ai/bkit-claude-code/starter

Name: starter
Author: popup-studio-ai

Claude Code and agent skill by popup-studio-ai/bkit-claude-code

Trust tier 3

community

Source check pending

Checking that the SKILL.md file is still in the repository.

Static web development for beginners — HTML/CSS/JS and Next.js App Router. Triggers: static website, portfolio, landing page, beginner

Install

npx vskill@latest install popup-studio-ai/bkit-claude-code/starter

SKILL.md

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)

Create project directory structure (HTML/CSS/JS or Next.js)
Generate package.json (when Next.js selected)
Create CLAUDE.md (Level: Starter specified)
Create docs/ folder structure (for PDCA documents)
Initialize the pipeline store — writeBkitMemory() in lib/pdca/status.js,

which writes .bkit/state/memory.json (the migrated path of .bkit-memory.json). This holds the project level and the 9-phase pipelineStatus, read by the pipeline Stop hooks for phases 5, 6 and 9. It is NOT where the PDCA phase lives — that is .bkit/state/pdca-status.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"

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 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

Security

Security scanPassed, 100 of 100Pattern checks on the skill's files.
Model reviewPassed

See the full security report

Quality evaluation

Task evaluationNot runNo evaluation yet. Run one in Skill Studio.

See evaluation results

Source

SKILL.md in the repositoryCheckingskills/starter/SKILL.md

Popularity

Repository stars: 536
Repository forks: 134
7-day trend score: 31

Stars and forks are for the whole GitHub repository, not this skill alone. Refreshed 10 May 2026, 5 months ago.

Works with

Any agent vskill installs to: 56 targets in all. These 39 have a page on this site.

Claude Code
Cursor
GitHub Copilot
Windsurf
Codex
Gemini CLI
Cline
Amp
Roo Code
Goose
Continue
Kilo Code
Junie
Trae
OpenHands
Qwen Code
AI Agent
Tabnine Chat
Sourcegraph Cody
Amazon Q
Firebase Genkit
Sweep
Devin
Phind
Mentat
Claude Desktop
Aider
GPT Pilot
Plandex
bolt.new
v0
Replit Agent
Anse
TypingMind
BetterChatGPT
LibreChat
Warp AI
Pieces
Fig AI

Embed badge

[![vskill VERIFIED](https://verified-skill.com/api/v1/skills/popup-studio-ai/bkit-claude-code/starter/badge)](https://verified-skill.com/skills/popup-studio-ai/bkit-claude-code/starter)

Something wrong with this skill or its page? Tell us.