skills.rest
langgenius
langgeniusOFFICIAL
Explore all skills by this author →
Website𝕏@dify_aiGitHub

how-to-write-component

Guide React and TypeScript component architecture decisions for ownership, state, and data flow.

154k|24.3k|Updated Apr 12, 2023
Search Tags:#next.js#component architecture#typeScript#Jotai#Tanstack Query#reAct#dify ui
One-click install
npx skills add https://github.com/langgenius/dify --skill how-to-write-component
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: how-to-write-component
Source: https://github.com/langgenius/dify/tree/main/.agents/skills/how-to-write-component
Command: npx skills add https://github.com/langgenius/dify --skill how-to-write-component

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Implementing React components in a large codebase often leads to inconsistent ownership of state, scattered data fetching, and unclear module boundaries. This Skill routes component architecture decisions to specific reference guides so changes follow established patterns for ownership, state, data, interactions, and runtime effects.

Core Features & Use Cases

  • Ownership Routing: Decide where components, hooks, types, and atoms should live based on product workflow and feature boundaries.
  • State and URL Decisions: Choose between local state, Jotai atoms, TanStack Query, and Next.js route APIs for state ownership.
  • Data and Query Patterns: Apply generated contracts, query options, mutations, and SSR rules for API consumption.
  • Interaction and Overlay Guidance: Configure hotkeys, focus, dialogs, menus, and popovers using the overlay contract.
  • Use Case: When refactoring a feature page that mixes Jotai state, TanStack Query data, and a modal dialog, this Skill directs you to the relevant references for state ownership, query handling, and overlay mechanics.

Quick Start

Use the how-to-write-component skill to plan the architecture for a new React feature page that needs Jotai state, TanStack Query data, and a modal dialog.

Frequently Asked Questions about how-to-write-component

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I decide where a React component should live in a large codebase?▼

Place components in the product workflow, route, or feature owner that owns the behavior. Promote code outside a feature only when multiple verticals share the same stable contract, not for speculative reuse.

When should I use Jotai atoms versus local React state?▼

Keep synchronous state local when one component owns it. Use feature-scoped Jotai when siblings need one source of truth, atom values drive other atoms, or a workflow must preserve state across unmounted steps.

Should I use TanStack Query or Jotai for server data?▼

Keep server and cache state in TanStack Query at the lowest consumer. Use atomWithQuery when query input comes from atom state, and avoid unwrapping atoms in components solely to call useQuery.

How do I handle URL state in Next.js with nuqs?▼

Treat useParams, route arguments, and nuqs as the owners of URL identity and updates. Hydrate primitive atoms at the route boundary only when query atoms require route identity, and keep URL writes in route APIs.

When should I use React useEffect versus handling events directly?▼

Use Effects only to synchronize with a named external system such as a browser API, subscription, timer, or imperative DOM API. Derive values during render or handle user actions directly instead of using Effects for state transformation.

What is the overlay contract for dialogs and popovers in Dify UI?▼

The overlay contract in packages/dify-ui/docs/overlays.md defines primitive choice and shared mechanics for dialogs, menus, and popovers. Separate behavior ownership from placement ownership and keep controlled overlay roots at the coordination owner.

Related Skills

Explore More Software Engineering Skills→
Hubble-incHubble-inc

create-spec

Generate machine-readable implementation specifications from BDD-formatted PRDs.

Official
Advanced
doc-detectivedoc-detective
13

doc-testing

Convert documentation into Doc Detective test specifications for browser testing.

Official
Advanced
goddard-aigoddard-ai

radix-primitives

Guide developers in building accessible React UI components with Radix Primitives.

Official
Advanced
MinhAnh-CorpMinhAnh-Corp

react-state-management

Provide structured React state management patterns for local, global, and server state.

Official
Advanced