Token导航 LogoToken导航

Agent Skill · 前端设计

ring%3apre-dev-trd-creation(ring%3apre dev trd 创建)

ring%3apre-dev-trd-creation 用于处理 GitHub 仓库、Issue、Pull Request 和代码协作信息,适合在 Codex、Claude、Cursor、Gemini CLI 中需要围绕仓库状态、代码变更或协作事项进行整理时使用。可结合来源仓库、安装命令和原始 README 继续核验具体用法。安装前建议确认权限范围、维护状态,以及是否会触发联网、命令执行或文件读写。

ring%3apre-dev-trd-creation 是前端设计类 Agent Skill,可用宿主为 Codex、Claude、Cursor、Gemini CLI,通过GitHub 仓库获取,权限为调用外部服务;许可证信息还不明确,暂无第三方扫描结果,按安装量在前端设计类的 10,216 个 Skill 里排第 4,145。

总安装 979周安装 40GitHub Stars 180下载 314核验 2026-05-01

安装说明

本站只整理中文说明,不托管安装包,也不代用户安装。
GitHub
许可证
unknown

安装方式

通过对话安装

复制提示词发给支持本地命令或 Skills 的 AI 助手,先确认命令和权限,再让它执行。

请帮我安装这个 Agent Skill:ring%3apre-dev-trd-creation(ring%3apre dev trd 创建)
来源仓库:https://github.com/lerianstudio/ring
仓库路径:skills/ring%3Apre-dev-trd-creation
安装命令:
npx skills add https://github.com/lerianstudio/ring --skill ring:pre-dev-trd-creation
安装前请先检查当前环境是否支持对应 CLI,并向我确认将要执行的命令、安装目录、联网范围和文件读写权限;确认后再执行。

命令行安装

复制命令到本机终端执行。该命令会通过 npx skills 从第三方来源获取 Skill;本站只展示命令,不托管安装包,也不自动执行。

skills.shnpx skills
npx skills add https://github.com/lerianstudio/ring --skill ring:pre-dev-trd-creation

这个 Skill 是做什么的

前端设计类 Skill 关注页面结构、视觉规范和组件写法,输出通常是可运行的界面代码。

ring%3apre-dev-trd-creation 用于处理 GitHub 仓库、Issue、Pull Request 和代码协作信息。它适合在 Codex、Claude、Cursor、Gemini CLI 中围绕仓库状态、代码变更或协作事项进行整理。

可通过 npx skills add 命令从 GitHub 仓库安装,具体能力以原始文档为准。使用前应评估权限范围、项目维护状态及潜在的文件或网络访问。适用宿主包括 Codex、Claude、Cursor、Gemini CLI,接入前应确认版本、权限和运行环境要求。

来源仓库内路径:skills/ring%3Apre-dev-trd-creation

上手步骤

4 步
  1. 1

    确认自己的宿主工具

    公开资料标注支持 Codex、Claude、Cursor、Gemini CLI;先确认自己用的是其中之一,再按对应工具的 Skills 目录放置。

  2. 2

    拿到安装命令

    可以直接复制的命令是 npx skills add https://github.com/lerianstudio/ring --skill ring:pre-dev-trd-cre…;命令里的占位符换成自己的路径或密钥再执行。

  3. 3

    安装后重启宿主

    命令执行完要完全退出宿主工具再打开,让新装的 Skill 被重新扫描到,否则列表里可能看不到。

  4. 4

    按最小权限试用

    它需要调用外部服务,先在测试目录或测试账号里跑,确认没问题再放到正式项目。

常见问题

6 条

ring%3apre-dev-trd-creation 怎么安装?

在终端执行 npx skills add https://github.com/lerianstudio/ring --skill ring:pre-dev-trd-creation。装完完全退出宿主工具再打开,让它重新扫描本地 Skill。

ring%3apre-dev-trd-creation 支持哪些 AI 工具?

公开资料标注支持 Codex、Claude、Cursor、Gemini CLI。其他工具只要能读取本地 Skill 目录,一般也能手动放进去,但要自己确认触发方式是否一致。

ring%3apre-dev-trd-creation 需要什么权限?

权限级别是调用外部服务。该 Skill 可能调用第三方服务、云服务或外部模型 API,使用前需要确认账号、额度、数据发送范围和服务条款。

ring%3apre-dev-trd-creation 是免费的吗?

公开资料没有标注明确许可证,收费和商用限制都无法确认。正式使用前请到来源仓库核对授权说明。

ring%3apre-dev-trd-creation 用的人多吗?

公开数据是累计安装 979 次,近一周安装 40 次,下载 314 次,GitHub 180 星。这些数字来自第三方目录统计,只能当作热度参考,不代表质量或安全性。

ring%3apre-dev-trd-creation 安全吗?

