playbooks

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

starter skill

/skills/starter

This skill helps beginners create a static website quickly using plain HTML/CSS/JS or Next.js while learning fundamentals.

npx playbooks add skill popup-studio-ai/bkit-claude-code --skill starter

Review the files below or copy the command above to add this skill to your agents.

Files (1)
SKILL.md
6.6 KB
---
name: starter
description: |
  Static web development skill for beginners and non-developers.
  Covers HTML/CSS/JavaScript and Next.js App Router basics.

  Project initialization with "init starter" or "starter init".

  Use proactively when user is a beginner or wants a simple static website.

  Triggers: static website, portfolio, landing page, HTML CSS, beginner, first website,
  simple web, personal site, init starter, starter init,
  정적 웹, 포트폴리오, 랜딩페이지, 초보자, 첫 웹사이트, 간단한 웹,
  静的サイト, ポートフォリオ, 初心者, 静态网站, 个人网站, 初学者,
  sitio web estático, portafolio, página de inicio, principiante, primer sitio web,
  site web statique, portfolio, page d'accueil, débutant, premier site web,
  statische Website, Portfolio, Landingpage, Anfänger, erste Website,
  sito web statico, portfolio, pagina di destinazione, principiante, primo sito web

  Do NOT use for: fullstack apps with backend, authentication features, or database needs.
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)

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

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

Overview

This skill provides a gentle, practical introduction to static web development for beginners and non-developers. It covers core HTML/CSS/JavaScript patterns and an optional Next.js App Router setup so you can create a simple portfolio, landing page, or personal site quickly. Use the built-in commands to initialize projects, get step-by-step guides, and receive beginner-friendly help.

How this skill works

The skill inspects your requested project type (pure HTML/CSS/JS or Next.js) and scaffolds a ready-to-edit project structure, including docs for PDCA and a CLAUDE.md starter note. The init action generates files and configuration such as index.html or Next.js app files, package.json when needed, and a .bkit-memory.json. The guide action analyzes project state and recommends next steps; the help action explains concepts and provides example code snippets.

When to use it

  • You are creating your first website or portfolio and want a simple starter scaffold.
  • You prefer a static site with minimal tooling (HTML/CSS/JS) or a lightweight Next.js app router setup.
  • You need a quick landing page or personal site without backend or authentication.
  • You want beginner-friendly explanations and example code for HTML, CSS, and JS.
  • You want PDCA-ready docs included with your project structure.

Best practices

  • Choose Pure HTML/CSS/JS for the simplest, fastest learning path; pick Next.js if you plan to expand later.
  • Keep files organized: index.html, css/style.css, js/main.js, and a docs/ folder for PDCA notes.
  • Use responsive patterns early: meta viewport, container max-width, and simple media queries.
  • Start with plain JavaScript for behavior, then add frameworks only when necessary.
  • Deploy static sites to GitHub Pages or Next.js apps to Vercel for simplest CI/CD.

Example use cases

  • Initialize a personal portfolio: starter init my-portfolio and edit index.html or app/page.tsx.
  • Create a marketing landing page with responsive layout and basic contact form (static, no backend).
  • Build a small project showcase site with About and Projects pages using Next.js App Router.
  • Learn core web concepts with guided examples: HTML structure, CSS styling, and JS interactivity.
  • Set up PDCA docs alongside code to plan, design, and iterate on your site.

FAQ

What command creates a new starter project?

Run the init action: example /starter init my-portfolio to scaffold a project directory and starter files.

Can I add login or database features?

No. This skill is for static websites and simple Next.js front-ends only; authentication and databases require a Dynamic or fullstack workflow.