Skip to content
skillsafebeta
← Report library
Purpose / Other

Vercel Composition Patterns Skill Security Audit

What the author says it does (original text)

React composition patterns that scale. Use when refactoring components with

Independent security check

Security risks found

Files checked
14
Risks found
1
Could it run dangerous commands?Looks for programs run straight after downloading, remote control of your computer, and hidden commands.No risks found
Could it expose your files or keys?Looks for uploads of files containing passwords or keys, and keys written directly in the code.No risks found
Could it delete files or keep running?Looks for broad file deletion, disk overwrites, and programs set to start automatically.No risks found
Could it bypass safety checks?Looks for skipped website security checks, excessive file access, or actions that skip your approval.Risks found: 1
Medium risk

A Provider boundary can grant draft-reading and submission capabilities to too many descendants

Source references: 3
What we found

The guide explicitly treats the Provider boundary as the access boundary: components inside it can read messages and attachments or call submit even outside Composer.Frame. If an application wraps a large component tree or includes less-trusted third-party components, those descendants receive more capability than the visible UI structure suggests.

Why this matters

Affected descendants could read unsent content, modify shared state, or trigger forwarding/submission. The evidence does not show external disclosure or automatic execution; the risk depends on the Provider's scope and its descendants when this pattern is implemented.

This is a supported architectural risk, not evidence of an actual leak. The guide actively treats Provider scope as sufficient for sharing state, and its example lets descendants outside the Frame invoke submit and read message text and attachments. If an application wraps components that do not need these powers—or less-trusted third-party components—in the same Provider, they may gain draft-reading or submission capability. This is example code and is not executed by the Skill itself. Users can ask the author to clarify that Context is not a security boundary and to recommend the smallest trusted Provider subtree.

rules/state-context-interface.md:140In the instructionsOpen original file
The provider boundary is what matters—not the visual nesting. Components thatneed shared state don't have to be inside the `Composer.Frame`. They just needto be within the provider.
Show 2 other places
rules/state-context-interface.md:171In the instructionsOpen original file
// This button lives OUTSIDE Composer.Frame but can still submit based on its context!function ForwardButton() {  const {    actions: { submit },  } = use(ComposerContext)  return <Button onPress={submit}>Forward</Button>}// This preview lives OUTSIDE Composer.Frame but can read composer's state!function MessagePreview() {  const { state } = use(ComposerContext)  return <Preview message={state.input} attachments={state.attachments} />}
rules/state-lift-state.md:119In the instructionsOpen original file
The ForwardButton lives outside the Composer.Frame but still has access to thesubmit action because it's within the provider. Even though it's a one-offcomponent, it can still access the composer's state and actions from outside theUI itself.**Key insight:** Components that need shared state don't have to be visuallynested inside each other—they just need to be within the same provider.
Could it mislead the AI or hide text?Checks the skill instructions for requests to ignore you, influence the report, or hide text in invisible characters.No risks found
Could it change links or payment recipients without asking?Looks for forced referral or payment changes combined with instructions to hide the change.No risks found

Inside this skill

5 instruction sections

This Skill is a documentation-based guide for React component design. It recommends compound components, context providers, and explicit variants instead of many boolean props. The provided content contains no installation commands, executable scripts, or credential-handling logic.

View source
SKILL.md:4In the instructionsOpen original file
description:  React composition patterns that scale. Use when refactoring components with  boolean prop proliferation, building flexible component libraries, or  designing reusable APIs. Triggers on tasks involving compound components,  render props, context providers, or component architecture. Includes React 19  API changes.license: MIT
SKILL.md:73In the instructionsOpen original file
Read individual rule files for detailed explanations and code examples:```rules/architecture-avoid-boolean-props.mdrules/state-context-interface.md```

The core pattern injects state, actions, and metadata into a shared Context. Descendant components inside the Provider can read or update state and invoke submission actions even when they are outside the main form's visual structure.

View source
rules/architecture-compound-components.md:47In the instructionsOpen original file
```tsxconst ComposerContext = createContext<ComposerContextValue | null>(null)function ComposerProvider({ children, state, actions, meta }: ProviderProps) {  return (    <ComposerContext value={{ state, actions, meta }}>      {children}    </ComposerContext>  )}
rules/state-context-interface.md:171In the instructionsOpen original file
// This button lives OUTSIDE Composer.Frame but can still submit based on its context!function ForwardButton() {  const {    actions: { submit },  } = use(ComposerContext)  return <Button onPress={submit}>Forward</Button>}// This preview lives OUTSIDE Composer.Frame but can read composer's state!function MessagePreview() {  const { state } = use(ComposerContext)  return <Preview message={state.input} attachments={state.attachments} />}
Start here · InstructionsSKILL.md
vercel-composition-patterns
Lines connect the instruction file to its sections, not an observed execution order. Select a section to read the source.
Files and check records14 files

Coverage and gaps

Content covered in each file

These are the source ranges included in this check, not a guarantee that every issue has been resolved.

  • SKILL.mdFull text included
  • AGENTS.mdFull text included
  • metadata.jsonFull text included
  • README.mdFull text included
  • rules/_sections.mdFull text included
  • rules/_template.mdFull text included
  • rules/architecture-avoid-boolean-props.mdFull text included
  • rules/architecture-compound-components.mdFull text included
  • rules/patterns-children-over-render-props.mdFull text included
  • rules/patterns-explicit-variants.mdFull text included
  • rules/react19-no-forwardref.mdFull text included
  • rules/state-context-interface.mdFull text included
  • rules/state-decouple-implementation.mdFull text included
  • rules/state-lift-state.mdFull text included

This report is for the version above. We read the available code and instructions without running the skill or checking extra packages it installs. This is not a promise of safety: a different version or setup may behave differently.

  • AGENTS.mdSupporting file
  • README.mdSupporting file
  • SKILL.mdInstructions
  • metadata.jsonSupporting file
  • rules/_sections.mdSupporting file
  • rules/_template.mdSupporting file
  • rules/architecture-avoid-boolean-props.mdSupporting file
  • rules/architecture-compound-components.mdSupporting file
  • rules/patterns-children-over-render-props.mdSupporting file
  • rules/patterns-explicit-variants.mdSupporting file
  • rules/react19-no-forwardref.mdSupporting file
  • rules/state-context-interface.mdSupporting file
  • rules/state-decouple-implementation.mdSupporting file
  • rules/state-lift-state.mdSupporting file

Operations mentioned in code and instructions

Connect to websites
AGENTS.md:944In the instructionsOpen original file
1. [https://react.dev](https://react.dev)2. [https://react.dev/learn/passing-data-deeply-with-context](https://react.dev/learn/passing-data-deeply-with-context)
AGENTS.md:945In the instructionsOpen original file
1. [https://react.dev](https://react.dev)2. [https://react.dev/learn/passing-data-deeply-with-context](https://react.dev/learn/passing-data-deeply-with-context)3. [https://react.dev/reference/react/use](https://react.dev/reference/react/use)
AGENTS.md:946In the instructionsOpen original file
2. [https://react.dev/learn/passing-data-deeply-with-context](https://react.dev/learn/passing-data-deeply-with-context)3. [https://react.dev/reference/react/use](https://react.dev/reference/react/use)
Lines read
2,043
File checksum (to compare versions)
f967df27ca7db8f83fdf029328b58d1e5de7017da13b253c50b9ff78dde2752b