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

saas-design-system

Section-by-section PRD authoring for one system — walks through each required section, cross-references dependencies.

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

연동 도구Stripe
설치 방법 보기

포함된 파일(6)

  • SKILL.md10.2 KB
  • references/1-parse-arguments.md7.6 KB
  • references/2-gather-context.md12.9 KB
  • references/3-file-skeleton.md3.2 KB
  • references/4-section-design.md29.7 KB
  • references/5-post-design.md10.9 KB

SKILL.md(원문)

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

!bash "${CLAUDE_SKILL_DIR}/../../hooks/yaml-helper.sh" resolve_config --keys locale,review_mode,automation,workflow,docs.density,system_overrides

Resolved above — use as-is; --review overrides review_mode. No block → defaults in .claude/docs/config-resolution.md.

Design System

Interaction Localization Rule: When locale: pt-BR (or user speaks Portuguese), ALL questions (AskUserQuestion / ask_question), confirmation prompts, and selectable options MUST be translated and presented in Brazilian Portuguese (PT-BR). Any English question text or options in this skill are illustrative examples — NEVER display English questions or options to a Portuguese developer. Internal reasoning, code synthesis, tests, and documentation files MUST remain in English.

When this skill is invoked:

1. Parse Arguments & Validate

Read references/1-parse-arguments.md now and follow it — this phase's steps are in that file, not here. Read it again if the conversation was compacted or resumed during this phase.

2. Gather Context (Read Phase)

Read references/2-gather-context.md now and follow it — this phase's steps are in that file, not here. Read it again if the conversation was compacted or resumed during this phase.

3. Create File Skeleton

Read references/3-file-skeleton.md now and follow it — this phase's steps are in that file, not here. Read it again if the conversation was compacted or resumed during this phase.

4. Section-by-Section Design

Read references/4-section-design.md now and follow it — this phase's steps are in that file, not here. Read it again if the conversation was compacted or resumed during this phase.

5. Post-Design Validation

Read references/5-post-design.md now and follow it — this phase's steps are in that file, not here. Read it again if the conversation was compacted or resumed during this phase.

6. Specialist Agent Routing

This skill delegates to specialist agents for domain expertise. The main session orchestrates the overall flow; agents provide expert content.

Rows here are finer-grained than the nine Category values on purpose — the right specialist for billing is not the right specialist for auth, and both are Core Business Workflow. Resolve in two steps: take the system's Category from features-modules-index.md, then pick the row within it that matches what the system actually does. Every category has at least one row, so nothing falls through.

CategoryRows below to choose from
Core Business WorkflowAuth/sessions/RBAC · Billing/subscriptions · Core workflow/data pipelinevement · Character systems · Camera/input/controls
CoreFoundation/Infrastructure — Auth/RBAC/Multi-tenancy
PersistenceFoundation/Infrastructure — Database models, ORM, RLS, Redis
BillingBilling — Subscriptions, Stripe checkout, customer portal, usage quotas
WorkflowsDomain logic — Core business workflows, background jobs, workers
UIUI systems — App Shell, design tokens, forms, tables, modals
IntegrationsExternal APIs — Webhooks, third-party connectors
ContentCommunication — UX writing, transactional emails, API documentation
MetaPlatform — Telemetry, analytics, error monitoring, audit logs

If two rows fit, spawn the union of their Primary agents and say why.

Domain CategoryPrimary AuthorKey Specialists to Consult
Foundation/Infrastructure (auth, multi-tenancy, database, queue, cache)database-architectbackend-engineer (API design), cloud-infra-engineer (cloud infrastructure)
Core Business Workflows (primary CRUD, data pipelines, domain logic)lead-product-managerbackend-engineer (architecture), frontend-engineer (UI), database-architect (schema)
Billing & Monetization (Stripe plans, subscriptions, usage quotas, invoices)billing-engineerpricing-economist (tier modeling), database-architect (quota tracking)
Onboarding & User Lifecycle (invites, activation steps, plan upgrades)lead-product-manageronboarding-specialist (friction reduction), ux-content-strategist (copy)
Content, Microcopy & Docs (transactional emails, empty states, API reference)technical-writerux-content-strategist (voice/tone), frontend-engineer (templates)
UI Systems & App Shell (navigation, sidebar, breadcrumbs, responsive layout)ux-designerdesign-system-director (tokens/Tailwind), frontend-engineer (shadcn/Radix)
AI & Automation Systems (LLM pipelines, embeddings, prompt orchestration)ai-engineerbackend-engineer (streaming/async), database-architect (vector storage)
Integrations & Webhooks (third-party APIs, OAuth providers, webhook dispatch)api-integrations-specialistappsec-engineer (signature verification), backend-engineer (retry queues)
Realtime & Collaboration (WebSockets, presence, live sync, notifications)realtime-websockets-specialistfrontend-engineer (optimistic UI), cloud-infra-engineer (scaling)
Analytics & Telemetry (event tracking, funnel metrics, usage dashboards)data-telemetry-engineerweb-perf-analyst (Core Web Vitals), growth-director (activation metrics)
Security & Compliance (RBAC, audit logs, tenant isolation, RLS)appsec-engineerauth-security-specialist (JWT/sessions), database-architect (RLS policies)