没有查到第三方扫描结果,安全性无法从公开资料判断,安装前请自行审查源码、依赖和命令行为。

值得选的地方和要先想清楚的地方

值得选的地方

  • 同时适配 4 种工具,换客户端不用重新找替代品。

先想清楚的地方

  • 许可证没有明确标注,能不能商用、能不能再分发都不确定。
  • 没有第三方扫描结果,安全性只能靠自己读源码判断。
  • 第三方目录整理,版本更新和行为细节以来源仓库为准。

适不适合你

更适合

  • 已经在用 Codex,想直接扩展它能力的人。
  • 需要处理前端设计类任务、又不想每次都手写提示词的人。

不太适合

  • 需要明确授权才能用到公司项目里的场景。
  • 要求有安全扫描结论才肯安装的团队。
  • 需要厂商级技术支持和 SLA 的生产系统。

前端设计类 Skill 对比

6 个同类
Skill总安装GitHub 星权限许可证扫描
frontend-design

前端设计 · Codex、Claude

8,823,360126,072只读MIT通过
vercel-composition-patterns

Vercel 组合模式 · Codex、Claude

3,858,81625,893需要联网MIT通过
vercel-react-native-skills

Vercel React native skills 前端 · Codex、Claude

2,468,66425,878只读MIT通过
adapt

adapt 搜索 · Codex、Claude

2,027,04023,125操作浏览器未明确通过
bolder

bolder 分析 · Codex、Claude

2,004,28823,130只读未明确通过
ring%3apre-dev-trd-creation

ring%3apre dev trd 创建 · 本页

979180调用外部服务未明确未收录

按安装量取同分类前几名;数字来自第三方目录统计,只作热度参考,不代表质量结论。

SKILL.md 原文

TRD Creation - Architecture Before Implementation

Foundational Principle

Architecture decisions (HOW/WHERE) must be technology-agnostic patterns before concrete implementation choices.

Specifying technologies in TRD creates:

  • Vendor lock-in before evaluating alternatives
  • Architecture coupled to specific products
  • Technology decisions made without full dependency analysis

The TRD answers: HOW we'll architect the solution and WHERE components will live. The TRD never answers: WHAT specific products, frameworks, versions, or packages we'll use.


⛔ HARD GATE: Design Validation Prerequisite (Step -1)

This check MUST happen BEFORE any TRD work begins.

Step -1.1: Detect if Feature Has UI

Read PRD from docs/pre-dev/{feature}/prd.md and check for UI indicators:

  • User stories with: "see", "view", "click", "navigate", "page", "screen", "button", "form"
  • Features involving: login, dashboard, settings, profile, reports, notifications, UI, interface
  • Any direct user-facing interaction

Step -1.2: If Feature Has UI → Verify Design Validation

⛔ HARD GATE: If feature has UI, design-validation.md MUST exist and show VALIDATED verdict.

Check: docs/pre-dev/{feature}/design-validation.md

If file NOT FOUND:
  → STOP. Cannot proceed to TRD.
  → Message: "Design Validation (Gate 1.5/2.5) not completed.
             Run ring:pre-dev-design-validation before TRD."

If file FOUND but verdict is NOT "DESIGN VALIDATED":
  → STOP. Cannot proceed to TRD.
  → Message: "Design Validation failed with gaps.
             Fix design gaps and re-run validation before TRD."

If file FOUND and verdict is "DESIGN VALIDATED":
  → PASS. Proceed to Step 0.

Step -1.3: If Feature Has NO UI → Skip to Step 0

Backend-only features do not require design validation. Proceed directly to tech stack definition.

Anti-Rationalization for Design Validation Check

RationalizationWhy It's WRONGRequired Action
"Design validation is optional"It's MANDATORY for UI features. Incomplete design = implementation rework.STOP. Run design validation first.
"We'll validate design later"Later = after architecture. Changes cascade.STOP. Validate design NOW.
"The wireframes look complete""Look complete" ≠ validated. Run systematic check.STOP. Run design validation.
"We're in a hurry, skip validation"Hurry now = 10x rework later.STOP. No shortcuts.
"TRD doesn't depend on design"TRD for fullstack features depends on UI architecture decisions.STOP. Validate design first.
"Design validation just passed informally"Informal ≠ documented. Need design-validation.md with VALIDATED.STOP. Run formal validation.

Pressure Resistance for Design Validation Check

User SaysYour Response
"Skip design validation, we're behind schedule""Design validation prevents 10x implementation rework. CANNOT proceed to TRD without it."
"The designer approved it verbally""Verbal approval ≠ systematic validation. Need design-validation.md with VALIDATED verdict."
"We can validate design in parallel with TRD""TRD depends on complete design. Cannot architect what isn't fully specified. Run validation first."
"Just this once, trust me the design is complete""Trust but verify. Ring requires documented validation. Run ring:pre-dev-design-validation."

