gsd-trae 1.0.1 → 1.0.2

package/refs/vbenchmark/tasks/frontend/components/form-builder/task.yaml

@@ -1,28 +0,0 @@
-name: Dynamic Form Builder
-category: frontend
-subcategory: components
-description: Build a drag-and-drop form builder with live preview and JSON export
-difficulty: hard
-stack: nextjs-supabase
-timeout: 900
-tokenLimit: 200000
-
-tests:
-  functional: tests/form-builder.test.ts
-
-docker:
-  compose: docker-compose.yaml
-
-tags:
-  - forms
-  - drag-drop
-  - builder
-  - react
-  - validation
-
-evaluation:
-  functional: 0.4
-  visual: 0.25
-  quality: 0.2
-  cost: 0.1
-  speed: 0.05

package/refs/vbenchmark/tasks/frontend/components/rich-text-editor/PROMPT.md

@@ -1,45 +0,0 @@
-# Task: WYSIWYG Rich Text Editor
-
-## Objective
-Build a rich text editor with Vue 3 and Tiptap supporting common formatting and embeds.
-
-## Requirements
-
-1. **Text Formatting**
-   - Bold, italic, underline, strikethrough
-   - Headings (H1-H6)
-   - Lists (bullet, numbered, checklist)
-   - Blockquotes
-   - Code blocks with syntax highlighting
-
-2. **Media & Embeds**
-   - Image upload and resize
-   - YouTube/Vimeo embeds
-   - Link insertion with preview
-   - Tables with editing
-
-3. **Toolbar**
-   - Floating toolbar on selection
-   - Fixed toolbar option
-   - Keyboard shortcuts
-   - Undo/redo
-
-4. **Output**
-   - HTML output
-   - JSON (Tiptap format)
-   - Markdown export
-   - Plain text
-
-## Files to Create
-- `components/Editor/Editor.vue` - Main editor
-- `components/Editor/Toolbar.vue` - Toolbar
-- `components/Editor/FloatingMenu.vue` - Floating menu
-- `components/Editor/extensions/` - Custom extensions
-- `composables/useEditor.ts` - Editor composable
-
-## Success Criteria
-- [ ] All formatting works
-- [ ] Images upload and display
-- [ ] Tables are editable
-- [ ] Keyboard shortcuts work
-- [ ] Output formats correct

package/refs/vbenchmark/tasks/frontend/components/rich-text-editor/task.yaml

@@ -1,24 +0,0 @@
-name: WYSIWYG Rich Text Editor
-category: frontend
-subcategory: components
-description: Build rich text editor with Vue 3
-difficulty: hard
-stack: vue
-timeout: 900
-tokenLimit: 200000
-
-tests:
-  functional: tests/editor.test.ts
-
-tags:
-  - vue
-  - editor
-  - wysiwyg
-  - tiptap
-  - typescript
-
-evaluation:
-  functional: 0.4
-  visual: 0.2
-  quality: 0.25
-  speed: 0.15

package/refs/vbenchmark/tasks/frontend/figma-to-code/dashboard-layout/PROMPT.md

@@ -1,50 +0,0 @@
-# Task: Admin Dashboard Layout
-
-## Objective
-Build an admin dashboard layout with Vue 3 including sidebar, header, and content areas.
-
-## Design Requirements
-- Collapsible sidebar navigation
-- Top header with search and user menu
-- Main content area with cards
-- Responsive layout
-
-## Technical Requirements
-
-1. **Layout Structure**
-   - Fixed sidebar (collapsible)
-   - Fixed header
-   - Scrollable content area
-   - Nested routes support
-
-2. **Sidebar**
-   - Navigation items with icons
-   - Nested menu support
-   - Active state highlighting
-   - Collapse to icons only
-
-3. **Header**
-   - Global search
-   - Notifications dropdown
-   - User profile menu
-   - Breadcrumbs
-
-4. **Dashboard Cards**
-   - Stats cards with icons
-   - Chart placeholders
-   - Recent activity list
-   - Quick actions
-
-## Files to Create
-- `src/layouts/DashboardLayout.vue` - Main layout
-- `src/components/Sidebar.vue` - Sidebar nav
-- `src/components/Header.vue` - Top header
-- `src/views/Dashboard.vue` - Dashboard view
-- `src/composables/useSidebar.ts` - Sidebar state
-
-## Success Criteria
-- [ ] Layout matches design
-- [ ] Sidebar collapses correctly
-- [ ] Responsive on all screens
-- [ ] Navigation works
-- [ ] Dropdowns functional