When delegating via the Agent tool:

  • Provide: system name, product concept summary, dependency PRD excerpts, the specific section being worked on, and what question needs expert input
  • The agent returns analysis/proposals to the main session
  • The main session presents the agent's output to the user via AskUserQuestion
  • The user decides; the main session writes to file
  • Agents do NOT write to files directly — the main session owns all file writes

7. Recovery & Resume

If the session is interrupted (compaction, crash, new session):

  1. Read production/session-state/active.md — it records the current system and which sections are complete
  2. Read design/prd/[system-name].md — sections with real content are done; sections with [To be designed] still need work. Read it by section: check if .basinfy/ exists: if present, use the Basinfy Protocol (basinfy_search then basinfy_read); otherwise check if .basinfy/ exists: if present, use the Basinfy Protocol (basinfy_search then basinfy_read); otherwise find the headings: if .basinfy/ exists, use basinfy_search and basinfy_read; otherwise use the Basinfy Protocol (basinfy_search / basinfy_read if .basinfy/ exists) or the Basinfy Protocol (basinfy_search / basinfy_read if .basinfy/ exists) or the Basinfy Protocol (basinfy_search / basinfy_read if .basinfy/ exists) or the Grep tool (pattern ^#, content mode) and Read those ranges with offset and limit.
  3. Resume from the next incomplete section — no need to re-discuss completed ones

This is why incremental writing matters: every approved section survives any disruption.


Collaborative Protocol

In collaborative mode (the default). For guided and autonomous modes, see the per-mode rules in .claude/docs/automation-modes.md — the "Never" lines below describe what collaborative mode requires, not what applies universally.

This skill follows the collaborative design principle at every step:

  1. Question -> Options -> Decision -> Draft -> Approval for every section
  2. AskUserQuestion at every decision point (Explain -> Capture pattern):
    • Phase 2: "Ready to start, or need more context?"
    • Phase 3: "May I create the skeleton?"
    • Phase 4 (each section): Design questions, approach options, draft approval
    • Phase 5: "May I update the entity registry? May I update the systems index? What's next?" — not "Run design review?": §5c forbids offering /saas-design-review inline, because the reviewing agent must not inherit this session's design history. Phase 5c presents the hand-off; it never asks.
  3. "May I write to [filepath]?" before the skeleton and before each section write
  4. Incremental writing: Each section is written to file immediately after approval
  5. Session state updates: After every section write
  6. Cross-referencing: Every section checks existing PRDs for conflicts
  7. Specialist routing: Complex sections get expert agent input, presented to the user for decision — never written silently

Never auto-generate the full PRD and present it as a fait accompli. Never write a section without user approval. Never contradict an existing approved PRD without flagging the conflict. Always show where decisions come from (dependency PRDs, pillars, user choices).

Context Window Awareness

This is a long-running skill. After writing each section, check if the status line shows context at or above 70%. If so, append this notice to the response:

Context is approaching the limit (≥70%). Your progress is saved — all approved sections are written to design/prd/[system-name].md. When you're ready to continue, open a fresh Claude Code session and run /saas-design-system [system-name] — it will detect which sections are complete and resume from the next one.


Recommended Next Steps

  • Run /saas-design-review design/prd/[system-name].md in a fresh session to validate the completed PRD independently
  • Run /saas-consistency-check to verify this PRD's values don't conflict with other PRDs
  • Run /saas-map-features next to move to the next highest-priority undesigned system
  • Run /saas-gate-check technical-setup when all MVP PRDs are authored and reviewed

리뷰

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

댓글

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

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

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

0 / 1,000자

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

같은 저장소의 스킬

Turn your AI session into an autonomous SaaS and software engineering studio with 49 specialized agents, 74 workflow skills (/saas-*), 28 director gates, and complete architecture across Next.js, FastAPI, Supabase, Tailwind, and Stripe.

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

Basinfy/Basinfy-SaaS-Studio22026년 10월 22일 업데이트

Brownfield audit — do existing artifacts actually work? Numbered migration plan. Unlike /saas-project-stage-detect, checks compliance not existence.

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

Basinfy/Basinfy-SaaS-Studio22026년 10월 22일 업데이트

Create an ADR documenting a technical decision: context, alternatives considered, consequences.

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

Basinfy/Basinfy-SaaS-Studio22026년 10월 22일 업데이트

Traceability matrix mapping PRD requirements to ADRs. Finds gaps, cross-ADR conflicts, stack compatibility. PASS/CONCERNS/NOT ASSESSED/FAIL.

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

Basinfy/Basinfy-SaaS-Studio22026년 10월 22일 업데이트

Audit assets against naming conventions, file size budgets, format standards. Finds orphaned assets, missing references.

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

Basinfy/Basinfy-SaaS-Studio22026년 10월 22일 업데이트

Author per-asset visual specs, SVG dimensions, and generation prompts from PRDs and design tokens. After design tokens.

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

Basinfy/Basinfy-SaaS-Studio22026년 10월 22일 업데이트

Basinfy의 스킬 모두 보기

이 스킬의 문제 신고