# Vibe Code

> Vibe-code with a loaded design system — browser-automated visual testing

- **Type:** Skill
- **Install:** `agentstack add skill-qgolem-orc-vibe-code`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [qGolem](https://agentstack.voostack.com/s/qgolem)
- **Installs:** 0
- **Category:** [Web & Browser](https://agentstack.voostack.com/c/web-and-browser)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [qGolem](https://github.com/qGolem)
- **Source:** https://github.com/qGolem/orc/tree/main/skills/vibe-code

## Install

```sh
agentstack add skill-qgolem-orc-vibe-code
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# 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
3. **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:

```bash
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:

```tsx
// 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](https://github.com/qGolem)
- **Source:** [qGolem/orc](https://github.com/qGolem/orc)
- **License:** MIT

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

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-qgolem-orc-vibe-code
- Seller: https://agentstack.voostack.com/s/qgolem
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.