Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add sonature-lab/timsquad --skill tsq-reactgit clone --depth 1 https://github.com/sonature-lab/timsquadWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/sonature-lab/timsquad/tsq-react)<a href="https://agentmods.dev/skills/sonature-lab/timsquad/tsq-react"><img src="https://agentmods.dev/badge/skills/sonature-lab/timsquad/tsq-react/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/sonature-lab/timsquad/tsq-react"><img src="https://agentmods.dev/badge/skills/sonature-lab/timsquad/tsq-react.svg" alt="Reviewed on agentmods" width="80" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00079 | $0.00960 |
| Opus 5.5 | $0.00032 | $0.00384 |
| Sonnet 5.5 | $0.00016 | $0.00192 |
| Haiku 4.5 | $0.00008 | $0.00096 |
Grade A, and why
tsq-react scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 1mo ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 90 lines — stays where its author put it; the contents beside it link to each section on GitHub.
React Development Guidelines
프로젝트 전체에서 일관된 React 컴포넌트 개발을 위한 컨벤션.
기본 스택: React Query, Zustand, React Hook Form + Zod. 프로젝트 설정(memory/conventions.md)으로 재정의 가능.
Philosophy
- 컴포넌트는 단일 책임
- UI와 로직 분리 (커스텀 훅)
- Props로 명시적 데이터 흐름
- 서버 상태와 클라이언트 상태 분리
Resources
25개 규칙 (TimSquad 3 + Vercel 22). 카테고리 인덱스: _sections.md
| Priority | Type | Resource | Description |
|---|---|---|---|
| CRITICAL | rule | async-parallel | Promise.all 병렬 실행 (2-10x) |
| CRITICAL | rule | bundle-barrel-imports | barrel import 피하기 |
| HIGH | rule | component-conventions | 컴포넌트 구조, export, 크기 제한 |
| HIGH | rule | state-location | 상태 관리 선택 기준 |
| HIGH | rule | server-parallel-fetching | 서버 병렬 fetch |
| HIGH | rule | rerender-memo | React.memo 최적화 |
| MEDIUM | rule | anti-patterns | Props Drilling, useEffect 남용 |
Quick Rules
컴포넌트
- 함수형 컴포넌트 + Props interface
- named export (
export function, default export 금지) - 200줄 이하
- forwardRef로 ref 전달 지원
훅
- 커스텀 훅으로 로직 분리 (
use접두사) - 의존성 배열 정확히 관리
- 함수형 setState로 stale closure 방지
- 조건문/반복문 안에서 훅 호출 금지
- useEffect 남용 금지 (파생 상태는 useMemo)
상태 관리
- 서버 상태: React Query (TanStack Query)
- 전역 UI 상태: Zustand
- 로컬 상태: useState
- 복잡한 로직: useReducer
- 비싼 초기값: lazy init (
useState(() => ...)) - Props drilling 3단계 이상 → Context 또는 Zustand
성능 (vercel-react-best-practices 참조)
- 리스트에 고유 key (index 금지)
- Promise.all로 병렬 fetch
- barrel import 피하기 (직접 import)
- dynamic import로 무거운 컴포넌트 분리
- content-visibility로 대량 리스트 최적화
- toSorted()로 배열 불변성
폼
- React Hook Form + Zod (zodResolver)
- onBlur 유효성 검사, submit 시 첫 에러 필드 포커스
Checklist
| Priority | Item |
|---|---|
| CRITICAL | 함수형 컴포넌트 + Props 타입 정의 |
| CRITICAL | 커스텀 훅으로 로직 분리 |
| CRITICAL | 서버 상태는 React Query |
| CRITICAL | Error Boundary로 에러 격리 |
| CRITICAL | Waterfall 제거 (Promise.all) |
| CRITICAL | Barrel import 피하기 |
| HIGH | 의존성 배열 정확히 관리 |
| HIGH | 리스트에 고유 key (index 금지) |
| HIGH | 폼은 React Hook Form + Zod |
| HIGH | 함수형 setState 사용 |
| HIGH | Dynamic import 분리 |
| MEDIUM | 대량 리스트 가상화 / content-visibility |
| MEDIUM | 불필요한 useEffect 제거 |
| MEDIUM | RSC 경계에서 필요한 데이터만 전달 |
What ships with it
26 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
- rules/_sections.md 3.5 KB
- rules/anti-patterns.md 1.4 KB
- rules/async-api-routes.md 1.1 KB
- rules/async-defer-await.md 2.0 KB
- rules/async-dependencies.md 942 B
- rules/async-parallel.md 654 B
- rules/async-suspense-boundaries.md 2.4 KB
- rules/bundle-barrel-imports.md 2.3 KB
- rules/bundle-defer-third-party.md 920 B
- rules/bundle-dynamic-imports.md 791 B
- rules/component-conventions.md 1.6 KB
- rules/js-combine-iterations.md 753 B
- rules/js-early-exit.md 1.1 KB
- rules/js-index-maps.md 837 B
- rules/js-set-map-lookups.md 532 B
- rules/rendering-conditional-render.md 980 B
- rules/rendering-content-visibility.md 815 B
- rules/rendering-hoist-jsx.md 1.0 KB
- rules/rerender-defer-reads.md 973 B
- rules/rerender-derived-state.md 724 B
- rules/rerender-memo.md 1.1 KB
- rules/rerender-transitions.md 1.0 KB
- rules/server-after-nonblocking.md 2.0 KB
- rules/server-cache-react.md 681 B
- rules/server-parallel-fetching.md 1.5 KB
- rules/state-location.md 1.4 KB
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 1mo ago First seen · 90 lines · 79 tokens per session scan A 39b51ce2ee34
tsq-react is a skill published in the GitHub repository sonature-lab/timsquad (12 stars, last pushed 1mo ago), licensed MIT. It adds 79 tokens to every session and 960 once invoked, about $0.0003 per session on Opus 5.5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.
Other skills, from other repositories
next-cache-components-adoption
Turn on Cache Components in a Next.js app and resolve the blocking routes it surfaces. Use when the user wants to enable, adopt, or migrate to Cache Components, flip the cacheComponents flag, work through a flood of blocking-prerender / instant validation errors, run the cache-components-instant-false codemod, or…
next-cache-components-optimizer
Optimize the meaningful UI available immediately from a Next.js route on an initial load (hard navigation) or named client-side navigation (soft navigation). Encode the goal as a failing @next/playwright instant() e2e and work it to green, one verified route and entry point at a time; the shipped test then guards…
next-partial-prefetching-adoption
Turn on Partial Prefetching in a Next.js app and work through the insights it surfaces. Use when the user wants to enable or adopt Partial Prefetching, flip the partialPrefetching flag, opt routes in with export const prefetch = 'partial', audit Link prefetch={true} behavior, preserve existing prefetched UI with…
next-dev-loop
Verify Next.js runtime behavior after editing app code. Use this skill to confirm a change actually works in a running app — not just that it compiles or type-checks. Combines /next/mcp (Next.js's view) with agent-browser (the browser's view). Requires a running next dev.
next-bundle-optimizer
Audit and reduce Next.js browser initial-load work. Use for slow route startup, oversized client bundles, duplicate browser dependencies, or features that can wait for interaction.
shadcn
Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI, including chat interfaces. Provides project context, component docs, and usage examples. Applies when working with shadcn/ui, component registries, presets, --preset codes, or any project with a components.json…