javascript-author

📁 profpowell/project-template 📅 7 days ago

总安装量

周安装量

#44592

全站排名

安装命令

npx skills add https://github.com/profpowell/project-template --skill javascript-author

Agent 安装分布

amp 1

opencode 1

kimi-cli 1

codex 1

github-copilot 1

gemini-cli 1

Skill 文档

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`

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

GitHub 仓库 ↗ ← 返回陌讯 Skills 聚合平台