Skills DirectorySkills Directory
SkillsLearnSecurityCategoriesDocsBlogPro
Sign InSubmit Skill
Skills Directory

Security-tested agent skills for Claude, coding agents, and AI workflows.

Directory

  • Browse Skills
  • All Skills A–Z
  • Claude Skills
  • Claude Code Skills
  • Agent Skills
  • Categories
  • Authors
  • Submit a Skill

Learn

  • Learn Hub
  • Install Claude Skills
  • Write SKILL.md
  • Skills vs MCP
  • Directories Compared

Security

  • Security
  • Methodology
  • Secure Claude Skills
  • Security Badges
  • Chrome Extension
  • Skill Manager

Company

  • About
  • Community
  • Blog
  • API Docs
  • Advertise

2026 Skills Directory. All rights reserved.

ProTermsPrivacyRefunds
Back to skills

Notes Actions

ASecurity

Cross-app save-to-notes components and patterns. Use when adding save-to-notes to a feature, wiring overlay note capture, editing features/notes/actions/ or its consumers, or using QuickCaptureButton, SaveToScratchButton, SaveSelectionButton, QuickNotesSheet, CategoryNotesModal, or openSaveToNotes.

3 stars
0 votes
0 copies
2 views
Added 10/3/2026
developmenttypescriptgoshellapi

Works with

cliapi

Security Analysis

A100/100

Scanned 10/3/2026

$npx -y skills add armanisadeghi/ai-matrx --skill notes-actions --agent claude-code

Installs into .claude/skills of the current project.

Are you the author of Notes Actions?

Add the live security badge to your README — it updates automatically with every re-scan.

