web components skills

AgnosticUI/agnosticui

Skill Claude CodeCodex

Implement a playbook from its PROMPT specification files. Supports both single-framework (PROMPT-REACT.md, etc.) and 3-framework (PROMPT-3-FRAMEWORKS.md) modes.

AgnosticUI/agnosticui

Skill Claude CodeCodex

Design and implement a new feature or component from a GitHub issue. Use for net-new functionality, not bug fixes.

AgnosticUI/agnosticui

Skill Claude CodeCodex

Update component documentation when code changes.

UI5/webcomponents-react

Skill Claude CodeCodex

Use ALWAYS for AnalyticalTable internals — react-table v7 plugin architecture, vendored react-table code at packages/main/src/components/AnalyticalTable/react-table/, tableHooks, AnalyticalTableHooks, useDynamicColumnWidths, useColumnResizing, useRowSelect, useF2CellEdit, useManualRowSelect…

UI5/webcomponents-react

Skill Claude CodeCodex

Guide a complete UI5 Web Components version upgrade in the ui5-webcomponents-react monorepo. Updates root and peer dependencies, regenerates wrapper components, syncs theming parameters, updates version-info, detects new components and breaking changes, and verifies the build. Use when a new @ui5/webcomponents version…

modernweb-dev/rocket

Skill Claude CodeCodex

Indexes this repo's coding conventions for file placement, tests, API shape, component authoring, and commit messages. Use when creating or editing source files, adding tests, designing function signatures, creating components, or writing commits in this repo.

modernweb-dev/rocket

Skill Claude CodeCodex

Converts grill-with-docs output — CONTEXT.md glossaries, ADRs, and approved domain decisions — into typed architecture. Use after grill-with-docs when the user wants domain types, seams, adapters, errors, call stacks, and dependency rules expressed in code before business behavior.

modernweb-dev/rocket

Skill Claude CodeCodex

Use when editing Rocket Pages, config, layouts, component reference Pages, or build behavior in this project.

chaxus/ran

Skill Claude CodeCodex

Use when designing, reviewing, or improving web UI visual quality, especially when a developer-built interface feels cluttered, flat, generic, poorly spaced, weakly hierarchical, or hard to scan.

chaxus/ran

Skill Claude CodeCodex

Use when building UI with the ranui web-component library (elements like , , , , ) or its fluent DOM builder (ranui/builder — Div/View/Span/signal/createEffect/EventManager). Covers the import map, the full element inventory, conventions, accessibility, and where the authoritative API reference lives.

chaxus/ran

Skill Claude CodeCodex

Use when working with the ranuts utility library — DOM/BOM/string/object/number/color/time helpers and reactivity from ranuts/utils (e.g. createSignal, throttle/debounce, cloneDeep, escapeHtml, getMime, MessageCodec, localStorage helpers), the node-only server toolkit ranuts/node, the 2D rendering engine…

webdevelopers-eu/zolinga

Skill Claude CodeCodex

Use when creating or updating MCP resources — static files exposed to MCP clients via resources/list and resources/read. Covers .meta.json descriptors, tenant filtering, URI rewriting, dynamic resources via mcp:resources/list event hook, and the mcp-system scheme.

webdevelopers-eu/zolinga

Skill Claude CodeCodex

Use when exposing a Zolinga event handler as an MCP (Model Context Protocol) tool — i.e. a method clients can invoke via JSON-RPC tools/call. Covers handler class, manifest binding, JSON Schemas, the Tools\CallEvent contract, and the schema.response requirement enforced by McpToolsListHandler::collectTools().

webdevelopers-eu/zolinga

Skill Claude CodeCodex

ALWAYS use when creating, modifying, or reviewing ANY front-end web components, widgets, or custom elements in this repository. Mandatory for all web component work — creating new components, modifying existing ones, registering in zolinga.json, writing component docs, or debugging component…

3lvia/designsystem

Skill Claude CodeCodex

Reference for UI components in Elvia's design system ("Elvis"). Covers component-specific guidelines for sizing, coloring, types, ordering, labeling, accessibility attributes, CSS setup, and web-component registration. Use when building, reviewing, or fixing UI in an Elvia frontend, even if the request doesn't name…

jonathanmoore/kona-theme

Skill Claude CodeCodex

WCAG 2.2 accessibility patterns for Shopify Liquid themes. Covers e-commerce components — product cards, carousels, cart drawers, price display, forms, filters, and modals. Use when building accessible theme components, fixing accessibility issues, or reviewing ARIA patterns in .liquid files.

jonathanmoore/kona-theme

Skill Claude CodeCodex

Interactive guided workflow for creating new Shopify theme components — sections, blocks, and snippets — with correct schema, translation keys, LiquidDoc, accessibility, and Kona conventions. Invoke with: /shopify-liquid-kona-new [section|block|snippet] [name].

jonathanmoore/kona-theme

Skill Claude CodeCodex

CSS, JavaScript, and HTML coding standards for this Kona theme. Covers Tailwind CSS v4 utility-first patterns, Vite build pipeline, island hydration architecture, design tokens via @theme, Web Components, defensive CSS, and progressive enhancement. Use when writing CSS/JS/HTML in .liquid files or theme frontend source…