Adoption

Agent Skills are supported by leading AI development tools.

VS Code Gemini CLI GitHub Goose Amp Cursor Claude Code Letta OpenCode Claude OpenAI Codex Factory VS Code Gemini CLI GitHub Goose Amp Cursor Claude Code Letta OpenCode Claude OpenAI Codex Factory

popup-studio-ai/starter

Name: starter
Author: popup-studio-ai

skills/starter/SKILL.md

npx skillsauth add popup-studio-ai/bkit-claude-code starter

Clean

TrivyContainer and dependency vulnerability scanner

Clean

SemgrepStatic code analysis for vulnerabilities

Clean

mcp-scan (Snyk)Model Context Protocol security validation

Skipped

Snyk (dep)Open source security scanning

Skipped

Socket.devSupply chain security analysis

Skipped

VirusTotalMulti-engine malware detection

Skipped

CrowdStrikeAdvanced threat intelligence

Skipped

OSV-ScannerOpen Source Vulnerability database check

Skipped

OWASP Dep-Check

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

popup-studio-ai/starter

skills/starter/SKILL.md

Static web development for beginners — HTML/CSS/JS and Next.js App Router. Triggers: static website, portfolio, landing page, beginner, 정적 웹, 초보자, init starter.

510 stars

development

Updated Apr 18, 2026

$ install --global

skillsauth

npx skillsauth add popup-studio-ai/bkit-claude-code starter

Install this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.

Security Scan Results

3 of 9 scanners reported clean

Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.

Scanners Passed

Scanners in report

Clean

TrivyContainer and dependency vulnerability scanner

95%

Clean

SemgrepStatic code analysis for vulnerabilities

95%

Clean

mcp-scan (Snyk)Model Context Protocol security validation

95%

Skipped

Snyk (dep)Open source security scanning

50%

Skipped

Socket.devSupply chain security analysis

50%

Skipped

VirusTotalMulti-engine malware detection

50%

Skipped

CrowdStrikeAdvanced threat intelligence

50%

Skipped

OSV-ScannerOpen Source Vulnerability database check

50%

Skipped

OWASP Dep-Check

50%

Last scanned: Apr 18, 2026, 6:24 AM43.9s1 file scanned

SKILL.md

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:: |
Triggers:: static website, portfolio, landing page, beginner, 정적 웹, 초보자, init starter.
argument-hint:: [init|guide|help]
agent:: bkit:starter-guide
user-invocable:: true
next-skill:: phase-1-schema
pdca-phase:: plan
task-template:: [Init-Starter] {feature}

Beginner (Starter) Skill

Actions

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

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)

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

Related Skills

popup-studio-ai/sprint

testing

VerifiedTrustedCommunity

Sprint Management — generic sprint capability for ANY bkit user. 16 sub-actions: init, start, status, watch, phase, iterate, qa, report, archive, list, feature, pause, resume, fork, help, master-plan. Triggers: sprint, sprint start, sprint init, sprint status, sprint list, 스프린트, 스프린트 시작, 스프린트 상태, スプリント, スプリント開始, スプリント状態, 冲刺, 冲刺开始, 冲刺状态, sprint, iniciar sprint, estado sprint, sprint, demarrer sprint, statut sprint, Sprint, Sprint starten, Sprint Status, sprint, avviare sprint, stato sprint, master plan, multi-sprint plan, sprint master plan, 마스터 플랜, 멀티 스프린트 계획, 스프린트 마스터 플랜, マスタープラン, マルチスプリント計画, スプリントマスタープラン, 主计划, 多冲刺计划, 冲刺主计划, plan maestro, plan multi-sprint, plan maestro sprint, plan maître, plan multi-sprint, plan maître sprint, Masterplan, Multi-Sprint-Plan, Sprint-Masterplan, piano principale, piano multi-sprint, piano principale sprint.

548SKILL.mdUpdated May 13, 2026

popup-studio-ai/sprint

popup-studio-ai/cc-version-analysis

tools

VerifiedTrustedCommunity

CC CLI version upgrade impact analysis — research changes, analyze bkit impact, generate report. Triggers: cc-version-analysis, CC upgrade, version analysis, CC 버전 분석, 버전 영향.

545SKILL.mdUpdated Apr 18, 2026

popup-studio-ai/cc-version-analysis

popup-studio-ai/rollback

testing

VerifiedTrustedCommunity

Manage PDCA checkpoints and rollback — create, list, restore for safe recovery. Rollback events are recorded via lib/audit/audit-logger ACTION_TYPES.rollback_executed. For sprint-level recovery, individual feature rollbacks may be triggered from within sprint phases (sprint itself is forward-only — terminal state is `archived`, not rolled back; v2.1.13). Triggers: rollback, checkpoint, restore, undo, 롤백, 체크포인트, 복원.

539SKILL.mdUpdated Apr 18, 2026

popup-studio-ai/rollback

popup-studio-ai/qa-phase

testing

VerifiedTrustedCommunity

QA Phase execution — L1-L5 test planning, generation, execution, and reporting for a single feature. For sprint-level QA (7-Layer dataFlowIntegrity / S1 gate across multiple features) use /sprint qa <sprintId> which delegates to sprint-qa-flow agent (v2.1.13). Triggers: qa phase, QA test, qa run, QA 실행, QAフェーズ, QA阶段, fase QA, phase QA, QA-Phase, fase QA.

539SKILL.mdUpdated Apr 18, 2026

popup-studio-ai/qa-phase

Download

For Claude Desktop. Download once, then upload the file in the app — no terminal needed.

Need help? View full Cowork setup guide →

Install manually

Choose your platform

# Clone the repo
git clone https://github.com/popup-studio-ai/bkit-claude-code.git

# Copy into Claude Code skills folder (global)
cp -r bkit-claude-code/skills/starter ~/.claude/skills/

Claude Code Skills — official skills path docs.

Repository

popup-studio-ai/bkit-claude-code

510 stars

Compatible with

Claude Code

OpenAI Codex CLI

ChatGPT