본문으로 건너뛰기
cccskills
무료GitHub에 공개

code-ts

TypeScript code shape inside a well-named module — taste, not lint. Prefer one class or namespace per file (the unit a test targets) over scattered free exports; consolidate related code, don't fragment. The unit of code should be the unit of spec. Use when authoring TS in `editor/grida-canvas*`, `editor/lib/`, or `packages/*`. Sibling to the `naming` skill; React-specific shape lives in `code-react`.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

설치 방법 보기

포함된 파일(1)

  • SKILL.md4.8 KB

SKILL.md(원문)

설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.

code-ts

Vanilla TS conventions (PascalCase types, kebab-case files, use-* hooks) are table stakes — assume them. This is the taste on top. Where naming decides the boundary of a module, code-ts decides what the code inside that boundary looks like so it stays testable and the boundary keeps doing its job.

One class or one namespace per file

The exported unit should be a single thing a test can target: one class with cohesive methods, or one export namespace (or const-as-namespace) wrapping related functions. Avoid the alternative — a file that exports ten free functions and a handful of types side-by-side.

Why:

  • import { css } from "./css" then asserting against css.toReactCSSProperties(...) mirrors the file's structure 1:1. Tests, callers, and grep all read the same shape.
  • Scattering free exports loses the gate naming worked to establish. The file becomes a bag — anything can drift in alongside.
  • The unit becomes mockable and replaceable as a contract, not a pile of helpers.

The repo lives this. editor/grida-canvas/data-transfer.ts is a 24-line export namespace datatransfer carrying a type, a key, and an encode/decode pair, and nothing else. editor/grida-canvas-utils/css.ts is a single export namespace css with ~20 CSS-conversion functions inside, paired one-to-one with editor/grida-canvas-utils/css.test.ts. editor/grida-canvas/editor.ts is the Editor class — the engine's front door, one contract surface for everything downstream.

Not class or namespace everywhere

This is not "always use a class" or "always use a namespace." It is that the code most worth grouping in this repo — engine logic, library modules, contract-bearing utilities — is overwhelmingly stateful or spec-bearing, and reads better that way. UI glue, route handlers, one-shot scripts, and small page-local helpers can be plain exports.

Heuristic: if the filename is a noun that naming would approve (one concept, strict, honest), the contents probably want to live under that noun as a class or namespace. If the file is named for its location in a feature flow (page.tsx, loader.ts, route.ts), free exports are fine.

Consolidate, don't fragment

Prefer one coherent file with a namespace of five methods over five files each exporting one function. Five files force callers to remember five paths and force you to invent five names that didn't need to exist; one namespace exposes one path with five methods, and shared private helpers stay private without ceremony.

This is the inside-the-file consequence of the same discipline naming applies at the directory level — flatten with siblings, don't nest to hide drift. Siblings (the painter.rs / painter_geometry.rs pattern) are for things that earned their own gate, not for shaving a namespace into chunks.

The negative tell: a directory whose index.ts is a wall of re-exports from one-function files. That is a namespace pretending to be a folder.

The spec is the shape

The unit of test should be the unit of code. A namespace css paired with css.test.ts, where each describe block targets one css.<fn>, is the shape this repo expects.

Why:

  • The test file becomes a readable spec of the module's public contract. A reader can enumerate the module's surface without opening the source.
  • It keeps the public surface honest. Anything not in the test is suspect — either dead, or doing work behind the contract that should be exposed.

editor/grida-canvas-utils/css.ts and its css.test.ts are the canonical example: namespace methods map directly to test suites. editor/lib/templating/template.ts and template.test.ts show the same shape for a single-function module.

Co-locate tests as *.test.ts siblings to the source, unless the module already uses a __tests__/ directory — then follow local convention.

The short version

  • One class or one namespace per file. The exported unit is what a test targets.
  • Not everywhere — engine and library code want this shape; UI glue and route handlers don't.
  • Consolidate over fragment. Five one-function files want to be one namespace.
  • The test file should read like the spec of the module. If it doesn't, the export surface is wrong, not the test.

See also naming for the boundary discipline this builds on, and code-react for React-specific shape.

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

댓글

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

보내면 바로 공개됩니다. 이메일 주소나 전화번호 같은 개인 정보는 쓰지 마세요. URL은 2개까지입니다.

0 / 1,000자

이 양식은 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

같은 저장소의 스킬

Grida AI agent system work: `@grida/daemon` (DaemonServer, loopback HTTP perimeter, files/workspaces, secrets store, daemon discovery) and `@grida/agent` (the agent tenant: sessions, providers/BYOK, runtime/tool execution, skills discovery, prompts, tiers, sandbox hosts). Use for `packages/grida-daemon/**`, `packages/grida-ai-agent/**`, desktop sidecar protocol changes, agent chat transport, and bugs in agent state or streams. For pure Electron window, preload, menu, deep-link, or CDP work, use `desktop`.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

gridaco/grida2.7천2026년 10월 15일 업데이트

ai-models

무료

Research, compare, and update shared AI model JSON for TypeScript, web, and Rust consumers. Covers text model tiers, image and video generation models, image tool models, release provenance, pricing data sourcing, and product-side catalogue cost estimates. Use when bumping model versions, adding new models, updating pricing, or auditing model specs against provider documentation.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

gridaco/grida2.7천2026년 10월 15일 업데이트

React-specific code shape in the Grida editor. Hooks cannot be tested or benchmarked and silently break tuned UX under layered composition, so they are barred from the engine and main system — load-bearing logic lives in classes and namespaces, hooks only as thin edge wires. `data-testid` follows component-root discipline: one per significant component, not scattered. Use when authoring React in `editor/grida-canvas-react/`, `editor/components/`, `editor/scaffolds/`, or `editor/app/*`.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

gridaco/grida2.7천2026년 10월 15일 업데이트

database

무료

Use BEFORE editing any file in `supabase/migrations/` or `supabase/schemas/`, OR when the user runs a `/database` subcommand (`compact local migration`, `rls scenarios`, `align`). Encodes the three contracts that protect the Grida database layer: applied migrations are immutable, RLS implementation mirrors tests (never the reverse), `schemas/*.sql` is the human-readable end-state. Companion to `supabase/AGENTS.md` (RLS, grants, security boundaries).

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

gridaco/grida2.7천2026년 10월 15일 업데이트

desktop

무료

Grida Desktop Electron shell and release-impact work: BrowserWindow, preload, `window.grida`, menus, protocol/deep links, file associations, Forge, path-scoped bridge security, Electron-only UI bugs, and CDP / Playwright verification. Use for `desktop/`, `editor/app/desktop/**`, `editor/scaffolds/desktop/**`, `editor/lib/desktop/**`, `/desktop/*` CSP, GRIDA-SEC-004, and deciding whether linked-package or hosted-renderer changes require a native Desktop version bump or coordinated release. For implementing daemon/agent-tenant core behavior, use `agent-system` as well.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

gridaco/grida2.7천2026년 10월 15일 업데이트

docs

무료

Decide which family a doc belongs to before drafting — SDK/developer, user/product, or working-group (WG) — since family sets the audience, home, and tone. Use when creating, moving, or restructuring docs, when unsure which directory a doc belongs in, or when a request says "document this" / "write docs for X" without naming the kind. Routes to the specialized skill for each family.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

gridaco/grida2.7천2026년 10월 15일 업데이트

gridaco의 스킬 모두 보기

이 스킬의 문제 신고