Vibe Code

Vibe Code

Build UI that matches the loaded design system spec using shared components, with automated browser-based visual verification. This skill encodes universal design practices AND orchestrates verification agents to ensure visual consistency.

Universal:

• Use shared components from the design system's component library before building custom ones
• Grid/ornament layers at z-0, content at z-10 — always maintain z-layering
• All frontend work must be visually verified before marking complete
• Never skip visual verification — assume nothing looks right without testing

From loaded spec: Refer to the loaded design system spec for: color palette, typography, border system, layout patterns, component library, CSS setup, shadows, breakpoints. Brand-specific constraints (theme mode, package manager, border values) are defined in the loaded spec.

Universal:

• Building custom components when shared ones exist in the design system
• Putting content below the ornament/grid z-layer (causes overlay bug)
• Importing CSS from multiple sources instead of the design system's single entry point
• Skipping visual verification — assuming it looks right without testing

Brand-specific antipatterns (e.g., wrong color palette, incorrect border widths) are defined in the loaded design system spec under "System-Specific Constraints".

Frontend Verifier (xN in parallel):

• Launches browser automation
• Tests rendering + interactions + regressions
• Captures screenshots at breakpoints
• Fixes functional/visual bugs immediately
• Checks design system standards (colors, borders, typography)

Design Iterator (xN in parallel):

• Ask it to fix one thing at a time from the screenshot analysis
• Takes screenshots
• Analyzes visual gaps systematically
• Implements ONE improvement per iteration
• References loaded design system patterns
• Stops when design is polished

---

Workflow

0. Design System Selection

1. Discover systems: Glob("skills/design-system/systems/*/spec.md") from the repo root
2. Select:

• If $ARGUMENTS first token matches a discovered system name → use it; shift remaining args
• If exactly one system exists → default to it silently
• If multiple systems and no match → AskUserQuestion listing available systems

1. Load: Invoke Skill("orc:design-system", args="") to load the spec into context

1. Analysis & Planning Phase

• Design components using the loaded design system spec
• Reference shared components from the design system's component library
• Use agent-browser to take screenshots at key points
• /build to check the build

2. Build Phase

Spawn design-iterators in parallel for visual refinement for each issue found in phase 1:

Task(subagent_type="orc:design-iterator", args="5-10")
-> Implements one improvement per iteration
-> References loaded design system patterns
-> Stops when no clear improvements remain

3. Parallel Verification & Polish

After building, spawn two agents in parallel:

Spawn frontend-verifier for functional testing:

Task(subagent_type="orc:frontend-verifier")
-> Tests component rendering across viewports
-> Tests interactive states (hover, focus, click)
-> Checks color contrast and text readability
-> Validates layout alignment and spacing
-> Detects visual regressions
-> Fixes issues immediately

Agent-Browser (Direct quick checks)

Use /agent-browser skill for manual spot checks during build:

agent-browser open http://localhost:5173 --headed
agent-browser screenshot output.png
agent-browser snapshot -i
agent-browser click @ref
agent-browser set viewport 1920 1080

---

Design System Reference

The design system spec was loaded in Step 0. Refer to it for:

• Color palette (primary, secondary, accent colors)
• Typography classes (display, body, mono fonts)
• Border system (utilities, radii)
• Layout shell patterns (z-layering rules)
• Card patterns (standard card, panels, stat boxes)
• Shared components from the design system's component library
• CSS setup (entry point and imports)
• Shadows, responsive breakpoints, custom scrollbar

Usage: When unsure about tokens, patterns, or components, invoke:

/orc:design-system [token or pattern name]

---

Subgraph Data Pattern

> Note: The following data pattern applies to Octant V2 projects. For other design systems, adapt data fetching to the project's stack.

For data not covered by SDK methods, use direct Apollo queries:

// Context provides SubgraphService with Apollo client
const { subgraphService } = useOctantSDK();

// Direct query
const result = await subgraphService.client.query({
  query: YOUR_QUERY,
  variables: { ... },
});

Data hooks use React Query with 5-minute stale time. Pattern:

1. getVaults() — fetch dragon vault safes
2. getVaultStrategies() — get strategies per vault
3. getStrategyByStrategyAddress() — full strategy details
4. Deduplicate with Set across routers

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: qGolem
• Source: qGolem/orc
• License: MIT

Install and usage instructions live in the source repository linked above.