How do I install the Drawer skill?

Run npx skillmds@latest add linuxfoundation/drawer in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Drawer safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Drawer?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Drawer free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Drawer?

linuxfoundation (@linuxfoundation) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Drawer by linuxfoundation — Agent Skill

Name: Drawer
Author: linuxfoundation

Drawer

Use when building or modifying a Self Serve drawer component — slide-in detail panels with lazy data loading, chart integration, two-way `[(visible)]` bindings, and the standard responsive width class chain. Trigger phrases include "building a drawer", "open in a drawer", "drawer component", "lazy-load on open", "side panel".

File contents

Self Serve Drawer Skill

You are building or modifying a Self Serve drawer. Drawers are slide-in detail panels built on p-drawer with strict conventions for visibility, lazy data, chart integration, and responsive sizing.

When to use

A new module asks for a "drawer", "side panel", or "detail panel" that slides in.
An existing drawer needs new sections, charts, or async data.
A list-row click needs to open detail content without a route change.
A component currently uses DialogService.open for content that should slide rather than modal-pop.

If the work is a modal dialog (not a slide-in), this skill does not apply.

Workflow

Re-read docs/architecture/frontend/drawer-pattern.md (the reference linked below). The full pattern — visibility model, lazy load via toObservable(visible).pipe(skip(1), switchMap(...)), forkJoin for parallel calls, chart computed() signals, responsive width — is the source of truth.
Check what exists — read at least one current drawer in the touched module before generating new code to match the team's current shape.
Place files following the component placement table in docs/architecture/frontend/component-architecture.md (and the high-level decision tree in docs/architecture/placement.md).
Generate three files (.component.ts, .component.html, .component.scss) with the LFX license header on each. Follow the 11-section class structure from .claude/rules/component-organization.md.
Wire visibility with model<boolean>(false) — two-way [(visible)] from the parent.
Lazy-load data on open — toSignal over toObservable(this.visible).pipe(skip(1), switchMap(...)); reset drawerLoading to false on close. forkJoin for parallel calls.
Use the standard width chain — xl:w-[45%] lg:w-[55%] md:w-[70%] sm:w-[90%] w-full.
Run yarn format after writing files. Report what was changed.

Reference

docs/architecture/frontend/drawer-pattern.md — the canonical drawer architecture doc. Treat this as the source of truth; do not maintain a separate copy under this skill.

Scope boundaries

This skill does NOT cover modal dialogs (DialogService.open) — they have a different lifecycle.
It does NOT cover routing changes — drawers stay in-place.
For broader component conventions (signals, PrimeNG wrappers, templates), defer to /self-serve-dev and .claude/skills/self-serve-dev/references/frontend-code-generation.md Section 1.

---name: drawerdescription: Use when building or modifying a Self Serve drawer component — slide-in detail panels with lazy data loading, chart integration, two-way `[(visible)]` bindings, and the standard responsive width class chain. Trigger phrases include "building a drawer", "open in a drawer", "drawer component", "lazy-load on open", "side panel".---# Self Serve Drawer SkillYou are building or modifying a Self Serve drawer. Drawers are slide-in detail panels built on `p-drawer` with strict conventions for visibility, lazy data, chart integration, and responsive sizing.## When to use- A new module asks for a "drawer", "side panel", or "detail panel" that slides in.- An existing drawer needs new sections, charts, or async data.- A list-row click needs to open detail content without a route change.- A component currently uses `DialogService.open` for content that should slide rather than modal-pop.If the work is a modal dialog (not a slide-in), this skill does not apply.## Workflow1. **Re-read** `docs/architecture/frontend/drawer-pattern.md` (the reference linked below). The full pattern — visibility model, lazy load via `toObservable(visible).pipe(skip(1), switchMap(...))`, `forkJoin` for parallel calls, chart `computed()` signals, responsive width — is the source of truth.2. **Check what exists** — read at least one current drawer in the touched module before generating new code to match the team's current shape.3. **Place files** following the component placement table in `docs/architecture/frontend/component-architecture.md` (and the high-level decision tree in `docs/architecture/placement.md`).4. **Generate three files** (`.component.ts`, `.component.html`, `.component.scss`) with the LFX license header on each. Follow the 11-section class structure from `.claude/rules/component-organization.md`.5. **Wire visibility with `model<boolean>(false)`** — two-way `[(visible)]` from the parent.6. **Lazy-load data on open** — `toSignal` over `toObservable(this.visible).pipe(skip(1), switchMap(...))`; reset `drawerLoading` to `false` on close. `forkJoin` for parallel calls.7. **Use the standard width chain** — `xl:w-[45%] lg:w-[55%] md:w-[70%] sm:w-[90%] w-full`.8. **Run `yarn format`** after writing files. Report what was changed.## Reference- [`docs/architecture/frontend/drawer-pattern.md`](../../../docs/architecture/frontend/drawer-pattern.md) — the canonical drawer architecture doc. Treat this as the source of truth; do not maintain a separate copy under this skill.## Scope boundaries- This skill does NOT cover modal dialogs (`DialogService.open`) — they have a different lifecycle.- It does NOT cover routing changes — drawers stay in-place.- For broader component conventions (signals, PrimeNG wrappers, templates), defer to `/self-serve-dev` and `.claude/skills/self-serve-dev/references/frontend-code-generation.md` Section 1.

Frequently asked questions