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.
SkillScore74Maintained
Automatic
◆Frontend / UI pack
Last verified 9/27/2026
What it changes
Passed 17 of 23 test cases with the skill, and 3 of 23 without it.
Without skill13%
With skill74%
Checks it passed that the model alone missed
Recommends wrap-break-word instead of break-words
Cites web/docs/test.md for running web test suites
Cites web/docs/lint.md for static check verification
and 14 more in the full report
14 fixed3 passed either way6 still failing0 broke
Pass-rate lift
+61 pp
Tokens
-31%
Agent turns
0%
Response time
-48%
Model gemini-3.6-flashMeasured 9/27/2026v317 of 23 cases passed with skill
Tokens, turns and time describe resource use, not a dollar price.
See it in action
One of 14 test cases the skill fixed. Same model, same prompt, with and without the skill.
1 of 14
Prompt
I modified a shared primitive component located in `packages/dify-ui`. Which specific documentation file in that package describes the required verification and test procedures?
What was checked, without and with the skill
Checked
Without skill
With skill
Cites packages/dify-ui/docs/testing.md for package verification
Missed
Passed
case-11 · gemini-3.6-flash · 9/27/2026 · answers are capped and redacted
What's inside
The instructions your model reads when the skill loads.
SKILL.md29 lines6 files
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.
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.
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].