web-components

Name: web-components
Author: AdamBien

40stars10forks

How to install web-components?

adambien/airails/web-components

$npx -y skills add AdamBien/airails --skill web-components

Installs into the current project.

Summary

Architecture and coding rules for single-page applications using web components, BCE layering, lit-html templating, unidirectional Redux-style state management (reduction.js, standards-based), and standards-based client-side routing (Navigation API + URLPattern). Web standards an

Files · 1

View on GitHub

SKILL.md

1	Build or maintain a web component application using $ARGUMENTS. Apply all rules below strictly.
2
3	## Guiding Principles
4
5	- web standards and web platform first
6	- minimal external dependencies — every dependency must justify its existence, and is continuously replaced with web standards
7	- no frameworks — use the platform: custom elements, ES modules, import maps
8	- no build system — dependencies are vendored as self-contained ES modules; nothing to compile, bundle, or transpile
9	- progressive enhancement over JavaScript-first design
10
11	## Composition
12
13	Compose with `/web-conventions` — it provides the baseline rules for semantic HTML, accessibility,
14	modern CSS, design tokens, and the Baseline browser-support policy. Rules in this skill override it
15	(e.g. container-query-first responsiveness). For static content sites without
16	client-side state, use `/web-static` instead. For experiments and PoCs, `/web-latest`
17	may be composed on top to lift the Baseline browser-support constraints.
18
19	## Reference Implementation
20
21	This skill is based on the [bce.design](https://github.com/AdamBien/bce.design) quickstarter.
22	The naming rules below are stricter than the single-module quickstarter (which registers unprefixed
23	tags like `b-add`) — multi-module applications need module-prefixed tag names.
24
25	## Allowed Dependencies
26
27	Only one runtime dependency is permitted. Do not add others without explicit approval:
28
29	1. lit-html — templating and efficient DOM rendering
30
31	State management needs no dependency — `reduction.js`, a minimal in-app store
32	(~70 lines), implements the used Redux Toolkit API (`configureStore`, `createAction`,
33	`createReducer`) on top of the `structuredClone()` web standard (see State Management below).
34	The original Redux Toolkit may be vendored as an optional, import-map-switchable alternative.
35
36	Client-side routing needs no dependency — it is implemented with web standards
37	(Navigation API + URLPattern, both Baseline Newly Available; see Routing below).
38
39	Development tooling: any static web server with an `index.html` fallback (e.g. zws,
40	bundled with `web-conventions`, where `--single` provides the fallback and `--live`
41	adds reload-on-save while authoring) and Playwright (E2E tests). There is no build system.
42
43	## BCE Architecture (Boundary Control Entity)
44
45	Structure code using the Boundary Control Entity pattern. Organize by feature module, not by technical layer:
46
47	```
48	app/src/
49	├── BElement.js # base class for all custom elements
50	├── store.js # store configuration
51	├── reduction.js # minimal standards-based store (Redux Toolkit API subset)
52	├── router.js # standards-based client-side router (Navigation API + URLPattern)
53	├── app.js # entry point, route configuration, persistence
54	├── app.config.js # application metadata (name, version)
55	├── index.html # single HTML entry point
56	├── tokens.css # design-token custom properties
57	├── style.css # application styles
58	├── libs/ # vendored third-party ESM modules (lit-html)
59	├── [feature-name]/ # one folder per feature module (business component)
60	│ ├── package-info.md # the module's responsibility & design decisions
61	│ ├── boundary/ # UI web components
62	│ ├── control/ # actions and dispatchers
63	│ └── entity/ # reducers and state shape
64	└── localstorage/
65	└── control/
66	└── StorageControl.js # persistence layer
67	```
68
69	`DESIGN.md` and the W3C Design Tokens file `tokens.json` live at the repository root
70	(see `/web-conventions`); `tokens.css` is their CSS custom-property projection.
71
72	### Boundary (UI Components)
73
74	- all components extend `BElement` — never extend `HTMLElement` directly
75	- components are the only layer that imports `html` from lit-html
76	- components dispatch actions through control functions — never dispatch directly to the store
77	- override `view()` to return a lit-html template — this is the only required method
78	- override `extractState(reduxState)` to select the relevant state slice
79	- access extracted state via `this.state` inside `view()`
80	- register every component with `customElem

People who liked this also viewed

6 picks

Type

web-components

40stars10forks

View on GitHub

How to install web-components?

adambien/airails/web-components

$npx -y skills add AdamBien/airails --skill web-components

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	Build or maintain a web component application using $ARGUMENTS. Apply all rules below strictly.
2
3	## Guiding Principles
4
5	- web standards and web platform first
6	- minimal external dependencies — every dependency must justify its existence, and is continuously replaced with web standards
7	- no frameworks — use the platform: custom elements, ES modules, import maps
8	- no build system — dependencies are vendored as self-contained ES modules; nothing to compile, bundle, or transpile
9	- progressive enhancement over JavaScript-first design
10
11	## Composition
12
13	Compose with `/web-conventions` — it provides the baseline rules for semantic HTML, accessibility,
14	modern CSS, design tokens, and the Baseline browser-support policy. Rules in this skill override it
15	(e.g. container-query-first responsiveness). For static content sites without
16	client-side state, use `/web-static` instead. For experiments and PoCs, `/web-latest`
17	may be composed on top to lift the Baseline browser-support constraints.
18
19	## Reference Implementation
20
21	This skill is based on the [bce.design](https://github.com/AdamBien/bce.design) quickstarter.
22	The naming rules below are stricter than the single-module quickstarter (which registers unprefixed
23	tags like `b-add`) — multi-module applications need module-prefixed tag names.
24
25	## Allowed Dependencies
26
27	Only one runtime dependency is permitted. Do not add others without explicit approval:
28
29	1. lit-html — templating and efficient DOM rendering
30
31	State management needs no dependency — `reduction.js`, a minimal in-app store
32	(~70 lines), implements the used Redux Toolkit API (`configureStore`, `createAction`,
33	`createReducer`) on top of the `structuredClone()` web standard (see State Management below).
34	The original Redux Toolkit may be vendored as an optional, import-map-switchable alternative.
35
36	Client-side routing needs no dependency — it is implemented with web standards
37	(Navigation API + URLPattern, both Baseline Newly Available; see Routing below).
38
39	Development tooling: any static web server with an `index.html` fallback (e.g. zws,
40	bundled with `web-conventions`, where `--single` provides the fallback and `--live`
41	adds reload-on-save while authoring) and Playwright (E2E tests). There is no build system.
42
43	## BCE Architecture (Boundary Control Entity)
44
45	Structure code using the Boundary Control Entity pattern. Organize by feature module, not by technical layer:
46
47	```
48	app/src/
49	├── BElement.js # base class for all custom elements
50	├── store.js # store configuration
51	├── reduction.js # minimal standards-based store (Redux Toolkit API subset)
52	├── router.js # standards-based client-side router (Navigation API + URLPattern)
53	├── app.js # entry point, route configuration, persistence
54	├── app.config.js # application metadata (name, version)
55	├── index.html # single HTML entry point
56	├── tokens.css # design-token custom properties
57	├── style.css # application styles
58	├── libs/ # vendored third-party ESM modules (lit-html)
59	├── [feature-name]/ # one folder per feature module (business component)
60	│ ├── package-info.md # the module's responsibility & design decisions
61	│ ├── boundary/ # UI web components
62	│ ├── control/ # actions and dispatchers
63	│ └── entity/ # reducers and state shape
64	└── localstorage/
65	└── control/
66	└── StorageControl.js # persistence layer
67	```
68
69	`DESIGN.md` and the W3C Design Tokens file `tokens.json` live at the repository root
70	(see `/web-conventions`); `tokens.css` is their CSS custom-property projection.
71
72	### Boundary (UI Components)
73
74	- all components extend `BElement` — never extend `HTMLElement` directly
75	- components are the only layer that imports `html` from lit-html
76	- components dispatch actions through control functions — never dispatch directly to the store
77	- override `view()` to return a lit-html template — this is the only required method
78	- override `extractState(reduxState)` to select the relevant state slice
79	- access extracted state via `this.state` inside `view()`
80	- register every component with `customElem

People who liked this also viewed

6 picks

Type