⛔ HARD BLOCK: Tech Stack Definition (Step 0)

This is a HARD GATE. Do NOT proceed without defining the tech stack.

Step 0.1: Auto-Detect or Ask User

Auto-detection: go.mod exists → Go | package.json with react/next → Frontend TS | package.json with express/fastify/nestjs → Backend TS

If ambiguous, AskUserQuestion: "What is the primary technology stack?" Options: Go (Backend), TypeScript (Backend), TypeScript (Frontend), Full-Stack TypeScript

Step 0.2: Load Ring Standards via WebFetch

StandardURLPurpose
golang/index.mdhttps://raw.githubusercontent.com/LerianStudio/ring/main/dev-team/docs/standards/golang/index.mdGo patterns index (modular)
typescript.mdhttps://raw.githubusercontent.com/LerianStudio/ring/main/dev-team/docs/standards/typescript.mdTS patterns, async
frontend.mdhttps://raw.githubusercontent.com/LerianStudio/ring/main/dev-team/docs/standards/frontend.mdReact, Next.js, a11y
devops.mdhttps://raw.githubusercontent.com/LerianStudio/ring/main/dev-team/docs/standards/devops.mdDocker, CI/CD
sre.mdhttps://raw.githubusercontent.com/LerianStudio/ring/main/dev-team/docs/standards/sre.mdHealth checks, logging
Tech StackLoad
Go Backendgolang/index.md (then required modules) + devops.md + sre.md
TypeScript Backendtypescript.md + devops.md + sre.md
TypeScript Frontendfrontend.md + devops.md
Full-Stack TypeScripttypescript.md + frontend.md + devops.md + sre.md

Step 0.3: Read PROJECT_RULES.md

Check: docs/PROJECT_RULES.md → docs/STANDARDS.md (legacy) → STOP if not found

Step 0.4: Analyze PRD and Suggest Technologies

Read PRD, extract requirements, suggest technologies that address each, present to user for confirmation. Document in TRD metadata for Gate 6 to create PROJECT_RULES.md.

AskUserQuestion: "What deployment model?" Options: Cloud, On-Premise, Hybrid

Step 0.5: Document in TRD Metadata

TRD header must include: feature, gate: 3, deployment.model, tech_stack.primary, tech_stack.standards_loaded[], project_technologies[] (category, prd_requirement, choice, rationale per technology decision)

This metadata flows to Gates 4-6.

Pressure Resistance for Step 0

PressureResponse
"Tech stack doesn't matter for architecture""Architecture patterns vary by language. Go patterns ≠ TypeScript patterns. Define stack first."
"We'll decide tech stack later""Later = Dependency Map. But architecture NOW needs to know capabilities. Define stack."
"Just use generic patterns""Generic patterns miss stack-specific best practices. 5 min to define saves rework."
"Skip to save time""Skipping causes Gates 4-6 to ask again. Define once here, inherit everywhere."

Mandatory Workflow

PhaseActivities
1. Analysis (After Step 0)PRD (Gate 1) required; Feature Map (Gate 2) optional; identify NFRs (performance, security, scalability); map domains to components
2. Architecture DefinitionChoose style (Microservices, Modular Monolith, Serverless); design components with boundaries; define interfaces; model data architecture; plan integration patterns; design security
3. Gate 3 ValidationAll domains mapped; component boundaries clear; interfaces technology-agnostic; data ownership explicit; quality attributes achievable; no specific products named

Explicit Rules

✅ DO Include

System architecture style (patterns, not products), component design with responsibilities, data architecture (ownership, flows - conceptual), API design (contracts, not protocols), security architecture (layers, threat model), integration patterns (sync/async, not tools), performance targets, deployment topology (logical)

❌ NEVER Include

Technology products (PostgreSQL, Redis, Kafka), framework versions (Fiber v2, React 18), language specifics (Go 1.24, Node.js 20), cloud services (AWS RDS, Azure Functions), packages (bcrypt, zod, prisma), container orchestration (Kubernetes, ECS), CI/CD details, IaC specifics

Technology Abstraction Rules

ElementSay This (✅)Not This (❌)
Database"Relational Database""PostgreSQL 16"
Cache"In-Memory Cache""Redis" or "Valkey"
Message Queue"Message Broker""RabbitMQ"
Object Storage"Blob Storage""MinIO" or "S3"
Web Framework"HTTP Router""Fiber" or "Express"
Auth"JWT-based Authentication""specific library"

Rationalization Table

