anthropics/skills180kfrontend-design
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
前端开发
Event Modeling facilitation technique — brainstorm events, identify commands and views, define aggregate boundaries, write Given-When-Then specifications
把这段话发给 Claude Code、Codex 或 Cursor。智能体会先检查安全性,你确认后才安装。
读取 https://funcoding.ai/skills/nwave-ai/nwave/nw-ddd-event-modeling/install.md ,按里面的步骤帮我安装这个 Skill。
Collaborative visual design technique created by Adam Dymitruk. The Event Model IS the specification -- it replaces traditional requirements documents with a single, living visual artifact.
| Color | Element | Description | Example |
|---|---|---|---|
| Orange | Event | Something that happened (past tense) | OrderPlaced, PaymentReceived |
| Blue | Command | User intent/action (imperative) | PlaceOrder, ProcessPayment |
| Green | Read Model/View | Data displayed to user | Order Summary, Shipping Dashboard |
| White | Screen/UI | User interface wireframe | Order Form, Checkout Page |
| Yellow | Automation/Policy | System reaction (saga/process manager) | "When PaymentReceived, then ConfirmOrder" |
| Red | External System | Integration point | Payment Gateway, Email Service |
Discover all meaningful things that happen in the system.
Process: Everyone writes events on orange stickies (past tense, domain language) | Place on timeline (left = earlier, right = later) | No filtering -- capture everything | Group related events vertically (these form swimlanes/slices)
Facilitation tips:
Example timeline:
Timeline ─────────────────────────────────────────────────>
[CustomerRegistered] [ItemAddedToCart] [OrderPlaced] [PaymentReceived]
[ItemRemovedFromCart] [PaymentFailed]
[OrderCancelled] [OrderConfirmed]
[ItemShipped]
[RefundRequested]
Understand what triggers events and what users need to see.
Commands (blue): What action causes each event? Who initiates it? Place ABOVE events.
Read Models (green): What information does the user need to act? What does the screen show after? Place BELOW events.
Screens (white): What does the UI look like? Sketch wireframes. Place at top.
Wiring pattern:
Screen -> Command -> Event(s) -> Read Model -> Screen
Find system-driven reactions to events.
Automations (yellow): "When [event] happens, the system should [command]." These become sagas or process managers. Place between triggering event and resulting command.
External systems (red): Payment gateways, email services, shipping providers. Integration boundaries.
Turn the model into precise, testable specifications.
For each command-event combination:
GIVEN:
- CustomerRegistered { customerId: "C1", name: "Ale" }
- ItemAddedToCart { cartId: "CART1", itemId: "ITEM1", quantity: 2 }
WHEN:
- PlaceOrder { cartId: "CART1", customerId: "C1" }
THEN:
- OrderPlaced { orderId: "O1", customerId: "C1", items: [...], total: 59.98 }
These specifications become: Tests (directly translatable) | Documentation (readable by everyone) | Contract (unambiguous business-dev agreement)
The Event Model reveals four patterns:
1. Command (State Change): Screen -> Command -> Event(s). User action changes state. Implementation: command handler validates, aggregate emits events.
2. View (Information Retrieval): Event(s) -> Projection -> Read Model -> Screen. Events transformed into query-optimized views. Implementation: projection subscribes and updates read model.
3. Automation (System Reaction): Event(s) -> Policy/Saga -> Command. System reacts to events by issuing new commands. Implementation: saga/process manager.
4. Translation (External Integration): External Event -> Translator -> Internal Command (or reverse). Boundary between systems. Implementation: anti-corruption layer.
Each column in the Event Model (Screen -> Command -> Event -> Read Model) becomes a vertical slice -- an independently implementable feature.
Slice 1 Slice 2 Slice 3
┌──────────┐ ┌──────────┐ ┌──────────┐
UI │ OrderForm │ │ PaymentPg│ │ Dashboard │
├──────────┤ ├──────────┤ ├──────────┤
Cmd/Qry │PlaceOrder │ │ProcessPay│ │GetOrders │
├──────────┤ ├──────────┤ ├──────────┤
Domain │OrderAgg │ │PaymentAgg│ │OrderProj │
├──────────┤ ├──────────┤ ├──────────┤
Infra │EventStore │ │EventStore│ │ReadModelDB│
└──────────┘ └──────────┘ └──────────┘
Benefits: Each slice independently implementable and deployable | Easy to parallelize across team | Model shows exactly how many slices exist and their dependencies | Each slice maps to a portion of the Event Model
Happy path: GIVEN events that set up valid state | WHEN valid command | THEN expected events
Validation failure: GIVEN events (possibly none) | WHEN invalid command | THEN error (no events emitted)
Idempotency: GIVEN events including effect already applied | WHEN same command again | THEN no new events
State-dependent: Same command produces different results depending on prior events
| Aspect | Event Modeling | EventStorming | DDD Strategic Design |
|---|---|---|---|
| Focus | Complete system design | Domain exploration | Bounded context mapping |
| Output | Full spec + implementation slices | Shared understanding | Context map + language |
| Detail | Very detailed (down to fields) | Medium (event+command level) | High-level (boundaries) |
| Duration | Half day to full day | Hours to days | Ongoing |
| Code generation | Directly possible | Not directly | Not directly |
| Testing | Produces testable specs | Produces insights | Produces guidance |
These techniques are complementary: EventStorming to explore/understand | DDD Strategic Design to identify contexts | Event Modeling to design implementation within each context.
Preparation: Invite developers + product owner + domain experts + UX designer | Duration: 2-4 hours (new system), 1-2 hours (feature) | Tools: Miro (digital) or large wall with colored stickies | Pre-work: brief domain introduction (2-3 sentences)
Flow: Intro (5 min): explain colors and phases | Event brainstorm (15 min): everyone writes, place on timeline | Organize (10 min): cluster, de-duplicate, identify gaps | Commands & Views (20 min): blue and green stickies | Wire it up (10 min): draw arrows showing data flow | Automations (10 min): policies and external systems | Given/When/Then (20 min): specs for key slices | Review (10 min): walk through entire model as narrative
Common mistakes: Too many events at once (start with happy path) | Technical events instead of business language | Skipping views (read models as important as commands) | Not involving business people | Jumping to implementation before finishing model
anthropics/skills180kGuidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
前端开发
anthropics/skills180kSuite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
前端开发
addyosmani/agent-skills103kGuides stable API and interface design. Use when designing APIs, module boundaries, or any public interface. Use when creating REST or GraphQL endpoints, defining type contracts between modules, or establishing boundaries between frontend and backend.
前端开发
addyosmani/agent-skills103kBuilds production-quality, accessible, responsive user-facing UIs. Use when building or modifying interfaces and pages, creating components, implementing layouts, meeting WCAG accessibility requirements, managing state, or when the output needs to look and feel production-quality rather than AI-generated.
前端开发
addyosmani/agent-skills103kOptimizes application performance across frontend, backend, queries, and databases. Use when performance requirements exist, when you suspect performance regressions, when Core Web Vitals or load times need improvement, when N+1 query patterns need fixing, or when profiling reveals bottlenecks.
前端开发
nexu-io/open-design100kOpenDesign's feature business case for the plugin marketplace: the user pain, options, tradeoffs, and the measure of success. Built as a decision-grade product management deck for PM, eng, design, leadership.
前端开发