JavaScript Authoring Skill
Write modern vanilla JavaScript following functional core with imperative shell architecture.
Core Principles
| Principle |
Description |
| Functional Core |
Pure functions, getters, computed values - no side effects |
| Imperative Shell |
DOM manipulation, event handlers, side effects in lifecycle hooks |
| Dependency Injection |
Import templates, styles, i18n from separate files |
| Named Exports Only |
No default exports - explicit named exports |
| JSDoc Documentation |
Document classes, public methods, and events |
File Structure Pattern
components/
└── my-component/
├── my-component.js # Main component class
├── my-component-template.js # Template function
├── my-component-styles.js # CSS-in-JS styles
└── my-component-i18n.js # Translations object
Web Component Template
import { template } from './my-component-template.js';
import { styles } from './my-component-styles.js';
import { translations } from './my-component-i18n.js';
/**
* @class MyComponent
* @extends HTMLElement
* @description Brief description of component purpose
* @fires my-component-update - Fired when state changes
*/
class MyComponent extends HTMLElement {
static get observedAttributes() {
return ['lang', 'value'];
}
constructor() {
super();
this.attachShadow({ mode: 'open' });
}
// FUNCTIONAL CORE - Pure getters
get lang() {
return this.getAttribute('lang') ||
this.closest('[lang]')?.getAttribute('lang') ||
document.documentElement.lang ||
'en';
}
get translations() {
return translations[this.lang] || translations.en;
}
// IMPERATIVE SHELL - Side effects
render() {
this.shadowRoot.innerHTML = `
<style>${styles}</style>
${template(this.translations)}
`;
}
connectedCallback() {
this.render();
// Set up observers and listeners
}
disconnectedCallback() {
// Clean up observers and listeners - REQUIRED
}
attributeChangedCallback(name, oldValue, newValue) {
if (oldValue !== newValue) {
this.render();
}
}
}
customElements.define('my-component', MyComponent);
export { MyComponent };
Quick Reference
ESLint Rules Enforced
| Rule |
Requirement |
no-var |
Use const or let only |
prefer-const |
Use const when variable is never reassigned |
prefer-template |
Use template literals for string concatenation |
eqeqeq |
Use === and !== only |
camelcase |
Use camelCase for variables and functions |
object-shorthand |
Use { foo } not { foo: foo } |
| Named exports |
No default exports |
Naming Conventions
| Context |
Convention |
Example |
| Variables/Functions |
camelCase |
handleClick, userName |
| Classes |
PascalCase |
MyComponent, UserService |
| Custom Elements |
kebab-case |
<my-component>, <user-card> |
| Events |
kebab-case |
'user-updated', 'form-submit' |
| CSS Classes |
kebab-case |
.card-header, .nav-item |
Related Documentation
- WEB-COMPONENTS.md - Lifecycle and Shadow DOM
- JSDOC.md - Documentation patterns
- I18N.md - Internationalization
- EVENTS.md - Event handling
- ACCESSIBILITY.md - a11y in JavaScript
- DEFENSIVE.md - Type guards, error handling, feature detection
Skills to Consider Before Writing
When authoring JavaScript, consider invoking these related skills:
| Code Pattern |
Invoke Skill |
Why |
class X extends HTMLElement |
custom-elements |
Full Web Component lifecycle, slots, shadow DOM |
fetch() or API calls |
api-client |
Retry logic, error handling, caching patterns |
| Component state, reactivity |
state-management |
Observable patterns, undo/redo, sync strategies |
localStorage, IndexedDB |
data-storage |
Persistence patterns, offline-first |
| Error handling |
error-handling |
Error boundaries, global handlers, reporting |
When Creating Web Components
If your JavaScript file defines a custom element (extends HTMLElement), also invoke:
- custom-elements - For registration patterns, slots, attribute handling
- state-management - If component manages internal state
- accessibility-checker - For keyboard navigation, ARIA
When Making API Calls
If your code uses fetch() or makes network requests:
- api-client - Retry logic, timeout handling, typed responses
- error-handling - Network error recovery, user feedback
Related Skills
- custom-elements - Define and use custom HTML elements
- state-management - Client-side state patterns for Web Components
- api-client - Fetch API patterns with error handling and caching
- data-storage - localStorage, IndexedDB, SQLite WASM patterns
- error-handling - Consistent error handling across frontend and backend
- unit-testing - Write unit tests with Node.js native test runner
- typescript-author - TypeScript for Web Components and Node.js
1---2name: javascript-author3description: 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.4---5
6# JavaScript Authoring Skill
7
8Write modern vanilla JavaScript following functional core with imperative shell architecture.
9
10## Core Principles
11
12| Principle | Description |
13|-----------|-------------|
14| Functional Core | Pure functions, getters, computed values - no side effects |
15| Imperative Shell | DOM manipulation, event handlers, side effects in lifecycle hooks |
16| Dependency Injection | Import templates, styles, i18n from separate files |
17| Named Exports Only | No default exports - explicit named exports |
18| JSDoc Documentation | Document classes, public methods, and events |
19
20## File Structure Pattern
21
22```
23components/
24└── my-component/
25 ├── my-component.js # Main component class
26 ├── my-component-template.js # Template function
27 ├── my-component-styles.js # CSS-in-JS styles
28 └── my-component-i18n.js # Translations object
29```
30
31## Web Component Template
32
33```javascript
34import { template } from './my-component-template.js';
35import { styles } from './my-component-styles.js';
36import { translations } from './my-component-i18n.js';
37
38/**
39 * @class MyComponent
40 * @extends HTMLElement
41 * @description Brief description of component purpose
42 * @fires my-component-update - Fired when state changes
43 */
44class MyComponent extends HTMLElement {
45 static get observedAttributes() {
46 return ['lang', 'value'];
47 }
48
49 constructor() {
50 super();
51 this.attachShadow({ mode: 'open' });
52 }
53
54 // FUNCTIONAL CORE - Pure getters
55 get lang() {
56 return this.getAttribute('lang') ||
57 this.closest('[lang]')?.getAttribute('lang') ||
58 document.documentElement.lang ||
59 'en';
60 }
61
62 get translations() {
63 return translations[this.lang] || translations.en;
64 }
65
66 // IMPERATIVE SHELL - Side effects
67 render() {
68 this.shadowRoot.innerHTML = `
69 <style>${styles}</style>
70 ${template(this.translations)}
71 `;
72 }
73
74 connectedCallback() {
75 this.render();
76 // Set up observers and listeners
77 }
78
79 disconnectedCallback() {
80 // Clean up observers and listeners - REQUIRED
81 }
82
83 attributeChangedCallback(name, oldValue, newValue) {
84 if (oldValue !== newValue) {
85 this.render();
86 }
87 }
88}
89
90customElements.define('my-component', MyComponent);
91
92export { MyComponent };
93```
94
95## Quick Reference
96
97### ESLint Rules Enforced
98
99| Rule | Requirement |
100|------|-------------|
101| `no-var` | Use `const` or `let` only |
102| `prefer-const` | Use `const` when variable is never reassigned |
103| `prefer-template` | Use template literals for string concatenation |
104| `eqeqeq` | Use `===` and `!==` only |
105| `camelcase` | Use camelCase for variables and functions |
106| `object-shorthand` | Use `{ foo }` not `{ foo: foo }` |
107| Named exports | No default exports |
108
109### Naming Conventions
110
111| Context | Convention | Example |
112|---------|------------|---------|
113| Variables/Functions | camelCase | `handleClick`, `userName` |
114| Classes | PascalCase | `MyComponent`, `UserService` |
115| Custom Elements | kebab-case | `<my-component>`, `<user-card>` |
116| Events | kebab-case | `'user-updated'`, `'form-submit'` |
117| CSS Classes | kebab-case | `.card-header`, `.nav-item` |
118
119## Related Documentation
120
121- [WEB-COMPONENTS.md](WEB-COMPONENTS.md) - Lifecycle and Shadow DOM
122- [JSDOC.md](JSDOC.md) - Documentation patterns
123- [I18N.md](I18N.md) - Internationalization
124- [EVENTS.md](EVENTS.md) - Event handling
125- [ACCESSIBILITY.md](ACCESSIBILITY.md) - a11y in JavaScript
126- [DEFENSIVE.md](DEFENSIVE.md) - Type guards, error handling, feature detection
127
128## Skills to Consider Before Writing
129
130When authoring JavaScript, consider invoking these related skills:
131
132| Code Pattern | Invoke Skill | Why |
133|--------------|--------------|-----|
134| `class X extends HTMLElement` | **custom-elements** | Full Web Component lifecycle, slots, shadow DOM |
135| `fetch()` or API calls | **api-client** | Retry logic, error handling, caching patterns |
136| Component state, reactivity | **state-management** | Observable patterns, undo/redo, sync strategies |
137| `localStorage`, `IndexedDB` | **data-storage** | Persistence patterns, offline-first |
138| Error handling | **error-handling** | Error boundaries, global handlers, reporting |
139
140### When Creating Web Components
141
142If your JavaScript file defines a custom element (`extends HTMLElement`), also invoke:
143- **custom-elements** - For registration patterns, slots, attribute handling
144- **state-management** - If component manages internal state
145- **accessibility-checker** - For keyboard navigation, ARIA
146
147### When Making API Calls
148
149If your code uses `fetch()` or makes network requests:
150- **api-client** - Retry logic, timeout handling, typed responses
151- **error-handling** - Network error recovery, user feedback
152
153## Related Skills
154
155- **custom-elements** - Define and use custom HTML elements
156- **state-management** - Client-side state patterns for Web Components
157- **api-client** - Fetch API patterns with error handling and caching
158- **data-storage** - localStorage, IndexedDB, SQLite WASM patterns
159- **error-handling** - Consistent error handling across frontend and backend
160- **unit-testing** - Write unit tests with Node.js native test runner
161- **typescript-author** - TypeScript for Web Components and Node.js
aibot88