Files
sar/.agents/skills/wds-4-ux-design/workflow-design-system.md
julian 17c08e6392 chore: initial monorepo scaffold + WDS Phase 1+2 artifacts
- Nx 22.7 monorepo (pnpm 11.1, TypeScript 5.9, Node 24)
- apps/api: NestJS 11 (CJS conforme CODING-RULES.md PGD-DB-004)
- apps/web: React 19 + Vite 8 (ESM)
- libs/shared/api-interface: Zod contract base
- Docker Compose dev: Postgres 18, Valkey 8, MinIO, Mailpit
- WDS artifacts:
  - design-artifacts/A-Product-Brief/ (5 docs canônicos + 16 dialogs)
  - design-artifacts/B-Trigger-Map/ (hub + 4 personas + feature impact)
- Stack canon: STACK.md v2.2 + CODING-RULES.md v2.0 + brand.md
- AGENTS.md + README.md como entrada para devs/agentes

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-27 14:34:20 +00:00

2.2 KiB

name, description
name description
workflow-design-system Define, update, and review design system components used across page specifications.

[M] Manage Design System — Define and Update Components

Goal: Define, update, and review design system components used across page specifications.

When to use: When the user needs to create new components, update existing ones, or review the design system for consistency.


INITIALIZATION

Read design log at {output_folder}/_progress/00-design-log.md before starting.

Extraction Rules

Not everything extracts at the same time:

Objects: Extract on Second Use

The first time a button, card, or widget appears, it stays inline in the page spec — it's a one-off. The second time the same pattern appears (same states, same behavior), it's a real pattern. Extract it to the design system.

First use = one-off. Second use = pattern. Extract.

Spacing: Extract Immediately on First Use

Spacing extracts on first use — no waiting for a second occurrence. Spacing is relational: when you decide that a heading needs space-xl above a card grid, that's a universal design principle, not a page-specific detail.

Component Extraction Check

Before designing the 2nd+ page, scan completed specs for shared elements. If found, suggest extraction. Don't block the flow — the user can defer.


Entry

Load design system from {output_folder}/D-Design-System/ (if exists).

Steps

Execute steps in ./steps-m/:

Step File Purpose
01 step-01-review-current.md Review existing design system state
02 step-02-define-component.md Define or update a component
03 step-03-validate-usage.md Check component usage across specs

Reference data:

  • ./data/object-types/ — component type definitions and templates
  • ./data/modular-architecture/ — three-tier architecture guide
  • ./data/guides/TRANSLATION-ORGANIZATION-GUIDE.md — content organization

AFTER COMPLETION

  1. Append a progress entry to {output_folder}/_progress/00-design-log.md under ## Progress: ### [date] — Design System: [components extracted/updated]
  2. Suggest next action based on the adaptive dashboard