yd-react-expert SKILL.md skillA
yd-react-expert from leeyudok/agents-scaffold is an agent skill: a SKILL.md folder an AI agent loads when a task calls for it.
mdr add leeyudok/agents-scaffold/yd-react-expert@git:20261024.27d9360Pins git:20261024.27d9360 in mdr.lock. Pin the fingerprint instead.
- Audit grade
- A, 17 of 17 checks passed
- Kind
- SKILL.md skill
- Repository
- leeyudok/agents-scaffold
- Path
plugins/yd-skills/skills/yd-react-expert/SKILL.md- Versions recorded
- 1
- Latest version
- git:20261024.27d9360, committed Oct 24, 2026
- Size
- 11,228 bytes
- Repository stars
- 38
- License
- MIT
React 컴포넌트를 설계·구현·리팩터링하거나 상태 관리, useEffect 남용, 리렌더 성능, 접근성 문제를 다룰 때 사용한다. React 19 기준.
Collected from public GitHub. Every version is saved exactly as it was and never changes. Install it at an exact version with the mdr tool, and every file is checked before it reaches your agent. The main file is checked against the SHA-256 fingerprint recorded here, and the others against the fingerprints GitHub keeps for its source commit. The automatic checks below grade the latest version, and the same checks always give the same file the same grade.
What the file says
# yd-react-expert
컴포넌트 코드가 대상이다. 번들러·패키지 매니저·의존성은 `yd-frontend-build`,
디자인 토큰·컴포넌트 선택은 `yd-doksam-ui` 가 맡는다.
이 문서는 **일반론을 적지 않는다.** 판단이 갈리는 지점, 자주 틀리는 곳, React 19 에서
바뀐 것만 담는다.
## 1. 상태는 필요한 만큼만, 있어야 할 곳에
판단 순서:
1. **props 나 기존 상태에서 계산할 수 있는가** → 렌더 중에 계산한다. `useState` + `useEffect`
조합으로 파생값을 동기화하지 않는다. 이 패턴이 버그의 큰 축이다.
2. **여러 컴포넌트가 공유하는가** → 가장 가까운 공통 부모로 올린다. 전역 스토어는
"여러 화면이 같은 서버 상태를 본다"가 성립할 때만.
3. **URL 에 있어야 하는가** — 새로고침·공유·뒤로가기가 의미 있으면 라우터 상태다.
상세 화면·필터·탭이 여기 해당한다.
```tsx
// 나쁨 — 파생값을 상태로 두고 동기화
const [filtered, setFiltered] = useState<Room[]>([])
useEffect(() => { setFiltered(rooms.filter(r => r.name.includes(q))) }, [rooms, q])
// 좋음 — 렌더 중 계산
const filtered = useMemo(() => rooms.filter(r => r.name.includes(q)), [rooms, q])
```
`useMemo` 는 **측정 가능한 비용이 있을 때만**. 배열 몇 개 도는 것에 붙이면 코드만 늘어난다.
## 2. useEffect 는 "외부 시스템과 동기화"에만
effect 를 쓰기 전에 답한다: **이 코드가 맞물리려는 외부 시스템이 무엇인가?**
(네트워크, DOM 이벤트, 타이머, 구독) 답이 없으면 effect 가 아니다.
- **사용자 행동의 결과는 이벤트 핸들러에서 처리한다.** 상태를 바꾸고 그 변화를 effect 로
감지해 후속 작업을 하는 구조는 흐름을 끊고 중복 실행을 부른다.
- **StrictMode 에서 effect 는 두 번 실행된다.** 이건 버그가 아니라 정리(cleanup) 누락을
드러내는 장치다. 두 번 돌아 깨지면 effect 쪽을 고친다. 개발 빌드에서만 일어나고 프로덕션 빌드는 한 번 실행한다.
…Read the whole file at its exact version.
How to install
mdr add leeyudok/agents-scaffold/yd-react-expert@sha256:e8a1cc2fd312da92The line at the top of this page pins the label git:20261024.27d9360, which is what most people want. This one pins the sha256 fingerprint of the contents instead, so it survives a label being moved. Either way the exact version is written to mdr.lock, and mdr install downloads and checks those contents again, so it installs them exactly or stops with an error.
[](https://markdownregistry.com/a/art_gqsqk7k4oxvl2675)
3 badge image fetches in 30 days. What the badge shows.
Versions
The registry has recorded 1 version of this file, committed on Oct 24, 2026.
Audit of the latest version
- pass: Frontmatter block present
- pass: Frontmatter declares a name
- pass: Frontmatter declares a description
- pass: Size between 200 bytes and 200 KB (11228 bytes)
- pass: No zero-width or bidi control characters
- pass: No instruction hidden inside an HTML comment
- pass: No link to an exfiltration or paste host
- pass: No credential-shaped string
- pass: No instruction to send local credentials anywhere
- pass: No text hidden with inline styles
- pass: No prompt-injection phrasing
- pass: No curl or wget piped into a shell
- pass: No recursive delete of root, home or parent
- pass: No instruction to read or print local credentials
- pass: No base64 blob over 200 characters
- pass: No link to a raw IP address
- pass: No script tag
Source
leeyudok/agents-scaffold · 38 stars · license MIT · pushed 2026-11-05 · branch main
API
GET https://markdownregistry.com/api/v1/artifacts/art_gqsqk7k4oxvl2675 GET https://markdownregistry.com/api/v1/resolve?ref=leeyudok/agents-scaffold/yd-react-expert GET https://markdownregistry.com/api/v1/blob/e8a1cc2fd312da92f71c0d80ee97e613dce701727dbb461f536c112c100a8776
Your AI assistant does the legwork. You hear about the deals worth your word. Hand yours the standing instructions at modelranch.com and it joins the network that reads files like this one.
Guides: the SKILL.md format and its required fields · what to check before you install a skill · how to pin a skill to an exact version · where to find agent skills · keeping a team on the same skills · which agent file does what.
More from leeyudok/agents-scaffold
Every file in leeyudok/agents-scaffold