ExcuseReality
"Everyone knows we use PostgreSQL"Assumptions prevent proper evaluation. Stay abstract.
"Just mentioning the tech stack for context"Context belongs in Dependency Map. Keep TRD abstract.
"The team needs to know what we're using"They'll know in Dependency Map. TRD is patterns only.
"It's obvious we need Redis here"Obvious ≠ documented. Abstract to "cache", decide later.
"I'll save time by specifying frameworks now"You'll waste time when better options emerge. Wait.
"But our project template requires X"Templates are implementation. TRD is architecture. Separate.
"The dependency is critical to the design"Then describe the *capability* needed, not the product.
"Stakeholders expect to see technology choices"Stakeholders see them in Dependency Map. Not here.
"Architecture decisions depend on technology X"Then your architecture is too coupled. Redesign abstractly.
"We already decided on the tech stack"Decisions without analysis are assumptions. Validate later.

Red Flags - STOP

If you catch yourself writing any of these in a TRD, STOP:

  • Specific product names with version numbers
  • Package manager commands (npm install, go get, pip install)
  • Cloud provider service names (RDS, Lambda, Cloud Run, etc.)
  • Framework-specific terms (Fiber middleware, React hooks, Express routers)
  • Container/orchestration specifics (Docker, K8s, ECS)
  • Programming language version constraints
  • Infrastructure service names (CloudFront, Cloudflare, Fastly)
  • CI/CD tool names (GitHub Actions, CircleCI, Jenkins)

When you catch yourself: Replace the product name with the capability it provides. "PostgreSQL 16" → "Relational Database with ACID guarantees"

Gate 3 Validation Checklist

CategoryRequirements
Architecture CompletenessAll PRD features mapped; DDD boundaries; single clear responsibilities; stable interfaces
Data DesignOwnership explicit; models support PRD; consistency strategy defined; flows documented
Quality AttributesPerformance targets set; security addressed; scalability path clear; reliability defined
Integration ReadinessExternal deps identified (by capability); patterns selected (not tools); errors considered; versioning strategy exists
Technology AgnosticZero product names; capabilities abstract; patterns named not implementations; can swap tech without redesign

Gate Result: ✅ PASS → API Design | ⚠️ CONDITIONAL (remove product names) | ❌ FAIL (too coupled)

Common Violations

ViolationWrongCorrect
Tech in ArchitectureLanguage: Go 1.24+, Framework: Fiber v2.52+, Database: PostgreSQL 16Style: Modular Monolith, Pattern: Hexagonal, Data Tier: Relational DB, Key-value store, Object storage
Framework in ComponentsFiber middleware for JWT, bcrypt for passwords, passport.js for OAuth2Auth Component: Purpose, Inbound (HTTP endpoints), Outbound (persistence, notifications), Security (token-based, industry-standard hashing)
Cloud Services in DeploymentCompute: AWS ECS Fargate, Database: AWS RDS, Cache: ElastiCacheCompute: Container-based stateless, Data Tier: Managed DB with backup, Performance: Distributed caching, Traffic: Load balanced with health checks

Pagination Strategy (Required for List Endpoints)

If feature includes list/browse, decide during TRD:

StrategyBest ForTrade-offPerformance
Cursor-Based>10k records, infinite scroll, real-timeCan't jump pagesO(1)
Page-Based (Offset)<10k records, admin interfacesDegrades with large offsetsO(n)
Page-Based + Total Count"Page X of Y" UIAdditional COUNT query2 queries
No PaginationVery small bounded datasets (<100)All data at once-

Document in TRD: API Patterns → Pagination → Strategy + Rationale

Authentication/Authorization Architecture (If Required)

If feature requires authentication or authorization (as determined in Question 2 of pre-dev command):

Auth TypeTRD Description (Abstract)Implementation Reference
User authentication only"Token-based authentication with stateless validation"For Go: golang/security.md → Access Manager Integration
User + permissions"Token-based authentication with role-based access control (RBAC)"For Go: golang/security.md → Access Manager Integration
Service-to-service"Machine-to-machine authentication with client credentials"For Go: golang/security.md → Access Manager Integration (GetApplicationToken)
Full (user + S2S)"Dual-layer authentication: user tokens for end-users, client credentials for services"For Go: golang/security.md → Access Manager Integration

Document in TRD: Security Architecture → Authentication/Authorization → Strategy + Implementation Reference

Key Implementation Pattern (for TRD reference):

  • Every protected endpoint requires middleware authorization
  • Pattern: auth.Authorize(applicationName, resource, action) on each route
  • Engineers will implement per-route protection following the referenced standard

Note for Go Services: Lerian's Access Manager (plugin-auth + identity + lib-auth) is the standard authentication system. Reference golang/security.md → Access Manager Integration section in the TRD so engineers know where to find implementation patterns including route middleware protection.

License Manager Architecture (If Required)

If feature is a licensed product/plugin (as determined in Question 3 of pre-dev command):

