메뉴
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