メニュー
INVOKE FIRST before any code work. Validates git workflow (branch, issue, worklog) and checks approach. Use at START of every task and END before completing. Prevents skipped steps.
Define and use custom HTML elements. Use when creating new components, defining custom tags, or using project-specific elements beyond standard HTML5.
Write vanilla JavaScript for Web Components with functional core, imperative shell. Use when creating JavaScript files, building interactive components, or writing any client-side code.
Modern CSS organization with native @import, @layer cascade control, CSS nesting, design tokens, and element-focused selectors. AUTO-INVOKED when editing .css files.
Enforce structured git workflow with conventional commits, feature branches, semver versioning, and work logging. Use for all code changes to prevent work loss and maintain history.
Use consistent Lucide icons with the <icon-wc> component. Use when adding icons to pages, buttons, or UI elements.
Umbrella coordinator for image handling. Coordinates responsive-images, placeholder-images, and automation scripts. Use when adding images to any page, optimizing existing images, or setting up image pipelines.
| name | pre-flight-check |
| description | INVOKE FIRST before any code work. Validates git workflow (branch, issue, worklog) and checks approach. Use at START of every task and END before completing. Prevents skipped steps. |
| allowed-tools | Read, Glob, Grep, Bash |
Before writing code, run through these checklists to validate your approach and catch potential issues early.
For the full session workflow, see
.claude/AGENTS.md.
STOP! Before ANY code changes, complete this checklist:
# What issue are you working on?
bd show <issue-id>
# If no issue exists, create one first:
bd create --title="..." --type=feature|bug|task --priority=2
bd update <id> --status=in_progress)# What branch are you on?
git branch --show-current
# Are you on main? CREATE A FEATURE BRANCH:
git checkout -b feature/<issue-id>-short-description
<type>/<issue-id>-description| Situation | Action Required |
|---|---|
| No issue for this work | Run bd create first |
| On main branch | Run git checkout -b feature/... |
| Issue not claimed | Run bd update <id> --status=in_progress |
Only proceed to code changes after ALL boxes are checked.
Activate pre-flight checks when:
What are you creating?
│
├─ HTML page/component
│ └─ Use: HTML Pre-Flight Checklist
│ └─ Check: xhtml-author, accessibility-checker, metadata skills
│
├─ CSS file
│ └─ Use: CSS Pre-Flight Checklist
│ └─ Check: css-author, design-tokens skills
│
├─ JavaScript file
│ └─ Use: JavaScript Pre-Flight Checklist
│ └─ Check: javascript-author skill
│
├─ Form
│ └─ Use: Forms Pre-Flight Checklist
│ └─ Check: forms skill
│
├─ Image addition
│ └─ Use: Images Pre-Flight Checklist
│ └─ Check: responsive-images skill
│
└─ New site/project
└─ Use: Site Essentials Pre-Flight Checklist
└─ Check: site-scaffold skill
These skills should be invoked automatically based on context:
| Context | Auto-invoke Skills |
|---|---|
| Any code change | pre-flight-check (this skill) - ALWAYS FIRST |
| Creating/editing .html | xhtml-author, accessibility-checker |
| Creating/editing .css | css-author |
| Creating/editing .js | javascript-author |
| Creating NEW .js/.ts file | tdd - Consider test-first approach |
| Adding icons/visual indicators | icons - NEVER use inline SVGs |
| Adding images | responsive-images, placeholder-images |
| Creating forms | forms - Use <form-field> pattern |
| API calls in code | api-client - Retry logic, error handling |
| Web Components | custom-elements, state-management |
When building these features, invoke ALL listed skills:
| Feature | Skills to Invoke |
|---|---|
| Theme toggle (dark/light) | css-author, javascript-author, data-storage, icons, progressive-enhancement |
| Contact form | xhtml-author, forms, accessibility-checker, javascript-author |
| Product card grid | xhtml-author, css-author, responsive-images, icons |
| Navigation menu | xhtml-author, css-author, icons, accessibility-checker |
| API integration | javascript-author, api-client, error-handling, state-management |
| User authentication | authentication, security, forms, javascript-author |
ALWAYS invoke the icons skill when adding visual indicators. Theme toggles, buttons with icons, navigation icons, status indicators - ALL should use <icon-wc>, never inline SVGs.
See COMPOSITIONS.md for more multi-skill patterns.
Before writing HTML, verify:
<header>, <nav>, <main>, <aside>, <footer>)<h1>, logical <h2>-<h6>).claude/patterns/pages/?.claude/schemas/elements.json that apply?patterns skill?| Issue | Check For |
|---|---|
Multiple <h1> | Only one per page allowed |
| Missing landmarks | Every page needs <main> |
| Div soup | Use semantic elements instead |
| Inline styles | Will fail validation |
| Missing lang | <html lang="..."> required |
Before writing CSS, verify:
base, components, utilities, overrides)_tokens.css?:has() enable CSS-only interactivity?.claude/patterns/ or .claude/styles/?data-* attributes for state? (not classes)| Issue | Check For |
|---|---|
| Nesting > 3 levels | Will trigger stylelint warning |
| Magic numbers | Use tokens for spacing, colors |
| Class-based state | Use data-* attributes |
| Missing layer | CSS should use @layer |
| Duplicate properties | Same property twice in block |
Before writing JavaScript, verify:
| TDD Mode | Behavior |
|---|---|
| Advisory (default) | Reminder shown, can proceed |
Strict (/tdd strict) | Must create test file before implementation |
To check TDD mode: /tdd status
To change mode: /tdd strict or /tdd advisory
src/components/, src/scripts/)disconnectedCallback?| Issue | Check For |
|---|---|
var usage | Use const or let |
| Default exports | Use named exports only |
| Missing cleanup | Memory leaks from listeners |
| No JSDoc | Document classes and public methods |
| Complexity > 10 | Refactor into smaller functions |
Before building forms, verify:
<form-field> custom element pattern?<label> with matching for/id?<output> containers?required attribute?aria-describedby?<output> for real-time validation feedback?autocomplete attributes for user convenience?inputmode for mobile keyboards?| Issue | Check For |
|---|---|
| Unlabeled inputs | Major accessibility violation |
| Missing autocomplete | Hurts user experience |
| No error containers | Where will errors display? |
| Hidden labels | Use .visually-hidden, not display: none |
Before adding images, verify:
alt attribute with meaningful description?loading="lazy" for below-fold images?decoding="async" for non-critical images?width and height for layout stability?<picture> for art direction?sizes attribute values are needed?<figure> with <figcaption>?| Issue | Check For |
|---|---|
| Missing alt | Accessibility violation |
| No modern formats | Large file sizes |
| Missing dimensions | Layout shift |
| No lazy loading | Performance impact |
Before launching or when setting up a new site, verify these essentials exist:
robots.txt - Search engine directivessitemap.xml - XML sitemap for crawlershumans.txt - Team credits and site infomanifest.json - PWA web app manifest404.html - Not found error page500.html - Server error page (static, minimal dependencies)offline.html - Service worker offline fallbacknoscript.html - JavaScript-disabled fallback (if app requires JS).well-known/security.txt - Security contact info (RFC 9116)favicon.svg - Vector favicon (modern browsers)favicon.ico - Legacy favicon (32x32)apple-touch-icon.png - iOS home screen (180x180)icon-192.png - PWA icon smallicon-512.png - PWA icon largeog-image.png - Social sharing (1200x630)# Check for essential files in site root
ls -la robots.txt sitemap.xml humans.txt manifest.json 404.html 500.html 2>/dev/null
ls -la .well-known/security.txt 2>/dev/null
| File | When Required |
|---|---|
| robots.txt | All public sites |
| sitemap.xml | All public sites with multiple pages |
| 404.html | All sites |
| 500.html | All sites with server-side processing |
| offline.html | Sites with service workers |
| noscript.html | JS-required applications only |
| security.txt | Production sites accepting security reports |
| humans.txt | Optional, but good practice |
See site-scaffold skill for templates.
When the user says... suggest this pattern:
| User Intent | Suggested Pattern/Skill |
|---|---|
| "add a page" | patterns skill, page templates |
| "create a form" | forms skill, <form-field> pattern |
| "add navigation" | <nav> with aria-label |
| "make it accessible" | accessibility-checker skill |
| "add an image" | responsive-images skill, <picture> |
| "style this" | css-architecture skill, layers |
| "add interactivity" | First check progressive-enhancement for CSS-only |
| "create a component" | javascript-author skill, Web Component |
| "add metadata" | metadata skill, profiles |
| "add dark mode" | design-tokens skill, color-scheme |
Stop and reconsider if you notice:
data-* attributes insteadAfter writing, verify with:
# HTML validation
npm run lint
# CSS validation
npm run lint:css
# JavaScript validation
npm run lint:js
# Accessibility check
npm run a11y
# Full validation
npm run lint:all
Before saying "done", complete this checklist:
npm test
npm run lint:all
npm run test:coverage # Check for missing tests
git add <files>
git commit -m "type(scope): description"
/uat request <feature-name>
# This adds uat:requested label to the issue
/uat request <feature-name>uat:requested label# Check UAT status
/uat status <feature-name>
# Or check issue labels
bd show <issue-id>
uat:approved label is presentuat:denied label), address feedback and re-request UATbd close <issue-id>| Situation | Action Required |
|---|---|
| Tests failing | Fix before proceeding |
| On main branch | Should have been on feature branch |
| No UAT requested | Run /uat request <feature-name> |
| Closing without approval | STOP - check bd show <id> for uat:approved label |
uat:denied label present | Address feedback, then /uat request again |
<icon-wc> Web Component