From aksell-project
Guide for starting any new Aksell internal tool or page using aksell-ui. Use this skill whenever someone says "new aksell project", "build a tool with aksell", "scaffold an aksell app", "create aksell page", or starts building any internal web tool at Aksell — even if they don't say "skill" or "aksell-ui" explicitly. This skill asks the right planning questions, runs `npx create-aksell`, and implements the page using correct aksell-ui elements and patterns. Always use this before writing any HTML or touching index.html for Aksell projects.
How this skill is triggered — by the user, by Claude, or both
Slash command
/aksell-project:aksell-projectThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
You are building an internal Aksell tool or page using the aksell-ui design system.
You are building an internal Aksell tool or page using the aksell-ui design system. This skill guides you through project setup and ensures you use the right components.
Ask these questions one at a time. Wait for answers before proceeding.
price-calculator) — becomes the folder namehtml — zero-build, open index.html directly in browser. Best for simple tools, calculators, internal forms, one-page utilities.astro — full Astro setup with npm install + dev server. Best for multi-page apps, data-heavy dashboards, anything needing components or routing.html by default unless the user describes something multi-page or framework-dependent.Once you have these answers, proceed. You have everything you need.
Run:
npx create-aksell --name <name> --template <html|astro>
This clones from GitHub (aksellsor/aksell-ui-template-html or aksellsor/aksell-ui-template-astro)
and patches {{project-name}} placeholders.
HTML template sets up:
index.html — already links aksell-ui CDN stylesheets (resets, colors, typography, btn)style.css — project-specific overridesmain.js — entry point for JSAGENTS.md — the aksell-ui component reference (READ THIS before implementing)Astro template sets up:
@aksell/ui as a package dependencynpm install && npm run dev to startRead references/aksell-ui-catalog.md for the full component and style reference before writing any HTML.
native.css. No custom component wrapper needed for inputs, selects, labels, etc.<button class="btn btn--primary"> not a custom element@aksell/ui into the project — always use CDN linksnpm install in the html template — it's CDN onlyAlready in index.html: resets.css, colors.css, typography.css, btn.css
Add more <link> tags as needed:
<link rel="stylesheet" href="https://unpkg.com/@aksell/ui/src/styles/native.css" />
<link rel="stylesheet" href="https://unpkg.com/@aksell/ui/src/styles/utilities.css" />
<link rel="stylesheet" href="https://unpkg.com/@aksell/ui/src/styles/components/toast.css" />
<link rel="stylesheet" href="https://unpkg.com/@aksell/ui/src/styles/components/pillarrowbtn.css" />
In main.js:
// Toast
import 'https://unpkg.com/@aksell/ui/src/components/Toast/standalone/toast.standalone.js';
// PillArrowBtn (CSS bundled, no separate link needed)
import 'https://unpkg.com/@aksell/ui/src/components/PillArrowBtn/standalone/PillArrowBtn.standalone.js';
For html template:
cd <name>
open index.html
For astro template:
cd <name>
npm install
npm run dev
Tell the user where the project lives and how to open it.
Guides creation, editing, and verification of skills for AI coding agents using test-driven development with subagent scenarios. Use when authoring or debugging skills.
npx claudepluginhub aksellsor/claude-plugins --plugin aksell-project