starter_skill

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.