skilld
All skills
langgenius avatar

/how-to-write-component

@22aff66
by langgeniuslanggenius/dify158k stars
24,861

Use when implementing or refactoring React/TypeScript components and the task requires decisions about component ownership, feature boundaries, state, data flow, effects, or interaction ownership. Do not use for review-only requests, test-only work, copy-only edits, or styling-only changes.

Ask your Agent

Use this Skill: https://skilld.dev/gh/langgenius/dify/how-to-write-component

This session only. Nothing lands on disk.

referencesinteractions.md

≈592 tokens on demand. Your agent reads this file only when SKILL.md points to it.

Component Interactions And Overlays

Read this document when a change involves application hotkeys, focus, dialogs, menus, popovers, or other secondary surfaces. Overlay primitive selection and layering are owned by the overlay contract.

Focus And Semantics

  • Preserve a visible focus indicator on the final focusable element. Styled Dify UI controls usually provide it; headless anatomy parts and direct trigger exports may not.
  • Native buttons, links, custom trigger renderers, clickable rows, icon controls, and menu-like items must retain their correct native semantics and accessible name.
  • Do not hide an outline without an equivalent visible focus-visible treatment. Follow an existing Dify UI pattern rather than inventing a call-site style.

Keyboard Commands

  • Keep widget navigation, dialog dismissal, and editor commands in their local primitive or owner.
  • For Web application commands, follow Keyboard commands for TanStack registration, typed bindings, targets, event consumption, display, and verification. Do not recreate that policy in a wrapper or a second command framework.

Secondary Surfaces

  • Follow the overlay contract for primitive choice and shared mechanics. The nearest consumer AGENTS.md owns application-specific composite reuse policy.
  • Separate behavior ownership from placement ownership: the action may own trigger, open state, and menu content while the caller owns slots, offsets, and alignment.
  • Keep menu and dialog surfaces as siblings when a menu command opens a dialog. Mount the dialog outside popup content.
  • Use the overlay contract to determine content lifetime and preserve the Root's closing lifecycle. Follow state ownership for draft placement and semantic identity; portal placement alone does not locate the state owner.
  • Place query subscriptions and mutation observers at the owner whose lifetime matches when they should run. Mounted-session work may belong inside content; work that must start or stop exactly with open needs an explicit open-state condition.
  • Prefer primitive-owned open state unless another owner must observe or coordinate it. Analytics callbacks and local cleanup alone do not require a controlled root.

Source: SKILL.md on GitHub

Third-party checks

No alerts2d3 checks · Risk SAFE
  • Gen Agent Trust Hub2d

    The skill 'how-to-write-component' is a comprehensive set of coding standards and architectural guidelines for React and TypeScript development. It contains no executable code, network operations, or sensitive data access, serving purely as an instructional resource for the AI agent.

  • Socket2d

    No alerts

  • Snyk2d

    Risk: LOW · No issues

Provenance

Signed by skilld at 22aff66. This ties the file your Agent reads to that commit on GitHub. It does not review the instructions.

Last checked against GitHub 20 hours ago.

Activeupdated 2 weeks ago

README badge

README badge for langgenius/dify/how-to-write-component