새로운 Frontend 및 Backend 시스템이있는 Backstage 플러그인을 구축하기위한 Claude 기술.

유효한 기술

backstage-frontend 플러그인

새로운 Frontend System(createFrontendPlugin], blueprints, routes, Utility APIs, Testing)과 함께 Backstage frontend 플러그인을 빌드하십시오. 페이지, 내비게이션 아이템, 엔티콘 콘텐츠 또는 카드를 생성하는 데 사용됩니다.

** 포함:**

• 현재 단계별 개발 작업 흐름 yarn new frontend-plugin Template (already NFS-wired)
• 연장 청사진 가이드 ([T2]], SubPageBlueprint], EntityContentBlueprint], ApiBlueprint], app-level 청사진) deprecated NavItemBlueprint
• 유틸리티 API 패턴 (@backstage/frontend-plugin-api]) 및 모범 사례
• @backstage/frontend-test-utils] (renderInTestApp], createExtensionTester(...).reactElement()], mockApis.*])

백 스테이지 백엔드 플러그인

Backstage backend 플러그인 및 모듈을 createBackendPlugin, 핵심 서비스 및 확장 포인트로 구축하십시오. 기존 플러그인을 확장하는 REST/HTTP API, 백그라운드 작업, 데이터 처리, 통합 및 모듈을 사용합니다.

** 포함:**

Backstage Agent Skills

Claude skills for building Backstage plugins with the New Frontend and Backend Systems.

Available Skills

backstage-frontend-plugin

Build Backstage frontend plugins with the New Frontend System (createFrontendPlugin, blueprints, routes, Utility APIs, testing). Use for creating pages, navigation items, entity content, or cards.

Includes:

• Step-by-step development workflow against the current yarn new frontend-plugin template (already NFS-wired)
• Extension blueprints guide (PageBlueprint, SubPageBlueprint, EntityContentBlueprint, ApiBlueprint, app-level blueprints) with notes on the deprecated NavItemBlueprint
• Utility API patterns (with imports from @backstage/frontend-plugin-api) and best practices
• Comprehensive testing guide with @backstage/frontend-test-utils (renderInTestApp, createExtensionTester(...).reactElement(), mockApis.*)

backstage-backend-plugin

Build Backstage backend plugins and modules with createBackendPlugin, core services, and extension points. Use for REST/HTTP APIs, background jobs, data processing, integrations, and modules that extend existing plugins.

Includes:

• Step-by-step development workflow against the current yarn new backend-plugin template (src/router.ts, express-promise-router, zod, service refs)
• Core services reference covering every coreServices.* entry (httpRouter, logger, database, httpAuth, userInfo, auth, scheduler, cache, urlReader, permissions, permissionsRegistry, auditor, lifecycle, rootHealth, …)
• Modules + extension points (createBackendModule, env.registerExtensionPoint)
• Production-ready patterns for validation, error handling (via MiddlewareFactory / root error middleware), and security
• Comprehensive testing guide with @backstage/backend-test-utils (startTestBackend + supertest, mockServices, mockCredentials, MSW v2, TestDatabases)

Installation and Usage

Each skill is a self-contained folder with:

• SKILL.md - Main skill instructions and workflow
• reference/ - Detailed reference documentation loaded on-demand

These are Agent Skills, instructions that an AI coding agent loads to do better work. They do not hook into Backstage tooling directly, so placing them in .github/ or running yarn new yourself will not use them. Instead, the agent reads the skill and then runs yarn new, converts the scaffold, and writes code following the skill’s guidance.

Claude Code

Copy a skill folder into your workspace and Claude Code discovers it automatically.

# Project-level (this workspace only)
mkdir -p .claude/skills
cp -r backstage-frontend-plugin .claude/skills/

# Or user-level (all your projects)
cp -r backstage-frontend-plugin ~/.claude/skills/