how-to-write-component
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.
Profile →npx skills add langgenius/dify --skill how-to-write-component --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# 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. ## First Decisions | Question | Default | Promote only when | | --- | --- | --- | | Where should code live? | In the product workflow, route, or feature owner. | Several verticals need the same stable contract. | | Who owns state and handlers? | The lowest visual owner that consumes them. | A parent coordinates one workflow or consistent snapshot. | | Should state enter Jotai? | Keep component and form state local. | Siblings need one source of truth or scoped workflow persistence. | | Who owns URL state? | Next.js route APIs and `nuqs`. | Atoms require a read-only route-identity bridge. | | Who owns remote state? | TanStack Query at the lowest consumer. | Atom state drives the query or shared derivations consume it. | | Is a wrapper needed? | Use the primitive or direct code. | The wrapper owns behavior, validation, state, or semantics. | | Is an Effect needed? | Derive during render or handle the user action. | A named external system must be synchronized. | ## Topic Routing - Component moves, module boundaries, pr
- First Decisions
- Topic Routing
- Workflow
What does the how-to-write-component skill do?
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 it?
Run `npx skills add langgenius/dify --skill how-to-write-component --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From langgenius/dify, a repository with 151,326 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.