package/refs/vbenchmark/tasks/frontend/figma-to-code/dashboard-layout/task.yaml

@@ -1,25 +0,0 @@
-name: Admin Dashboard Layout
-category: frontend
-subcategory: figma-to-code
-description: Build admin dashboard UI with Vue 3
-difficulty: medium
-stack: vue
-timeout: 600
-tokenLimit: 150000
-
-tests:
-  visual: tests/visual.test.ts
-  functional: tests/dashboard.test.ts
-
-tags:
-  - vue
-  - dashboard
-  - admin
-  - layout
-  - typescript
-
-evaluation:
-  functional: 0.3
-  visual: 0.4
-  quality: 0.2
-  speed: 0.1

package/refs/vbenchmark/tasks/frontend/figma-to-code/landing-page/PROMPT.md

@@ -1,49 +0,0 @@
-# Task: Landing Page from Design
-
-## Objective
-Build a pixel-perfect responsive landing page from design specifications.
-
-## Design Requirements
-- Hero section with headline, subheadline, CTA button
-- Features section with 3-4 feature cards
-- Testimonials carousel
-- Pricing section with 3 tiers
-- Footer with links and newsletter signup
-
-## Technical Requirements
-
-1. **Responsive Design**
-   - Mobile-first approach
-   - Breakpoints: 640px, 768px, 1024px, 1280px
-   - Touch-friendly on mobile
-
-2. **Components**
-   - Reusable Button component
-   - Card component
-   - Section layout components
-   - Navigation header
-
-3. **Interactions**
-   - Smooth scroll to sections
-   - Hover states on buttons/cards
-   - Mobile menu toggle
-   - Form validation on newsletter
-
-4. **Performance**
-   - Optimized images
-   - Lazy load below-fold content
-   - Minimal bundle size
-
-## Files to Create
-- `app/page.tsx` - Main landing page
-- `components/Hero.tsx` - Hero section
-- `components/Features.tsx` - Features grid
-- `components/Pricing.tsx` - Pricing cards
-- `components/Footer.tsx` - Footer
-
-## Success Criteria
-- [ ] Matches design specifications
-- [ ] Fully responsive
-- [ ] All interactions work
-- [ ] Performance score > 90
-- [ ] Accessible (WCAG 2.1 AA)

package/refs/vbenchmark/tasks/frontend/figma-to-code/landing-page/task.yaml

@@ -1,25 +0,0 @@
-name: Landing Page from Design
-category: frontend
-subcategory: figma-to-code
-description: Build responsive landing page from design specs with React
-difficulty: medium
-stack: nextjs
-timeout: 600
-tokenLimit: 150000
-
-tests:
-  visual: tests/visual.test.ts
-  functional: tests/landing.test.ts
-
-tags:
-  - react
-  - tailwind
-  - responsive
-  - landing-page
-  - typescript
-
-evaluation:
-  functional: 0.2
-  visual: 0.5
-  quality: 0.2
-  speed: 0.1

package/refs/vbenchmark/tasks/frontend/figma-to-code/mobile-app-screen/PROMPT.md

@@ -1,51 +0,0 @@
-# Task: Mobile App Screen
-
-## Objective
-Build a mobile app screen using React Native/Expo from design specs.
-
-## Screen: Product Detail
-- Product image carousel
-- Product title and price
-- Size/color selectors
-- Add to cart button
-- Product description accordion
-- Related products horizontal scroll
-
-## Technical Requirements
-
-1. **Components**
-   - Image carousel with dots
-   - Selector chips (size, color)
-   - Quantity stepper
-   - Expandable accordion
-   - Horizontal scroll list
-
-2. **Interactions**
-   - Swipe through images
-   - Tap to select size/color
-   - Add to cart animation
-   - Pull to refresh
-
-3. **Styling**
-   - Platform-specific styling (iOS/Android)
-   - Safe area handling
-   - Responsive to screen sizes
-
-4. **Navigation**
-   - Back button
-   - Share button
-   - Cart icon with badge
-
-## Files to Create
-- `screens/ProductDetail.tsx` - Main screen
-- `components/ImageCarousel.tsx` - Image slider
-- `components/SizeSelector.tsx` - Size picker
-- `components/QuantityStepper.tsx` - Quantity control
-- `components/Accordion.tsx` - Expandable section
-
-## Success Criteria
-- [ ] Matches design specs
-- [ ] Carousel swipes smoothly
-- [ ] Selectors work correctly
-- [ ] Platform-appropriate styling
-- [ ] Handles safe areas

