langgenius/dify106 installs

how-to-write-component

Q: How do I install this agent skill?

Run npx skills add https://github.com/langgenius/dify --skill how-to-write-component.

Q: Is this agent skill safe to install?

Review the displayed partner audits, complete source, permissions, dependencies, and exact revision before installing.

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.

How do I install this agent skill?

npx skills add https://github.com/langgenius/dify --skill how-to-write-component

view source ↗

Is this agent skill safe to install?

Gen Agent Trust Hubpass
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.
Socketpass
No alerts
Snykpass
Risk: LOW · No issues

What does this agent skill do?

How To Write A Component

Use this skill to route component architecture decisions to its bundled references. Read only the references required by the current change.

Topic Routing

Component moves, module boundaries, props, types, or owner placement: read references/ownership.md.
Dify UI wrappers or primitive state styling: read the package's Public API authoring and Styling contracts.
Jotai, form drafts, route identity, URL state, or persistence: read references/state.md.
Generated contracts, nullable API data, Query, mutations, SSR, auth, or workspace state: read references/data.md.
Hotkeys, focus, dialogs, menus, popovers, or other secondary surfaces: read references/interactions.md and the overlay guide it references when applicable. Also read references/state.md when the surface owns a draft or other local session state.
Effects, navigation, memoization, preloading, or render cost: read references/runtime.md.

Scope And Verification

Identify the behavior owner, state lifetime, and public contract from the nearby implementation and relevant references. Keep the change within that vertical slice unless the contract requires changes elsewhere. Verify the changed behavior and complete the owning package's required checks. For Web, read web/docs/test.md for test work and web/docs/lint.md for static checks. Dify UI verification is owned by packages/dify-ui/docs/testing.md.

Tailwind CSS

Write canonical Tailwind v4 classes; prefer canonical utilities over equivalent arbitrary values.
Common forms include w-105 instead of w-[420px], px-2.25 instead of px-[9px], bg-linear-to-b instead of bg-gradient-to-b, wrap-break-word instead of break-words, and field-sizing-content instead of [field-sizing:content].

How can the creator link this skill?

Add the canonical catalog link to the repository README so users can inspect current installs and available audits. The publishing guide covers the complete discovery path.

<a href="https://skillzs.dev/skills/langgenius/dify/how-to-write-component">View how-to-write-component on skillZs</a>