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

develop-app

Extend an existing Twenty app with data fields, layouts, custom screens, automated logic, workflows, and permissions. The skill guides code organization, entity creation, type checking, linting, and syncing definitions to the active remote.

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

원문원문 설명 보기

Use when the user wants to add or modify Twenty app entities, including objects, layouts, logic functions, and front components inside an existing Twenty app.

설치 방법 보기

이럴 때 유용합니다

  • Add custom fields and objects to an existing Twenty app
  • Build custom screens and standalone pages
  • Run logic when records are created
  • Add manual workflows, roles, and permissions

포함된 파일(2)

  • SKILL.md7.2 KB
  • agents/openai.yaml258 B

SKILL.md(원문)

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

When To Use

Pick this skill when the user wants to change what an existing Twenty app does — its data model, UI, logic, or workflows. Representative triggers:

  • "add a new object to my Twenty app"
  • "create a logic function that runs on record create"
  • "add a custom field to the company object"
  • "build a front component for the deal page"
  • "modify an existing entity / object / field"
  • "add a workflow with a manual trigger"
  • "add roles and permissions to my app"
  • "create a standalone page in my app"

Do not use this skill to scaffold a brand-new app (use create-app), to sync/deploy/troubleshoot (use manage-app), to prepare marketplace assets (use publish-app), or to query workspace records (use use-twenty-mcp).

Boundaries

For background on how Twenty apps work — the SDK packages, remotes, sync lifecycle, and rendering model — read ../../references/concepts/how-apps-work.md. Cross-skill operating rules that apply to every Twenty app task are in ../../references/concepts/operating-rules.md; they are authoritative and not restated per skill.

Do not scaffold a new app here. Use create-app first when the app does not exist.

Workflow

First, confirm the setup is sane before changing entities. The current directory should be the root of an existing Twenty app:

test -f package.json
test -f src/application-config.ts

If either file is missing, do not edit blindly. Inspect nearby folders to find the app root, or use create-app when the app does not exist.

If setup, dependencies, remotes, authentication, sync, build, deploy, logs, or CI/CD are failing, switch to manage-app before continuing with entity work.

For app shape and entity file structure, read ../../references/develop-app/app-structure.md.

Plan Before Editing

For any change involving more than one entity, state the plan back in 3–6 lines before editing: objects extended, fields added, logic functions and post-install hooks declared, whether the app needs UI. Confirm with the user when there is a real choice.

Skip for single-entity edits, renames, and copy fixes.

Code Organization

Keep logic functions, post-install hooks, and front components narrow. Extract everything that is not the trigger, inputs, writes, rendering shell, or external call:

  • src/utils/<name>.util.ts — pure helpers (parsers, mappers, formatters).
  • src/front-components/utils/<name>.util.ts — front-component runtime helpers that are reusable and testable.
  • src/types/<name>.ts — external API and internal DTO types (one PascalCase type per file).
  • src/<service>-client/<name>.ts — wrappers around external SDKs or shared HTTP clients. One folder per service, matching Twenty's *-client convention.

Kebab-case filenames. One export per file is mandatory for every helper, type, and client file in src/ — never multiple function exports in one file. The rule counts exports: a local (non-exported) type may stay alongside the util, but once a type is exported or reused it splits into a src/types/<name>.ts file separate from the src/utils/<name>.util.ts file. See app-structure.md for the canonical rule and the full suffix convention.

Refactor when:

  • A *.logic-function.ts or *.post-install.ts file exceeds the soft cap (see ../../references/develop-app/logic.md).
  • A front component contains duplicated command execution, record loading, logic-function lookup, payload building, result parsing, or snackbar formatting.
  • The same parsing or mapping logic appears across object types.
  • Multiple field files differ only by name and identifier — use a factory under src/fields/.

Always create a *.spec.ts test file in a sibling __tests__/ folder for every util/function you add or change, one spec file per source file. See ../../references/develop-app/tests.md.

When a front component triggers a logic function for selected records, always prefer a bulk-capable logic function unless the user explicitly states that the function is only for one record. The default payload shape is records: Array<{ id: string; ...fields }>: inside records, use id for the Twenty record ID because the array name already establishes the record context. Do not add flat single-record compatibility payloads unless the user explicitly asks to preserve an existing single-record API.

Adding New Entities

Use a CLI to add new entities. It generates the correct file structure, UUIDs, SDK imports, and boilerplate. Check first for the standalone CLI, which works without a terminal:

command -v twenty && twenty app add object --name invoice --name-plural invoices --create-view --create-navigation-menu-item --create-page-layout --no-input