License TypeTRD Description (Abstract)Implementation Reference
Single-org (global)"Global license validation at service startup with fail-fast behavior"For Go: golang/security.md → License Manager Integration
Multi-org"Per-request license validation with organization context"For Go: golang/security.md → License Manager Integration

Document in TRD: Security Architecture → Licensing → Strategy + Implementation Reference

Key Architecture Pattern (for TRD reference):

  • License validation as global middleware (applied early in chain)
  • Fail-fast on startup: service refuses to start without valid license
  • Graceful shutdown integration for license manager resources
  • Built-in skip paths for health/readiness endpoints

Note for Go Services: Lerian's License Manager (lib-license-go) is the standard licensing system. Reference golang/security.md → License Manager Integration section in the TRD so engineers know where to find implementation patterns including global middleware and graceful shutdown.

Frontend-Backend Integration Pattern (If Fullstack)

⛔ HARD GATE: If the feature is fullstack (topology.scope: fullstack), this section is MANDATORY in the TRD.

Step 1: Read api_pattern from research.md

The api_pattern was determined during Topology Discovery (Q7) and persisted in research.md frontmatter.

# From research.md frontmatter
topology:
  scope: fullstack
  api_pattern: bff | none  # bff if dynamic data, none if static

Step 2: Document Pattern in TRD

TRD must include an ## Integration Patterns section:

## Integration Patterns

### Frontend-Backend Communication

**Pattern:** [direct | bff | other]

**Rationale:** [Why this pattern was chosen]

**Architecture Implications:**
- [List architectural decisions driven by this pattern]

Pattern-Specific Documentation

If api_pattern: none (Static Frontend):

### Frontend Architecture

**Pattern:** Static Frontend (no dynamic data)

**Rationale:** Pure static content, no server-side data fetching needed.

**Architecture Implications:**
- Static site generation (SSG) or client-side rendering of static content
- No API routes needed
- No backend integration
- Content embedded at build time or loaded from static files

**Data Flow:**
Build Process → Static HTML/JS → Browser

If api_pattern: bff (MANDATORY for dynamic data):

### Frontend-Backend Communication

**Pattern:** BFF (Backend-for-Frontend) layer

**Rationale:** [Multiple backend services | Complex data aggregation | Sensitive keys to hide | Request optimization needed]

**Architecture Implications:**
- Frontend calls BFF API routes (Next.js API Routes recommended)
- BFF aggregates data from multiple backend services
- Sensitive API keys stored server-side in BFF
- Response transformation happens in BFF layer
- Frontend receives optimized, frontend-specific data shapes

**Data Flow:**
Frontend Component → BFF API Route → Backend Service(s) → Database(s)

**BFF Responsibilities:**
- Data aggregation from multiple services
- Response transformation for frontend consumption
- Authentication token management (httpOnly cookies with Secure and SameSite attributes)
- Rate limiting and caching
- Error normalization

BFF Contract Specification (MANDATORY for BFF Pattern)

⛔ HARD GATE: If api_pattern: bff, this section MUST be included in TRD.

When This Applies

Topology Scopeapi_patternBFF Contract Required
fullstackbffYes
frontend-onlybffYes
fullstackdirectNo
frontend-onlydirectNo

BFF Contract Structure

TRD MUST include a ## BFF Contracts section:

## BFF Contracts

### Purpose
Define typed contracts between BFF layer and Frontend components.

### Contract Per Feature

#### Feature: {feature_name}

**BFF Route:** `/api/{feature}/[operation]`

**Frontend Consumer:** `{ComponentName}`

**Request Contract:**
| Field | Type | Required | Description |
|-------|------|----------|-------------|
| param1 | string | Yes | Description |
| param2 | number | No | Description |

**Response Contract:**

Response fields are returned flat (no `data` envelope wrapper). Follow the flat response pattern used by `libHTTP.OK()` and `libHTTP.Created()`.

| Field | Type | Nullable | Description |
|-------|------|----------|-------------|
| id | string | No | Entity identifier |
| name | string | No | Display name |

**Error Contract:**
| Error Code | Condition | Frontend Handling |
|------------|-----------|-------------------|
| VALIDATION_ERROR | Invalid input | Show field errors |
| NOT_FOUND | Resource missing | Show empty state |
| UNAUTHORIZED | Session expired | Redirect to login |

BFF-to-Backend Mapping

Document how BFF routes map to backend APIs:

### Backend API Mapping

| BFF Route | Backend APIs Called | Aggregation Logic |
|-----------|---------------------|-------------------|
| /api/dashboard | GET /users/:id, GET /orders?userId= | Merge user + recent orders |
| /api/profile | GET /users/:id, GET /preferences/:userId | Merge user + preferences |

Frontend-only BFF Creation