Security grade badge for Notes Actions
[![Security: A — Skills Directory](https://www.skillsdirectory.com/api/skills/armanisadeghi-notes-actions/badge)](https://www.skillsdirectory.com/skills/armanisadeghi-notes-actions)

More formats (shields.io, HTML) on the badges page. Keep it an A: scan every change in CI with Pro.

Download with Pro
Files
SKILL.md
---
name: notes-actions
description: "Cross-app save-to-notes components and patterns. Use when adding save-to-notes to a feature, wiring overlay note capture, editing features/notes/actions/ or its consumers, or using QuickCaptureButton, SaveToScratchButton, SaveSelectionButton, QuickNotesSheet, CategoryNotesModal, or openSaveToNotes."
---

# Notes Actions (Cross-App Integration)

## Scope boundary — which skill owns what

This skill owns the **notes-side primitives**: the components under `features/notes/actions/` and the `openSaveToNotes` overlay flow — i.e. HOW a save-to-notes capability is built and wired. It does NOT own the surfaces that expose it:

- An action toolkit on markdown/RichDocument surfaces (where "Save to notes" is one action among many) → `rich-document-actions` skill.
- The live-chat message bar (`AssistantActionBar` / `messageActionRegistry`) → `overlay-system` skill, "Message actions (chat)" section.
- Overlay rendering/registration mechanics (how `openSaveToNotes` actually renders) → `overlay-system` skill.

Come here when adding/altering a notes action component or its provider/API contract; go to those skills when merely consuming save-to-notes from their surfaces.

## Quick Reference

**Source:** `features/notes/actions/`
**Imports:** Direct paths (e.g. `@/features/notes/actions/SaveToScratchButton`, `@/features/notes/service/notesApi`) — root and `actions/index` barrels were removed.
**Living doc:** `features/notes/actions/notes-actions.md` — **must be updated** whenever actions are added, removed, or consumed in new files.

## Available Actions

| Export | What it does |
|--------|-------------|
| `QuickCaptureButton` | Toolbar button dispatching `openSaveToNotes` for the global overlay flow |
| `QuickNoteSaveModal` | Dialog: edit content, pick folder, create vs update (append/overwrite) |
| `QuickSaveModal` | Alias of `QuickNoteSaveModal` |
| `SaveToScratchButton` | One-click `NotesAPI.create` into Scratch (no modal) |
| `SaveSelectionButton` | Reads `window.getSelection()`, saves to folder, clears selection |
| `QuickNotesButton` | Icon button calling `useQuickActions().openQuickNotes()` |
| `QuickNotesSheet` | In-overlay compact notes UI (editor + picker). Needs `NotesProvider` |
| `CategoryNotesModal` | Folder-scoped modal with list/search/CRUD/import + `onSelectNote` callback. Needs `NotesProvider` |
| `WindowNotesBody` | Lightweight single-note editor for windows/panels. Bundles own `NotesProvider`, auto-save, auto-label, tree-view picker |
| `NotesTreeView` | VS Code-style folder/note tree. Single-folder expand, inline create note/folder, `onSelectNote`/`onSelectFolder` callbacks. Needs `NotesProvider` |
| `NotesWindow` | Complete `WindowPanel` with tree sidebar + editor + header actions. Bundles own `NotesProvider`. Accepts all `WindowPanelProps` |
| `SidebarNotesToggle` | Shell sidebar button that toggles a floating `NotesWindow`. No provider needed |

## Integration Patterns

### Pattern 1: Redux overlay dispatch (most common)

Many features skip the button entirely and dispatch `openSaveToNotes` directly:

```typescript
import { openSaveToNotes } from '@/lib/redux/slices/overlaySlice';

dispatch(openSaveToNotes({ content, defaultFolder: 'Scratch' }));
```

`OverlayController` handles dynamic import of `QuickNoteSaveModal` and wraps it with `NotesProvider`.

### Pattern 2: Drop-in buttons

```typescript
import { SaveToScratchButton } from '@/features/notes/actions/SaveToScratchButton';

<SaveToScratchButton content={aiResponse} />
```

No provider or overlay wiring needed — the button calls `NotesAPI.create` directly.

### Pattern 3: Folder-scoped note picker

```typescript
import { CategoryNotesModal } from '@/features/notes/actions/CategoryNotesModal';

<CategoryNotesModal
  folderName="Prompts"
  onSelectNote={(note) => applyPrompt(note.content)}
/>
```

Requires `NotesProvider` ancestor.

### Pattern 4: Embedded sheet

```typescript
import { QuickNotesSheet } from '@/features/notes/actions/QuickNotesSheet';
```

Used inside `OverlayController` or any layout that provides `NotesProvider`.

## Maintenance Rules

**Every time you touch this system, update `features/notes/actions/notes-actions.md`:**

1. New action created → add row to exports table, set usage count to 0
2. Action consumed in a new file → increment count, add file path
3. Consumer removed → decrement count, remove file path
4. Action renamed/deleted → update or remove rows everywhere
5. `openSaveToNotes` usage changed → update its dedicated section

## Key Files

- (Barrels removed — import action components and `NotesAPI` from their source files under `features/notes/`.)
- `features/notes/actions/notes-actions.md` — living usage reference
- `features/notes/service/notesApi.ts` — `NotesAPI` (programmatic CRUD)
- `features/notes/context/NotesContext.tsx` — shared state + realtime
- `features/overlays/OverlayController.tsx` — overlay host for modal/sheet (see the `overlay-system` skill)
- `lib/redux/slices/overlaySlice.ts` — `openSaveToNotes` action creator

## Provider Requirements

| Component | Needs `NotesProvider`? |
|-----------|----------------------|
| `SaveToScratchButton` | No (uses `NotesAPI` directly) |
| `SaveSelectionButton` | No (uses `NotesAPI` directly) |
| `QuickCaptureButton` | No (dispatches Redux action) |
| `QuickNoteSaveModal` | Yes (OverlayController provides it) |
| `QuickNotesSheet` | Yes |
| `CategoryNotesModal` | Yes |
| `WindowNotesBody` | No (bundles its own `NotesProvider`) |
| `NotesTreeView` | Yes |
| `NotesWindow` | No (bundles its own `NotesProvider` + `WindowPanel`) |
| `SidebarNotesToggle` | No (renders `NotesWindow` which bundles everything) |

Attribution

armanisadeghiarmanisadeghi
View sourceSee grades on GitHubMore from armanisadeghi →
SSkills DirectorySkills Directory

Ship a skill? Prove it's safe.

Free 120-pattern security scan, letter grade, and an embeddable README badge.

Submit a skill

Is this your skill, or is something wrong with this listing? Request removal or report an issue. Author removals are honored within 72 hours.

Comments (0)

No comments yet. Be the first to comment!

SSkills DirectorySkills Directory

Ship a skill? Prove it's safe.

Free 120-pattern security scan, letter grade, and an embeddable README badge.

Submit a skill

Related Skills

Clean Code

Pragmatic coding standards - concise, direct, no over-engineering, no unnecessary comments

304955 votes

Browser Extension Developer

Use this skill when developing or maintaining browser extension code in the `browser/` directory, including Chrome/Firefox/Edge compatibility, content scripts, background scripts, or i18n updates.

286712 votes

Seo Optimizer

SEO optimization with keyword analysis, readability assessment, technical validation, content quality. Use for search rankings, blog posts, content audits, or encountering keyword density, readability scores, meta tags, schema markup errors.

2222 votes

Google Official Seo Guide

Official Google SEO guide covering search optimization, best practices, Search Console, crawling, indexing, and improving website search visibility based on official Google documentation

1862 votes

Writing Plans

Use when you have a spec or requirements for a multi-step task, before touching code

2927051 votes
View all in development →