メニュー
Use when creating, modifying, reviewing, or debugging components that extend `Adapter` or `AdapterMixin`, especially when class CSS, instance CSS, inheritance, or `.define(...)` behavior matters.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Guide users through planning, teaching, and implementing Adapter-based CSS-in-JS design systems. Use when creating or extending frontend UI architecture with design tokens, CSSStyleSheet/adoptedStyleSheets style modules, ES module CSS exports, base components, variants, or reusable UI patterns. For detailed Adapter runtime behavior, defer to the adapter-framework skill. Discuss decisions step by step, ask with concrete suggestions, align before implementation, and help users understand how to maintain and extend the UI later.
Use when developing this Adapter repository itself: runtime changes, docs workflow, dev CLI behavior, Python tooling, Deno validation, dependency updates, and maintaining concise repo development concepts as conventions evolve. Do not use for consumer-only Adapter usage questions unless repository development guidance is also needed.
| name | adapter-framework |
| description | Use when creating, modifying, reviewing, or debugging components that extend `Adapter` or `AdapterMixin`, especially when class CSS, instance CSS, inheritance, or `.define(...)` behavior matters. |
Adapter is a small, fast styling runtime for Web Components with isolated styles and natural class-based inheritance.
It helps you build components with predictable, scoped CSS using plain JavaScript classes and objects. Keep answers focused on package consumers, not contribution workflow.
Prefer the documented npm compatibility flow:
npx jsr add @devcapsule/adapterimport { Adapter } from "jsr:@devcapsule/adapter";import { Adapter } from "https://cdn.jsdelivr.net/npm/@devcapsule/adapter/+esm";Explain the package with these defaults:
Adapter or AdapterMixinClass.css = ... or
static { this.css = ... }.define(tagName)element.css only for per-instance overridesconfigure(...) for class-level config such as cssProcessorKeep these guardrails:
.define(tagName) as the normal registration API.static css = ... class fields as a supported pattern.cssProcessor as class-level only, not instance-level.Use this skill as the default guide for normal Adapter answers.
If deeper examples or expanded docs context are needed, repo-local references are available under:
src/agent-skills/adapter-framework/references/src/agent-skills/adapter-framework/references/index.mdsrc/agent-skills/adapter-framework/references/usage/getting-started.mdsrc/agent-skills/adapter-framework/references/usage/core-concepts.mdsrc/agent-skills/adapter-framework/references/usage/patterns-and-recipes.mdsrc/agent-skills/adapter-framework/references/usage/css-processor.mdsrc/agent-skills/adapter-framework/references/usage/framework-integration.mdsrc/agent-skills/adapter-framework/references/usage/caveats-and-constraints.mdsrc/agent-skills/adapter-framework/references/usage/ai-skill.md