If topology.scope: frontend-only AND api_pattern: bff:

The feature requires creating a NEW BFF layer to consume existing backend APIs.

TRD MUST document:

  1. BFF Location: Where BFF code will live (e.g., app/api/ for Next.js)
  2. Existing APIs to Consume: List of backend endpoints (from PRD Data Sources)
  3. BFF Routes to Create: New routes that aggregate/transform data
  4. Type Definitions Location: Where shared types will be defined
### BFF Creation Plan (Frontend-only)

**BFF Framework:** Next.js API Routes / tRPC / Custom

**Existing Backend APIs (from PRD):**
- User API: GET /api/v1/users/:id
- Orders API: GET /api/v1/orders?userId=

**New BFF Routes:**

| Route | Purpose | Backend Calls | Response Shape |
|-------|---------|---------------|----------------|
| /api/dashboard | Dashboard data | users + orders | DashboardData type |
| /api/export/pdf | Generate PDF | orders | Blob |

**Type Definitions:**
- `types/api/dashboard.ts` - DashboardData, DashboardRequest
- `types/api/orders.ts` - Order, OrderList

Rationalization Table for BFF Contracts

ExcuseReality
"BFF contracts are implementation detail"Contracts define component boundaries. Must be designed, not discovered.
"Frontend will figure out the types"Untyped APIs cause runtime errors. Define types upfront.
"We'll add types as we implement"Missing types cause frontend bugs. Specify contracts in TRD.
"BFF is just a pass-through"Even pass-through needs error handling and type transformation. Document it.
"Backend already has types"Backend types ≠ frontend types. BFF transforms shapes. Define both.

BFF Task Ownership (MANDATORY for BFF Pattern)

⛔ HARD GATE: If api_pattern: bff, TRD MUST specify task ownership.

Task Assignment Rules

TRD MUST include a ## Task Ownership section when BFF is involved:

## Task Ownership

### BFF Implementation

| Task Type | Owner | Rationale |
|-----------|-------|-----------|
| BFF route creation | Frontend Engineer | BFF serves frontend, owned by consumer |
| BFF type definitions | Frontend Engineer | Types consumed by frontend components |
| Backend API integration | Frontend Engineer | BFF calls existing APIs |
| Error normalization | Frontend Engineer | Frontend defines error UX |
| Caching strategy | Frontend Engineer | Frontend knows cache requirements |

### Collaboration Points

| Activity | Frontend | Backend | Notes |
|----------|----------|---------|-------|
| BFF contract review | Author | Reviewer | Backend validates API assumptions |
| Type definitions | Author | Contributor | Shared types may exist |
| Error mapping | Author | Consultant | Backend clarifies error semantics |

Why Frontend Owns BFF

ReasonExplanation
Consumer proximityBFF serves frontend; frontend knows data needs
Type safety chainFrontend types → BFF types → seamless
Iteration speedFrontend can modify BFF without backend coordination
Error UXFrontend defines how errors appear to users

When Backend Should Own BFF

ScenarioOwnerRationale
BFF includes business logicBackendLogic belongs with domain experts
BFF requires database accessBackendData layer is backend concern
BFF serves multiple frontendsBackendShared layer needs coordination

TRD Must Document

### BFF Ownership Decision

**Owner:** [Frontend Engineer | Backend Engineer]

**Rationale:** [Why this assignment]

**Coordination Required:**
- [ ] Backend API documentation review
- [ ] Type definition alignment
- [ ] Error code mapping

Rationalization Table for Task Ownership

ExcuseReality
"BFF is backend code"BFF location ≠ ownership. Consumer drives ownership.
"Let teams figure it out"Undefined ownership causes delays. Decide in TRD.
"Ownership is obvious"Obvious to you ≠ clear to team. Document it.
"We can split BFF tasks"Split ownership causes integration bugs. One owner.

Rationalization Table for Integration Patterns

ExcuseReality
"Direct API calls are simpler"FORBIDDEN. Direct client→API calls expose keys, break type safety. BFF is mandatory.
"BFF is overkill for our feature"If there's dynamic data, BFF is required. Not a choice, a rule.
"We can call the API directly, it's just one endpoint"Even one endpoint needs error normalization, type safety. Use BFF.
"API pattern doesn't affect architecture"Pattern determines data flow, security, and layer responsibilities. Document it.
"Client-side fetch is fine for this"Client-side fetch to external APIs exposes keys. Use BFF.

⛔ HARD RULE: BFF is MANDATORY for Dynamic Data

Client-side code MUST NEVER call backend APIs, databases, or external services directly.

If Feature Has...api_patternImplementation
Dynamic data (API, DB, external)bffNext.js API Routes
Static content onlynoneNo API layer

"Direct API calls" is FORBIDDEN. There is no api_pattern: direct option.