Otherwise run yarn twenty dev:add in an interactive terminal. The full order of options, including what to do when neither CLI can run, is rule 3 of the operating rules linked above.

After Entity Changes

Once all edits for the change are complete, run lint and typecheck once at the end (not after each individual edit), then sync the app to the active remote:

yarn twenty dev:typecheck
yarn lint
yarn twenty apply

yarn twenty dev:typecheck checks generated app types, yarn lint checks local lint rules, and yarn twenty apply syncs entity definitions to the active remote. Run all three a single time once every edit is done, not repeatedly after each step. When the user explicitly asks to run tests, follow ../../references/develop-app/tests.md.

Use the official Twenty docs or local SDK source when exact entity fields, imports, or configuration shapes matter.

Develop References

Read the smallest reference that matches the requested entity work:

  • Objects, fields, relations, roles, and permissions: ../../references/develop-app/data-model.md
  • Views, navigation, page layouts, page layout tabs, front component registration, and settings menu items: ../../references/develop-app/layout.md
  • Full-page custom UI and standalone page patterns: ../../references/develop-app/standalone-pages.md
  • Front component source, Twenty UI imports, data hooks, runtime imports, and browser verification: ../../references/develop-app/front-components.md
  • Logic functions, skills, agents, post-install hooks, and connection providers: ../../references/develop-app/logic.md
  • Workflows, manual triggers, draft/activate lifecycle, and seeder pitfalls: ../../references/develop-app/workflows.md
  • Tests — what to cover and where to put the files: ../../references/develop-app/tests.md
  • App file structure and entity validation checklist: ../../references/develop-app/app-structure.md
  • Detailed front component UI design: ../../references/design/front-component-ui.md

For front components, read front-components.md before implementation. Use layout.md for placement, standalone-pages.md for full-page custom UI, and front-component-ui.md for visual design and Twenty UI component selection.

Handoffs

Use ../../references/design/front-component-ui.md when the entity work turns into front component UI design.

Use publish-app when the task turns into README, marketplace copy, screenshots, logos, or listing assets.

리뷰

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

댓글

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

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

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

0 / 1,000자

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

같은 저장소의 스킬

Create a new app that extends a running Twenty instance. Guide project naming and instance selection, then use the scaffolder to install dependencies, authenticate, initialize Git, and complete the initial sync and installation.

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

  • Start a new Twenty app project
  • Scaffold a CRM extension or integration
  • Create an app connected to an existing Twenty instance
twentyhq/twenty5.9만2026년 10월 18일 업데이트

Operate an existing Twenty app by syncing changes, managing server connections, building and deploying releases, and inspecting function logs. It also guides troubleshooting and CI/CD, the workflows used to automate testing and deployment.

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

  • Sync app changes to a Twenty server
  • Prepare and deploy an app update
  • Investigate failed builds or deployments
twentyhq/twenty5.9만2026년 10월 18일 업데이트

Prepare an existing Twenty app for npm or marketplace publication by reviewing its README, listing details, package metadata, logos, and screenshots. The workflow includes checking publication settings, validating the build, and running the publishing command.

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

  • Prepare a Twenty app marketplace listing
  • Write or review README and About text
  • Check logos, screenshots, and public assets
twentyhq/twenty5.9만2026년 10월 18일 업데이트

qa-scout

무료

Check a Twenty pull request through real browser scenarios derived from its changes. Verify database effects and server logs alongside visible results, then produce screenshots, a structured verdict, and a report of any failures or uncertainty.

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

  • Validate user flows before or after merging a Twenty pull request
  • Check database writes and timeline activity after saving records
  • Investigate backend errors hidden behind a successful screen
twentyhq/twenty5.9만2026년 10월 18일 업데이트

Implement validation and migration action builders for syncable entities, data types handled by Twenty's synchronization system. This skill covers required fields, uniqueness, reference checks, and orchestration wiring, with validators that return errors without throwing exceptions or changing data.

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

  • Add required-field and duplicate checks
  • Validate references to parent entities
  • Build create, update, and delete migration actions
twentyhq/twenty5.9만2026년 10월 18일 업데이트

Implement caching and data conversion for syncable entities in Twenty's server code. Build lookup maps, convert stored records and inputs into flat representations, and resolve references to universal identifiers for later validation and processing.

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

  • Build a cache service for a new syncable entity
  • Convert stored entities into flat data
  • Transform creation and update inputs
twentyhq/twenty5.9만2026년 10월 18일 업데이트

twentyhq의 스킬 모두 보기

이 스킬의 문제 신고