@su-record/vibe 2.7.8 → 2.7.10

package/skills/e2e-commerce/SKILL.md

@@ -1,304 +1,57 @@
----
-name: e2e-commerce
-description: "E2E test scenarios for commerce checkout and payment flows"
-triggers: [e2e commerce, checkout test, payment test, order flow test]
-priority: 65
----
-# E2E Commerce Test Scenarios
-
-Playwright-based E2E testing for commerce checkout flows.
-
-## When to Use
-
-- After implementing checkout/payment features
-- Before production deployment
-- CI/CD pipeline quality gate
-- Regression testing after changes
-
-## Test Scenarios
-
-### 1. Happy Path - Complete Checkout
-
-```typescript
-// tests/e2e/checkout.spec.ts
-import { test, expect } from '@playwright/test';
-
-test.describe('Checkout Flow', () => {
-  test('complete purchase - happy path', async ({ page }) => {
-    // 1. Add to cart
-    await page.goto('/products/test-product');
-    await page.click('[data-testid="add-to-cart"]');
-    await expect(page.locator('[data-testid="cart-count"]')).toHaveText('1');
-
-    // 2. Go to cart
-    await page.click('[data-testid="cart-icon"]');
-    await expect(page).toHaveURL('/cart');
-
-    // 3. Proceed to checkout
-    await page.click('[data-testid="checkout-button"]');
-    await expect(page).toHaveURL('/checkout');
-
-    // 4. Fill shipping info
-    await page.fill('[name="name"]', 'Test User');
-    await page.fill('[name="phone"]', '010-1234-5678');
-    await page.fill('[name="address"]', 'Test Address 123');
-
-    // 5. Select payment method
-    await page.click('[data-testid="payment-card"]');
-
-    // 6. Complete payment (sandbox/mock)
-    await page.click('[data-testid="pay-button"]');
-
-    // 7. Verify order complete
-    await expect(page).toHaveURL(/\/orders\/\w+/);
-    await expect(page.locator('[data-testid="order-status"]')).toHaveText('결제 완료');
-  });
-});
-```
-
-### 2. Stock Validation
-
-```typescript
-test('prevent checkout when out of stock', async ({ page }) => {
-  // Setup: Product with stock = 1, another user reserves it
-  await page.goto('/products/low-stock-product');
-  await page.click('[data-testid="add-to-cart"]');
-  await page.goto('/checkout');
-
-  // Simulate stock depletion during checkout
-  await page.evaluate(async () => {
-    await fetch('/api/test/deplete-stock', { method: 'POST' });
-  });
-
-  // Attempt payment
-  await page.click('[data-testid="pay-button"]');
-
-  // Should show out of stock error
-  await expect(page.locator('[data-testid="error-message"]'))
-    .toContainText('재고가 부족합니다');
-});
-```
-
-### 3. Payment Failure Handling
-
-```typescript
-test('handle payment failure gracefully', async ({ page }) => {
-  await page.goto('/products/test-product');
-  await page.click('[data-testid="add-to-cart"]');
-  await page.goto('/checkout');
-
-  // Fill form
-  await page.fill('[name="name"]', 'Test User');
-  await page.fill('[name="address"]', 'Test Address');
-
-  // Use test card that triggers failure
-  await page.fill('[name="card-number"]', '4000000000000002'); // Decline card
-  await page.click('[data-testid="pay-button"]');
-
-  // Verify error handling
-  await expect(page.locator('[data-testid="payment-error"]'))
-    .toContainText('결제가 거절되었습니다');
-
-  // Stock should be released
-  await page.goto('/products/test-product');
-  await expect(page.locator('[data-testid="stock-status"]'))
-    .not.toContainText('품절');
-});
-```
-
-### 4. Duplicate Payment Prevention
-
-```typescript
-test('prevent duplicate payment on double click', async ({ page }) => {
-  await page.goto('/checkout');
-  // Fill checkout form...
-
-  // Double click pay button rapidly
-  const payButton = page.locator('[data-testid="pay-button"]');
-  await Promise.all([
-    payButton.click(),
-    payButton.click(),
-  ]);
-
-  // Wait for completion
-  await page.waitForURL(/\/orders\/\w+/);
-
-  // Verify only one order created
-  const orderId = page.url().split('/').pop();
-  const response = await page.request.get(`/api/orders?userId=test`);
-  const orders = await response.json();
-
-  expect(orders.filter(o => o.id === orderId)).toHaveLength(1);
-});
-```
-
-### 5. Coupon Application
-
-```typescript
-test('apply coupon and verify discount', async ({ page }) => {
-  await page.goto('/products/test-product'); // Price: 10,000
-  await page.click('[data-testid="add-to-cart"]');
-  await page.goto('/checkout');
-
-  // Original price
-  await expect(page.locator('[data-testid="total-price"]'))
-    .toHaveText('10,000원');
-
-  // Apply 10% coupon
-  await page.fill('[name="coupon"]', 'DISCOUNT10');
-  await page.click('[data-testid="apply-coupon"]');
-
-  // Verify discount applied
-  await expect(page.locator('[data-testid="discount-amount"]'))
-    .toHaveText('-1,000원');
-  await expect(page.locator('[data-testid="total-price"]'))
-    .toHaveText('9,000원');
-});
-```
-
-### 6. Webhook Resilience
-
-```typescript
-test('order completes even with webhook delay', async ({ page, request }) => {
-  // Configure webhook delay in test environment
-  await request.post('/api/test/configure-webhook', {
-    data: { delay: 5000 } // 5 second delay
-  });
-
-  // Complete checkout
-  await page.goto('/checkout');
-  // ... fill form
-  await page.click('[data-testid="pay-button"]');
-
-  // Should show processing state
-  await expect(page.locator('[data-testid="order-status"]'))
-    .toHaveText('처리 중');
-
-  // Wait for webhook
-  await page.waitForSelector('[data-testid="order-status"]:has-text("결제 완료")', {
-    timeout: 10000
-  });
-});
-```
-
-## CLI Usage
-
-```bash
-# Run all commerce e2e tests
-/vibe.utils --e2e commerce
-
-# Run specific scenario
-/vibe.utils --e2e checkout-flow
-
-# Run with visual recording
-/vibe.utils --e2e commerce --record
-
-# Run against staging
-/vibe.utils --e2e commerce --env staging
-```
-
-## Test Environment Setup
-
-### Mock PG Server
-```typescript
-// tests/mocks/pg-server.ts
-import { setupServer } from 'msw/node';
-import { http, HttpResponse } from 'msw';
-
-export const pgMockServer = setupServer(
-  // Success response
-  http.post('/payments/authorize', () => {
-    return HttpResponse.json({
-      success: true,
-      transactionId: `txn_${Date.now()}`,
-      status: 'AUTHORIZED',
-    });
-  }),
-
-  // Failure simulation
-  http.post('/payments/authorize', ({ request }) => {
-    const body = request.json();
-    if (body.cardNumber === '4000000000000002') {
-      return HttpResponse.json({
-        success: false,
-        error: 'CARD_DECLINED',
-      }, { status: 400 });
-    }
-  }),
-);
-```
-
-### Database Seeding
-```typescript
-// tests/fixtures/commerce.ts
-export async function seedCommerceData(db: Database) {
-  // Create test products
-  await db.products.createMany([
-    { id: 'test-product', name: 'Test Product', price: 10000, stock: 100 },
-    { id: 'low-stock', name: 'Low Stock', price: 5000, stock: 1 },
-  ]);
-
-  // Create test coupons
-  await db.coupons.create({
-    code: 'DISCOUNT10',
-    discountPercent: 10,
-    expiresAt: addDays(new Date(), 30),
-  });
-}
-```
-
-## CI/CD Integration
-
-```yaml
-# .github/workflows/e2e.yml
-name: E2E Commerce Tests
-
-on:
-  pull_request:
-    paths:
-      - 'src/checkout/**'
-      - 'src/payment/**'
-      - 'src/cart/**'
-
-jobs:
-  e2e:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-
-      - name: Install dependencies
-        run: npm ci
-
-      - name: Start test server
-        run: npm run start:test &
-
-      - name: Run E2E tests
-        run: npx playwright test tests/e2e/commerce/
-
-      - name: Upload test results
-        if: failure()
-        uses: actions/upload-artifact@v4
-        with:
-          name: playwright-report
-          path: playwright-report/
-```
-
-## Quality Checklist
-
-### Must Pass (P0)
-- [ ] Happy path checkout completes
-- [ ] Payment failure releases stock
-- [ ] Duplicate payment prevented
-- [ ] Out of stock blocks checkout
-
-### Should Pass (P1)
-- [ ] Coupon calculation correct
-- [ ] Webhook retry handled
-- [ ] Cart merge on login works
-- [ ] Partial refund processed
-
-### Nice to Have (P2)
-- [ ] Multiple payment methods
-- [ ] Guest checkout flow
-- [ ] Order cancellation
-- [ ] Subscription renewal
+---
+name: e2e-commerce
+description: "E2E test scenarios for commerce checkout and payment flows"
+triggers: [e2e commerce, checkout test, payment test, order flow test]
+priority: 65
+---
+
+# E2E Commerce Test Scenarios
+
+## Pre-check (K1)
+
+> Are you testing a checkout/payment/order flow? If testing simple CRUD or non-transactional features, standard E2E patterns suffice — this skill is not needed.
+
+## Must-Test Scenarios
+
+### P0 — Blocks Deployment
+
+| Scenario | What to Verify | Gotcha |
+|----------|---------------|--------|
+| **Happy path checkout** | Cart → Shipping → Payment → Order confirmation | Verify order status text, not just URL change |
+| **Payment failure** | Error message shown, stock released | Check stock is RELEASED after failure, not just error displayed |
+| **Duplicate payment** | Only 1 order created on double-click | `Promise.all([click(), click()])` then verify order count via API |
+| **Out of stock** | Blocks checkout with clear message | Simulate stock depletion mid-checkout via test API |
+
+### P1 — Should Pass
+
+| Scenario | What to Verify | Gotcha |
+|----------|---------------|--------|
+| **Coupon calculation** | Discount amount and total correct | Test percentage AND fixed amount coupons separately |
+| **Webhook resilience** | Order completes even with delayed webhook | Configure 5s delay, verify processing→complete transition |
+| **Cart merge on login** | Guest cart merged into user cart | User cart takes priority for duplicate items |
+| **Partial refund** | Refunded amount correct, order updated | Verify remaining amount, not just refund event |
+
+### P2 — Nice to Have
+
+| Scenario | What to Verify |
+|----------|---------------|
+| Multiple payment methods | Each method completes checkout |
+| Guest checkout | Full flow without login |
+| Order cancellation | Refund triggered, stock restored |
+
+## Test Environment Gotchas
+
+| Gotcha | Fix |
+|--------|-----|
+| Using real PG sandbox in CI | Use MSW (`setupServer`) for mock PG responses |
+| Flaky tests from timing | Use `waitForSelector`/`waitForURL`, never `sleep` |
+| Test data leaks between tests | Seed in `beforeAll`, clean in `afterAll` |
+| Hardcoded test card numbers | Document: `4000000000000002` = decline |
+
+## Done Criteria (K4)
+
+- [ ] All P0 scenarios pass in CI
+- [ ] P1 scenarios written and tracked
+- [ ] Test data seeded/cleaned per suite
+- [ ] No flaky tests (no arbitrary waits)
+- [ ] Mock PG server configured for CI