Design System & Styling (For Frontend Features)

⛔ HARD GATE: If the feature includes any user-facing UI, this section is MANDATORY.

Step 1: Detect UI Library

Auto-detection from package.json:

Package PresentUI Library
@lerianstudio/sindarian-uiSindarian UI (Radix-based)
@radix-ui/*Radix UI Primitives
@shadcn/ui or shadcn in devDepsshadcn/ui
@chakra-ui/reactChakra UI
@headlessui/reactHeadless UI
@mui/materialMaterial UI
None detectedAsk user for choice

If no UI library detected, AskUserQuestion: "What UI component library will this project use?" Options: shadcn/ui (Recommended), Chakra UI, Material UI, Headless UI, Custom components

Step 2: Document Styling Configuration

TRD must include a ## Design System Configuration section:

## Design System Configuration

### UI Library
- **Library:** [Detected or chosen library]
- **Version:** [Package version from package.json]

### CSS Framework
- **Framework:** [TailwindCSS v4 / CSS Modules / Styled Components / etc.]
- **Config File:** [tailwind.config.ts / postcss.config.js / etc.]

### Theme Integration
- **CSS Variables Required:** Yes/No
- **Dark Mode:** prefers-color-scheme / class-based / not supported
- **Source Directive:** @source path for component styles

### Required CSS Imports
List CSS files that MUST be imported in globals.css:
- `@import "tailwindcss";`
- `@import "@library/dist/components/ui/button/styles.css";`
- etc.

### Theme Variables
Document required CSS custom properties:
- Color scale (zinc, shadcn)
- Spacing variables
- Component-specific variables (button, input, dialog)

Step 3: Component Availability Matrix

TRD MUST document which components exist in the chosen UI library:

### Component Availability

| Component Needed | Available in Library | Notes |
|------------------|---------------------|-------|
| Button | ✅ Yes | Variants: primary, secondary, outline |
| Dialog/Modal | ✅ Yes | Use DialogTrigger pattern |
| Form | ✅ Yes | Requires Form context wrapper |
| Input | ⚠️ Partial | Requires FormField context |
| IconButton | ✅ Yes | Separate component for icon-only |
| Toast | ✅ Yes | Requires Toaster provider |
| Table | ✅ Yes | Use TableHeader, TableBody, etc. |

### Missing Components (Must Create)
- [ ] Component X - not available, need custom implementation

Step 4: Variant Mapping

TRD MUST document available variants to prevent implementation errors:

### Button Variants (Example)

| Design Intent | Correct Variant | WRONG (Don't Use) |
|---------------|-----------------|-------------------|
| Primary action | `variant="primary"` | `variant="default"` |
| Secondary action | `variant="secondary"` | - |
| Cancel/neutral | `variant="outline"` | `variant="ghost"` |
| Destructive | `variant="primary" className="bg-red-600"` | `variant="destructive"` |
| Icon-only | Use `<IconButton>` | `<Button size="icon">` |

Rationalization Table for Design System

ExcuseReality
"Styling is implementation detail"Styling bugs cause white screens and broken UX. Document upfront.
"Developers will figure out CSS"Missing CSS variables = hours of debugging. Specify requirements.
"All UI libraries work the same"They don't. Form patterns, variants, and contexts vary significantly.
"We'll add dark mode later"CSS architecture for dark mode must be set from the start.
"Component variants are obvious"They're not. ghost vs plain vs outline varies by library.
"Just use the library's defaults"Defaults may not match design. Document exact variants needed.

Red Flags - STOP

If reviewing a TRD for a UI feature and you see NONE of these, STOP and add them:

  • No UI library specified
  • No CSS framework documented
  • No theme variables listed
  • No component availability matrix
  • No variant mapping

Gate 3 Validation Addition for UI Features

CategoryRequirements
Design SystemUI library specified; CSS framework documented; theme variables listed; component availability verified; variant mapping complete

ADR Template

**ADR-00X: [Pattern Name]**
- **Context**: [Problem needing solution]
- **Options**: [List with trade-offs - no products]
- **Decision**: [Selected pattern]
- **Rationale**: [Why this pattern]
- **Consequences**: [Impact of decision]

Confidence Scoring

FactorPointsCriteria
Pattern Match0-40Exact before: 40, Similar: 25, Novel: 10
Complexity Management0-30Simple proven: 30, Moderate: 20, High: 10
Risk Level0-30Low proven: 30, Moderate mitigated: 20, High accepted: 10

Action: 80+ present autonomously | 50-79 present options | <50 request clarification


Standards Loading (MANDATORY)

This skill REQUIRES loading Ring Standards via WebFetch as part of Step 0 (Tech Stack Definition).

HARD GATE: MUST load appropriate standards based on detected/selected tech stack:

Tech StackStandards to Load via WebFetch
Go Backendgolang/index.md + devops.md + sre.md
TypeScript Backendtypescript.md + devops.md + sre.md
TypeScript Frontendfrontend.md + devops.md
Full-Stack TypeScripttypescript.md + frontend.md + devops.md + sre.md

MUST also read PROJECT_RULES.md from docs/PROJECT_RULES.md (or docs/STANDARDS.md for legacy projects).


Blocker Criteria - STOP and Report

ConditionActionSeverity
PRD (Gate 1) not validatedSTOP and complete Gate 1 firstCRITICAL
Design Validation failed (UI features)STOP and complete design validation firstCRITICAL
Tech stack cannot be determinedSTOP and ask user for clarificationCRITICAL
Ring Standards not loadedSTOP and WebFetch required standardsCRITICAL
Technology product names in architectureSTOP and abstract to capabilitiesHIGH
PROJECT_RULES.md not found (new project)Continue but MUST create during Step 0.3MEDIUM
Component ownership unclearSTOP and define single owner per componentHIGH

Cannot Be Overridden

These requirements are NON-NEGOTIABLE:

  • MUST NOT include specific technology products (PostgreSQL, Redis, etc.)
  • MUST NOT include framework versions (Fiber v2, React 18, etc.)
  • MUST NOT include cloud service names (AWS RDS, Azure Functions, etc.)
  • MUST complete Step 0 (Tech Stack Definition) before architecture
  • MUST complete Step -1 (Design Validation Check) for UI features
  • MUST load Ring Standards via WebFetch
  • MUST abstract all technology choices to capabilities
  • CANNOT proceed to Gate 4 with technology-specific content

Severity Calibration

SeverityDefinitionExample
CRITICALCannot proceed with TRDPRD not validated, design validation failed, standards not loaded
HIGHTRD violates abstraction principlePostgreSQL mentioned, framework versions included
MEDIUMTRD incomplete but usableMissing one component boundary definition
LOWMinor documentation gapsADR rationale could be more detailed

When This Skill Is Not Needed

  • PRD (Gate 1) not validated → complete Gate 1 first
  • Design Validation not passed (UI features) → complete design validation first
  • Architecture already documented → proceed to API Design
  • Pure business requirement change → update PRD
  • Bug fix requiring no architecture changes
  • Configuration changes with no system impact

Document Placement

trd.md is a shared document - it defines architecture for the entire feature.

Structuretrd.md Location
single-repodocs/pre-dev/{feature}/trd.md
monorepodocs/pre-dev/{feature}/trd.md (root)
multi-repoWrite to BOTH repos

Multi-repo handling:

# Read topology from research.md frontmatter
if [[ "$structure" == "multi-repo" ]]; then
    # Write to both repositories
    mkdir -p "{backend.path}/docs/pre-dev/{feature}"
    mkdir -p "{frontend.path}/docs/pre-dev/{feature}"

    # Write TRD to primary (backend)
    # Then copy to frontend
    cp "{backend.path}/docs/pre-dev/{feature}/trd.md" "{frontend.path}/docs/pre-dev/{feature}/trd.md"
fi

Sync footer for multi-repo:

---
**Sync Status:** Architecture document maintained in both repositories.

Output & After Approval

Output to:

  • single-repo/monorepo: docs/pre-dev/{feature-name}/trd.md
  • multi-repo: Both {backend.path}/docs/pre-dev/{feature}/trd.md AND {frontend.path}/docs/pre-dev/{feature}/trd.md
  1. ✅ Lock TRD - architecture patterns are now reference
  2. 🎯 Use as input for API Design (ring:pre-dev-api-design)
  3. 🚫 Never add technologies retroactively
  4. 📋 Keep architecture/implementation strictly separated

The Bottom Line

If you wrote a TRD with specific technology products, delete those sections and rewrite abstractly.

The TRD is architecture patterns only. Period. No product names. No versions. No frameworks.

Technology choices go in Dependency Map. That's the next phase. Wait for it.

Stay abstract. Stay flexible. Make technology decisions in the next phase with full analysis.

平台分布

Codex

36.08%
按下载量换算113

Claude

29.26%
按下载量换算92

Cursor

17.96%
按下载量换算56

Gemini CLI

8.71%
按下载量换算27

安全审计

暂无安全审计结果可展示。

权限和风险

调用外部服务

该 Skill 可能调用第三方服务、云服务或外部模型 API,使用前需要确认账号、额度、数据发送范围和服务条款。

安装前确认

本站仅展示第三方公开信息,不托管安装包,不提供自动安装或运行环境。安装前应自行审查源码、依赖和命令行为。目前只有一个公开来源,建议同时核对源仓库。

继续浏览同类 Skills