Ready to supercharge your AI agents?

Install any skill in seconds. Free to start, no credit card required.

Beginner (Starter) Skill — measured AI agent skill | DecimalAI

popup-studio-ai/starter

NewSkillScoreMaintained

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

Frontendby popup-studio-ai

Links this skill to your agents and keeps it current with the author’s updates.

Automatic

Frontend / UI pack

1 · One-time — install the CLI (docs ↗)

pip install decimalai

2 · Get the skill — writes .claude/skills/popup-studio-ai-starter/SKILL.md

decimalai skills pull popup-studio-ai-starter --out .claude/skills/

No CLI? Get the same file — curl · raw file

curl -fsSL --create-dirs -o .claude/skills/popup-studio-ai-starter/SKILL.md https://app.decimal.ai/s/popup-studio-ai-starter/SKILL.md

Raw file: /s/popup-studio-ai-starter/SKILL.md ↗ · machine-readable summary at /s/popup-studio-ai-starter.json ↗

In productionGlobal

how this skill behaves on real traffic · last 30 days

No production data for this skill yet — usage numbers appear here once agents start running it.

Anonymized aggregate across every org using this skill — proof from real production use, not a demo.

Does this skill help? · Benchmark: with vs. withoutsign in to run this on your agents

23 test cases from the publisher’s eval.yaml · each run twice on gemini-3.6-flash — with the skill injected, then without · last run 4h ago

Yes — +74% lift · at higher cost+29% tokens0% turns100% of whole cases pass with skill (23/23)

Test case	Without → With	Effect	Δ tokens	Δ turns
case-01	✗→✓	▲ Improved	12%	0%
case-02	✗→✓	▲ Improved	122%	0%
case-03	✗→✓	▲ Improved	51%	0%
case-04	✗→✓	▲ Improved	11%	0%
case-05	✗→✓	▲ Improved	28%	0%

Showing 5 of 23 cases

SkillSafety

✓ 3 of 3 passed

Code scan15 of 15 checks clean

0 critical · 0 warning · 0 info — scanner v4 — 8/3/2026

live_secretremote_code_executionreverse_shelldata_exfiltrationssrf_metadataagent_snoopinganti_refusaldestructive_commandsobfuscated_unicodeunicode_homoglyphopaque_blobsuspicious_urltool_overreachtrigger_abuseprompt_injection_phrasing

IntentSafe

LLM judge · does the skill do what it claims

ContentClean

LLM judge · policy & harmful-content review

Source

Imported

popup-studio-ai / bkit-claude-code

skills/starter/SKILL.md

View on GitHub ↗

License Apache-2.0Imported 8/10/2026Version v1

Skill contents

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

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 |

Want to see if popup-studio-ai/starter would activate on your phrasing? Try it before you install — no LLM call, no signup.

Other measured skills in the registry, with their headline benchmark lift.