package/refs/vbenchmark/tasks/frontend/figma-to-code/mobile-app-screen/task.yaml

@@ -1,24 +0,0 @@
-name: Mobile App Screen
-category: frontend
-subcategory: figma-to-code
-description: Build mobile app screen with React Native
-difficulty: medium
-stack: react-native
-timeout: 600
-tokenLimit: 150000
-
-tests:
-  functional: tests/screen.test.tsx
-
-tags:
-  - react-native
-  - mobile
-  - ui
-  - typescript
-  - expo
-
-evaluation:
-  functional: 0.3
-  visual: 0.4
-  quality: 0.2
-  speed: 0.1

package/refs/vbenchmark/tasks/frontend/figma-to-code/pricing-card/PROMPT.md

@@ -1,93 +0,0 @@
-# Pricing Card Component
-
-## Context
-
-Build a pixel-perfect pricing card component that matches the provided design reference. The component should be responsive and accessible.
-
-## Design Specifications
-
-See `reference/design.png` for the visual reference.
-
-### Card Layout
-
-- Width: 320px (desktop), 100% (mobile < 640px)
-- Border radius: 16px
-- Background: White (#FFFFFF)
-- Box shadow: `0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)`
-
-### Header Section
-
-- Background: Linear gradient `from-indigo-500 to-purple-600`
-- Padding: 24px
-- Plan name: White, 14px, uppercase, letter-spacing 0.1em
-- Price: White, 48px, font-bold
-- Period: White/80, 16px
-
-### Features Section
-
-- Padding: 24px
-- Feature list with check icons
-- Check icon: Green (#22C55E), 20px
-- Feature text: Gray-700, 16px
-- Line height: 1.75
-
-### CTA Button
-
-- Full width
-- Height: 48px
-- Background: Indigo-600 (#4F46E5)
-- Hover: Indigo-700 (#4338CA)
-- Text: White, 16px, font-semibold
-- Border radius: 8px
-
-### Popular Badge (if applicable)
-
-- Position: Top right, -12px offset
-- Background: Amber-400 (#FBBF24)
-- Text: Amber-900, 12px, font-bold
-- Padding: 4px 12px
-- Border radius: 999px
-
-## Requirements
-
-### Component API
-
-```tsx
-interface PricingCardProps {
-  planName: string;
-  price: number;
-  period: 'monthly' | 'yearly';
-  features: string[];
-  isPopular?: boolean;
-  ctaText?: string;
-  onCtaClick?: () => void;
-}
-```
-
-### Functionality
-
-1. Display all pricing information
-2. Render feature list with check icons
-3. Show popular badge when `isPopular` is true
-4. Handle CTA button click
-5. Be fully responsive
-
-### Accessibility
-
-- Semantic HTML structure
-- Proper heading hierarchy
-- Keyboard navigable button
-- Screen reader friendly
-
-## Files to Create
-
-- `components/PricingCard.tsx` - Main component
-- `components/PricingCard.test.tsx` - Unit tests
-
-## Acceptance Criteria
-
-- [ ] Visual match > 95% similarity to reference
-- [ ] Responsive at all breakpoints
-- [ ] Accessible (passes axe-core)
-- [ ] Button click handler works
-- [ ] Popular badge conditional render

package/refs/vbenchmark/tasks/frontend/figma-to-code/pricing-card/docker-compose.yaml

@@ -1,23 +0,0 @@
-version: '3.8'
-
-services:
-  app:
-    build:
-      context: .
-      dockerfile: Dockerfile
-    ports:
-      - "3000:3000"
-    environment:
-      - NODE_ENV=development
-
-  test:
-    image: mcr.microsoft.com/playwright:v1.41.0-jammy
-    depends_on:
-      - app
-    environment:
-      - BASE_URL=http://app:3000
-    volumes:
-      - ./tests:/app/tests:ro
-      - ./reference:/app/reference:ro
-      - ./screenshots:/app/screenshots
-    command: npx playwright test

package/refs/vbenchmark/tasks/frontend/figma-to-code/pricing-card/task.yaml

@@ -1,30 +0,0 @@
-name: Pricing Card Component
-category: frontend
-subcategory: figma-to-code
-description: Build a pixel-perfect pricing card component from design specs
-difficulty: medium
-stack: nextjs
-timeout: 300
-tokenLimit: 100000
-
-tests:
-  visual: tests/visual/diff.test.ts
-  functional: tests/visual/interaction.test.ts
-
-docker:
-  compose: docker-compose.yaml
-
-weight: 1.0
-
-tags:
-  - react
-  - tailwind
-  - ui-component
-  - visual-testing
-  - responsive
-
-evaluation:
-  functional: 0.2
-  visual: 0.5
-  quality: 0.2
-  speed: 0.1

package/refs/vbenchmark/tasks/frontend/figma-to-code/pricing-card/tests/visual/diff.test.ts

@@ -1,107 +0,0 @@
-import { test, expect } from '@playwright/test';
-import { PNG } from 'pngjs';
-import pixelmatch from 'pixelmatch';
-import * as fs from 'fs';
-import * as path from 'path';
-
-const REFERENCE_DIR = path.join(__dirname, '../../reference');
-const SCREENSHOTS_DIR = path.join(__dirname, '../../screenshots');
-
-test.describe('Visual Regression Tests', () => {
-  test.beforeAll(() => {
-    if (!fs.existsSync(SCREENSHOTS_DIR)) {
-      fs.mkdirSync(SCREENSHOTS_DIR, { recursive: true });
-    }
-  });
-
-  test('pricing card desktop matches reference', async ({ page }) => {
-    await page.setViewportSize({ width: 1280, height: 720 });
-    await page.goto('/pricing');
-
-    const card = page.locator('[data-testid="pricing-card"]').first();
-    await card.waitFor({ state: 'visible' });
-
-    const screenshot = await card.screenshot();
-    const screenshotPath = path.join(SCREENSHOTS_DIR, 'pricing-card-desktop.png');
-    fs.writeFileSync(screenshotPath, screenshot);
-
-    const referencePath = path.join(REFERENCE_DIR, 'pricing-card-desktop.png');
-    if (!fs.existsSync(referencePath)) {
-      test.skip('Reference image not found');
-      return;
-    }
-
-    const reference = PNG.sync.read(fs.readFileSync(referencePath));
-    const captured = PNG.sync.read(screenshot);
-
-    const { width, height } = reference;
-    const diff = new PNG({ width, height });
-
-    const mismatchedPixels = pixelmatch(
-      reference.data,
-      captured.data,
-      diff.data,
-      width,
-      height,
-      { threshold: 0.1 }
-    );
-
-    const totalPixels = width * height;
-    const matchPercentage = ((totalPixels - mismatchedPixels) / totalPixels) * 100;
-
-    fs.writeFileSync(
-      path.join(SCREENSHOTS_DIR, 'pricing-card-desktop-diff.png'),
-      PNG.sync.write(diff)
-    );
-
-    expect(matchPercentage).toBeGreaterThan(95);
-  });
-
-  test('pricing card mobile matches reference', async ({ page }) => {
-    await page.setViewportSize({ width: 375, height: 667 });
-    await page.goto('/pricing');
-
-    const card = page.locator('[data-testid="pricing-card"]').first();
-    await card.waitFor({ state: 'visible' });
-
-    const screenshot = await card.screenshot();
-    const screenshotPath = path.join(SCREENSHOTS_DIR, 'pricing-card-mobile.png');
-    fs.writeFileSync(screenshotPath, screenshot);
-
-    const referencePath = path.join(REFERENCE_DIR, 'pricing-card-mobile.png');
-    if (!fs.existsSync(referencePath)) {
-      test.skip('Reference image not found');
-      return;
-    }
-
-    const reference = PNG.sync.read(fs.readFileSync(referencePath));
-    const captured = PNG.sync.read(screenshot);
-
-    const { width, height } = reference;
-    const diff = new PNG({ width, height });
-
-    const mismatchedPixels = pixelmatch(
-      reference.data,
-      captured.data,
-      diff.data,
-      width,
-      height,
-      { threshold: 0.1 }
-    );
-
-    const totalPixels = width * height;
-    const matchPercentage = ((totalPixels - mismatchedPixels) / totalPixels) * 100;
-
-    expect(matchPercentage).toBeGreaterThan(90);
-  });
-
-  test('popular card shows badge', async ({ page }) => {
-    await page.goto('/pricing');
-
-    const popularCard = page.locator('[data-testid="pricing-card"][data-popular="true"]');
-    const badge = popularCard.locator('[data-testid="popular-badge"]');
-
-    await expect(badge).toBeVisible();
-    await expect(badge).toHaveText(/popular/i);
-  });
-});

package/refs/vbenchmark/tasks/frontend/figma-to-code/pricing-card/tests/visual/interaction.test.ts

@@ -1,88 +0,0 @@
-import { test, expect } from '@playwright/test';
-
-test.describe('Pricing Card Interactions', () => {
-  test.beforeEach(async ({ page }) => {
-    await page.goto('/pricing');
-  });
-
-  test('CTA button is clickable', async ({ page }) => {
-    const card = page.locator('[data-testid="pricing-card"]').first();
-    const ctaButton = card.locator('button');
-
-    await expect(ctaButton).toBeEnabled();
-    await ctaButton.click();
-
-    // Should trigger some action - check for modal, navigation, or event
-    const wasClicked = await page.evaluate(() => {
-      return (window as any).__ctaClicked === true;
-    });
-    expect(wasClicked).toBe(true);
-  });
-
-  test('button has hover state', async ({ page }) => {
-    const card = page.locator('[data-testid="pricing-card"]').first();
-    const ctaButton = card.locator('button');
-
-    const initialBg = await ctaButton.evaluate(
-      (el) => getComputedStyle(el).backgroundColor
-    );
-
-    await ctaButton.hover();
-
-    const hoverBg = await ctaButton.evaluate(
-      (el) => getComputedStyle(el).backgroundColor
-    );
-
-    expect(hoverBg).not.toBe(initialBg);
-  });
-
-  test('card is keyboard accessible', async ({ page }) => {
-    await page.keyboard.press('Tab');
-
-    const focusedElement = await page.evaluate(() => {
-      return document.activeElement?.tagName.toLowerCase();
-    });
-
-    expect(focusedElement).toBe('button');
-  });
-
-  test('renders all features', async ({ page }) => {
-    const card = page.locator('[data-testid="pricing-card"]').first();
-    const features = card.locator('[data-testid="feature-item"]');
-
-    const count = await features.count();
-    expect(count).toBeGreaterThan(0);
-
-    for (let i = 0; i < count; i++) {
-      const feature = features.nth(i);
-      await expect(feature).toBeVisible();
-      const text = await feature.textContent();
-      expect(text?.length).toBeGreaterThan(0);
-    }
-  });
-
-  test('displays correct price format', async ({ page }) => {
-    const card = page.locator('[data-testid="pricing-card"]').first();
-    const priceElement = card.locator('[data-testid="price"]');
-
-    const priceText = await priceElement.textContent();
-    expect(priceText).toMatch(/\$\d+/);
-  });
-
-  test('passes accessibility audit', async ({ page }) => {
-    const card = page.locator('[data-testid="pricing-card"]').first();
-
-    // Check semantic structure
-    const hasHeading = await card.locator('h2, h3, h4').count();
-    expect(hasHeading).toBeGreaterThan(0);
-
-    // Check button has accessible name
-    const button = card.locator('button');
-    const buttonText = await button.textContent();
-    expect(buttonText?.length).toBeGreaterThan(0);
-
-    // Check list semantics for features
-    const hasList = await card.locator('ul, ol').count();
-    expect(hasList).toBeGreaterThan(0);
-  });
-});