package/skills/frontend-design/SKILL.md

@@ -1,92 +1,73 @@
----
-name: frontend-design
-description: "Production-grade frontend with bold aesthetic direction for UI-focused projects"
-triggers: [frontend, ui design, aesthetic, beautiful ui, design system, ui quality, visual design]
-priority: 70
----
-# Frontend Design Skill
-
-Create production-grade frontend with bold aesthetic direction.
-
-## When to Use
-
-- UI-focused projects requiring high visual quality
-- Design system implementation
-- User-facing features where aesthetics matter
-
-## Core Principles
-
-### 1. Typography
-- Choose distinctive typefaces that set the tone
-- Establish clear hierarchy through size, weight, and spacing
-- Consider custom fonts that reflect brand personality
-
-### 2. Color & Theme
-- Develop unique color palettes beyond defaults
-- Consider dark/light mode with intentional contrast
-- Use color purposefully for hierarchy and emphasis
-
-### 3. Motion & Animation
-- Add meaningful micro-interactions
-- Use motion to guide user attention
-- Implement smooth transitions between states
-
-### 4. Composition & Layout
-- Create visual rhythm through spacing
-- Use asymmetry and unconventional layouts when appropriate
-- Balance density with breathing room
-
-### 5. Visual Details
-- Custom icons and illustrations
-- Thoughtful shadows and depth
-- Refined borders, corners, and surfaces
-
-## Anti-Patterns to Avoid
-
-- Generic Bootstrap/Tailwind defaults without customization
-- Overused fonts (Inter, Roboto without styling)
-- Predictable card-based layouts everywhere
-- Stock photography without curation
-- Safe, corporate color palettes
-
-## Implementation Guidelines
-
-```typescript
-// Design token structure
-const tokens = {
-  colors: {
-    primary: { /* custom palette */ },
-    semantic: { /* success, error, warning */ },
-  },
-  typography: {
-    fontFamily: { /* display, body, mono */ },
-    scale: { /* modular scale */ },
-  },
-  spacing: { /* consistent rhythm */ },
-  motion: { /* duration, easing */ },
-};
-```
-
-## Quality Checklist
-
-- [ ] Typography creates clear hierarchy
-- [ ] Color palette is distinctive and accessible
-- [ ] Animations are smooth (60fps)
-- [ ] Layout works across breakpoints
-- [ ] Empty/loading/error states are designed
-- [ ] Dark mode (if applicable) is intentional
-- [ ] Micro-interactions provide feedback
-
-## Integration with Vibe
-
-Use with `/vibe.utils --ui` for preview:
-
-```bash
-/vibe.utils --ui "login form with bold typography and custom color scheme"
-```
-
-## Resources
-
-- [Refactoring UI](https://www.refactoringui.com/) - Design principles
-- [Motion Design](https://motion.dev/) - Animation library
-- [Radix Primitives](https://www.radix-ui.com/) - Accessible components
+---
+name: frontend-design
+description: "Production-grade frontend with bold aesthetic direction for UI-focused projects"
+triggers: [frontend, ui design, aesthetic, beautiful ui, design system, ui quality, visual design]
+priority: 70
+---
+
+# Frontend Design Skill
+
+Create production-grade frontend with bold aesthetic direction.
+
+## Pre-check (K1)
+
+> Does this project need a custom design direction? If using an existing design system (shadcn/ui, Material UI, Ant Design) without customization, standard component docs suffice.
+
+## When to Use
+
+- UI-focused projects requiring high visual quality
+- Design system implementation from scratch
+- User-facing features where aesthetics matter
+
+## Core Principles
+
+### 1. Typography
+- Choose distinctive typefaces that set the tone
+- Establish clear hierarchy through size, weight, and spacing
+- Consider custom fonts that reflect brand personality
+
+### 2. Color & Theme
+- Develop unique color palettes beyond defaults
+- Consider dark/light mode with intentional contrast
+- Use color purposefully for hierarchy and emphasis
+
+### 3. Motion & Animation
+- Add meaningful micro-interactions
+- Use motion to guide user attention
+- Implement smooth transitions between states
+
+### 4. Composition & Layout
+- Create visual rhythm through spacing
+- Use asymmetry and unconventional layouts when appropriate
+- Balance density with breathing room
+
+### 5. Visual Details
+- Custom icons and illustrations
+- Thoughtful shadows and depth
+- Refined borders, corners, and surfaces
+
+## Anti-Patterns to Avoid
+
+- Generic Bootstrap/Tailwind defaults without customization
+- Overused fonts (Inter, Roboto without styling)
+- Predictable card-based layouts everywhere
+- Stock photography without curation
+- Safe, corporate color palettes
+
+## Quality Checklist
+
+- [ ] Typography creates clear hierarchy
+- [ ] Color palette is distinctive and accessible
+- [ ] Animations are smooth (60fps)
+- [ ] Layout works across breakpoints
+- [ ] Empty/loading/error states are designed
+- [ ] Dark mode (if applicable) is intentional
+- [ ] Micro-interactions provide feedback
+
+## Done Criteria (K4)
+
+- [ ] Design tokens defined (colors, typography, spacing, motion)
+- [ ] Visual hierarchy clear at all breakpoints
+- [ ] No default/uncustomized framework styles remain
+- [ ] All interactive states designed (hover, focus, active, disabled)
+- [ ] Accessibility verified (contrast, focus rings, motion preferences)