smart-connections-component-patterns
Smart Connections Component Patterns
Use this skill when editing or creating Smart Connections UI components under src/components/**, especially when you need to preserve the project’s component lifecycle, listener guards, and env/settings fallbacks.
Critical
- Keep component work inside
src/components/**; do not move UI logic intosrc/main.js, release scripts, or migration files. - Match the existing component lifecycle used in this repo:
build_html(...)→render(...)→post_process(...). - Guard all event attachment with
if (!container._has_listeners)so rerenders do not duplicate handlers. - Prefer existing helpers and patterns from:
src/components/connections-list/v4.jssrc/components/connections-list-item/v3.jssrc/components/connections-view/v3.jssrc/components/connections_codeblock.jssrc/components/lookup/item_view.js
- Keep fallbacks explicit, especially
opts.connections_settings ?? env.connections_lists.settingsor the equivalent env fallback used by nearby components.
Instructions
- Pick the closest reference component before coding.
- For list item UI, start with
src/components/connections-list-item/v3.js. - For list rendering, start with
src/components/connections-list/v4.js.
- For list item UI, start with
More from zpankz/obsidian-skills
viva-llm
Use VIVA LLM for multi-provider chat, voice calls, terminal integration, assistants, skills, MCP tools, and agent mode inside Obsidian. Trigger when the user mentions VIVA LLM, voice chat, realtime voice, LLM providers in Obsidian, or vault-integrated AI chat.
1obsidian-plugin-accessibility
Use this skill when building or reviewing Obsidian plugin UI for keyboard access, ARIA labels, screen reader support, focus handling, or mobile touch targets. Accessibility is treated as mandatory, not optional.
1tasks
Create and query tasks using the Tasks plugin syntax including due dates, recurrence, priorities, and task queries. Use when the user mentions Tasks plugin, recurring tasks, task queries, or advanced task management in Obsidian.
1dataview
Create Dataview queries using DQL (Dataview Query Language), inline queries, and DataviewJS. Use when the user mentions Dataview, DQL, querying notes, listing notes by metadata, or creating dynamic views of vault content.
1defuddle
Extract clean markdown from web pages using Defuddle CLI, removing clutter to save tokens. Use when the user provides a URL to read or analyze.
1datacore
Create Datacore views using JSX/React syntax and the dc.* API. Use when the user mentions Datacore, dc.useQuery, JSX views, or React-based vault queries. Datacore is the successor to Dataview with better performance and interactive views.
1