Krow/Krow-workspace
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #583 from Oloodi/575-establish-root-level-agent-skills-directory-claudeskills-for-ai-agent-extraction---for-mobile

Browse Source 
Add M4 video to the KROW launchpad
This commit is contained in:
Achintha Isuru
2026-03-08 11:30:08 -04:00
committed by GitHub
parent 82f180e0e4 1413cab7e9
commit 76cdeb4952
5 changed files with 440 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

413
.claude/skills/krow-paper-design/SKILL.md Normal file
View File

@@ -0,0 +1,413 @@
---
name: krow-paper-design
description: KROW Paper design file conventions covering design tokens, component patterns, screen structure, and naming rules. Use this when creating or updating screens in the Paper design tool, auditing designs for token compliance, building new flows, or restructuring existing frames. Ensures visual consistency across all Paper design files for the KROW staff and client apps.
---
# KROW Paper Design Conventions
This skill defines the design token system, component patterns, screen structure conventions, and workflow rules established for the KROW Design Revamp Paper file. All design work in Paper must follow these conventions.
## When to Use This Skill
- Creating new screens or flows in Paper
- Updating existing frames to match the design system
- Auditing designs for token compliance
- Adding components (buttons, chips, inputs, badges, cards)
- Structuring shift detail pages, onboarding flows, or list screens
- Setting up navigation patterns (back buttons, bottom nav, CTAs)
- Reviewing Paper designs before handoff to development
## 1. Design Tokens
### Color Palette
| Token | Hex | Usage |
|-------|-----|-------|
| Primary | `#0A39DF` | CTAs, active states, links, selected chips, nav active icons, pay rates |
| Foreground | `#121826` | Headings, primary text, dark UI elements |
| Text Secondary | `#6A7382` | Labels, captions, inactive nav, section headers, placeholder text, back chevrons |
| Secondary BG | `#F1F3F5` | Subtle backgrounds, dividers, map placeholders |
| Border | `#D1D5DB` | Card borders, unselected chip borders, outline button borders |
| Input Border | `#E2E8F0` | Text input borders (lighter than general border) |
| Destructive | `#F04444` | Error states, destructive actions (e.g., Request Swap) |
| Background | `#FAFBFC` | Page/artboard background |
| Card BG | `#FFFFFF` | Card surfaces, input backgrounds |
| Success | `#059669` | Active status dot, checkmark icons, requirement met |
| Warning Amber | `#D97706` | Urgent/Pending badge text |
### Semantic Badge Colors
| Badge | Background | Text Color |
|-------|-----------|------------|
| Active | `#ECFDF5` | `#059669` |
| Confirmed | `#EBF0FF` | `#0A39DF` |
| Pending | `#FEF9EE` | `#D97706` |
| Urgent | `#FEF9EE` | `#D97706` |
| One-Time | `#ECFDF5` | `#059669` |
| Recurring | `#EBF0FF` | `#0A39DF` (use `#EFF6FF` bg on detail pages) |
### Typography
| Style | Font | Size | Weight | Line Height | Usage |
|-------|------|------|--------|-------------|-------|
| Display | Inter Tight | 28px | 700 | 34px | Page titles (Find Shifts, My Shifts) |
| H1 | Inter Tight | 24px | 700 | 30px | Detail page titles (venue names) |
| H2 | Inter Tight | 20px | 700 | 26px | Section headings |
| H3 | Inter Tight | 18px | 700 | 22px | Card titles, schedule values |
| Body Large | Manrope | 16px | 600 | 20px | Button text, CTA labels |
| Body Default | Manrope | 14px | 400-500 | 18px | Body text, descriptions |
| Body Small | Manrope | 13px | 400-500 | 16px | Card metadata, time/pay info |
| Caption | Manrope | 12px | 500-600 | 16px | Small chip text, tab labels |
| Section Label | Manrope | 11px | 700 | 14px | Uppercase section headers (letter-spacing: 0.06em) |
| Badge Text | Manrope | 11px | 600-700 | 14px | Status badge labels (letter-spacing: 0.04em) |
| Nav Label | Manrope | 10px | 600 | 12px | Bottom nav labels |
### Spacing
| Token | Value | Usage |
|-------|-------|-------|
| Page padding | 24px | Horizontal padding from screen edge |
| Section gap | 16-24px | Between major content sections |
| Group gap | 8-12px | Within a section (e.g., label to input) |
| Element gap | 4px | Tight spacing (e.g., subtitle under title) |
| Bottom safe area | 40px | Padding below last element / CTA |
### Border Radii
| Token | Value | Usage |
|-------|-------|-------|
| sm | 8px | Small chips, badges, status pills, map placeholder |
| md | 12px | Cards, inputs, location cards, contact cards, search fields |
| lg | 14px | Buttons, CTA containers, shift cards (Find Shifts) |
| xl | 24px | Not commonly used |
| pill | 999px | Progress bar segments only |
## 2. Component Patterns
### Buttons
**Primary CTA:**
- Background: `#0A39DF`, radius: 14px, height: 52px
- Text: Manrope 16px/600, color: `#FFFFFF`
- Padding: 16px vertical, 16px horizontal
**Secondary/Outline Button:**
- Background: `#FFFFFF`, border: 1.5px `#D1D5DB`, radius: 14px, height: 52px
- Text: Manrope 16px/600, color: `#121826`
**Destructive Outline Button:**
- Background: `#FFFFFF`, border: 1.5px `#F04444`, radius: 14px
- Text: Manrope 14px/600, color: `#F04444`
**Back Icon Button (Bottom CTA):**
- 52x52px square, border: 1.5px `#D1D5DB`, radius: 14px, background: `#FFFFFF`
- Contains chevron-left SVG (20x20, viewBox 0 0 24 24, stroke `#121826`, strokeWidth 2)
- Path: `M15 18L9 12L15 6`
### Chips
**Default (Large) - for role/skill selection:**
- Selected: bg `#EFF6FF`, border 1.5px `#0A39DF`, radius 10px, padding 12px/16px
- Checkmark icon (14x14, stroke `#0A39DF`), text Manrope 14px/600 `#0A39DF`
- Unselected: bg `#FFFFFF`, border 1.5px `#6A7382`, radius 10px, padding 12px/16px
- Text Manrope 14px/500 `#6A7382`
**Small - for tabs, filters:**
- Selected: bg `#EFF6FF`, border 1.5px `#0A39DF`, radius 8px, padding 6px/12px
- Checkmark icon (12x12), text Manrope 12px/600 `#0A39DF`
- Unselected: bg `#FFFFFF`, border 1.5px `#D1D5DB`, radius 8px, padding 6px/12px
- Text Manrope 12px/500 `#6A7382`
- Active (filled): bg `#0A39DF`, radius 8px, padding 6px/12px
- Text Manrope 12px/600 `#FFFFFF`
- Dark (filters button): bg `#121826`, radius 8px, padding 6px/12px
- Text Manrope 12px/600 `#FFFFFF`, with leading icon
**Status Badges:**
- Radius: 8px, padding: 4px/8px
- Text: Manrope 11px/600-700, uppercase, letter-spacing 0.04em
- Colors follow semantic badge table above
### Text Inputs
- Border: 1.5px `#E2E8F0`, radius: 12px, padding: 12px/14px
- Background: `#FFFFFF`
- Placeholder: Manrope 14px/400, color `#6A7382`
- Filled: Manrope 14px/500, color `#121826`
- Label above: Manrope 14px/500, color `#121826`
- Focused: border color `#0A39DF`, border-width 2px
- Error: border color `#F04444`, helper text `#F04444`
### Cards (Shift List Items)
- Background: `#FFFFFF`, border: 1px `#D1D5DB`, radius: 12-14px
- Padding: 16px
- Content: venue name (Manrope 15px/600 `#121826`), subtitle (Manrope 13px/400 `#6A7382`)
- Metadata row: icon (14px, `#6A7382`) + text (Manrope 13px/500 `#6A7382`)
- Pay rate: Inter Tight 18px/700 `#0A39DF`
### Schedule/Pay Info Cards
- Two-column layout with 12px gap
- Background: `#FFFFFF`, border: 1px `#D1D5DB`, radius: 12px, padding: 16px
- Label: Manrope 11px/500-700 uppercase `#6A7382` (letter-spacing 0.05em)
- Value: Inter Tight 18px/700 `#121826` (schedule) or `#121826` (pay)
- Sub-text: Manrope 13px/400 `#6A7382`
### Contact/Info Rows
- Container: radius 12px, border 1px `#D1D5DB`, background `#FFFFFF`, overflow clip
- Row: padding 13px/16px, gap 10px, border-bottom 1px `#F1F3F5` (except last)
- Icon: 16px, stroke `#6A7382`
- Label: Manrope 13px/500 `#6A7382`, width 72px fixed
- Value: Manrope 13px/500 `#121826` (or `#0A39DF` for phone/links)
### Section Headers
- Text: Manrope 11px/700, uppercase, letter-spacing 0.06em, color `#6A7382`
- Gap to content below: 10px
## 3. Screen Structure
### Artboard Setup
- Width: 390px (iPhone standard)
- Height: 844px (default), or `fit-content` for scrollable detail pages
- Background: `#FAFBFC`
- Flex column layout, overflow: clip
### Frame Naming Convention
```
<app>-<section>-<screen_number>-<screen_name>
```
Examples:
- `staff-1-1-splash`
- `staff-2-3-personal-information`
- `staff-4-1-my-shifts`
- `staff-5-2-shift-details`
- `shift-5-3-confirmation`
Section headers use: `<number> - <Section Name>` (e.g., `4 - My Shifts`)
### Status Bar
- Height: 44px, full width (390px)
- Left: "9:41" text (system font)
- Right: Signal, WiFi, Battery SVG icons (68px wide)
### Header Back Button
- Placed below status bar in a combined "Status Bar + Back" frame (390x72px)
- Chevron SVG: 20x20, viewBox 0 0 24 24, stroke `#6A7382`, strokeWidth 2
- Path: `M15 18L9 12L15 6`
- Back button frame: 390x28px, padding-left: 24px
### Progress Bar (Onboarding)
- Container: 342px wide (24px margins), 3px height segments
- Segments: pill radius (999px), gap between
- Filled: `#0A39DF`, Unfilled: `#F1F3F5`
### Bottom CTA Convention
- Pinned to bottom using `marginTop: auto` on the CTA container
- Layout: flex row, gap 12px, padding 0 24px
- Back button: 52x52px icon-only button with chevron-left (stroke `#121826`)
- Primary CTA: flex 1, height 52px, radius 14px, bg `#0A39DF`
- Bottom safe padding: 40px (on artboard paddingBottom)
### Bottom Navigation Bar
- Full width, padding: 10px top, 28px bottom
- Border-top: 1px `#F1F3F5`, background: `#FFFFFF`
- 5 items: Home, Shifts, Find, Payments, Profile
- Active: icon stroke `#0A39DF`, label Manrope 10px/600 `#0A39DF`
- Inactive: icon stroke `#6A7382`, label Manrope 10px/600 `#6A7382`
- Active icon may have light fill (e.g., `#EBF0FF` on calendar/search)
## 4. Screen Templates
### List Screen (My Shifts, Find Shifts)
```
Artboard (390x844, bg #FAFBFC)
Status Bar (390x44)
Header Section
Page Title (Display: Inter Tight 28px/700)
Tab/Filter Chips (Small chip variant)
Content
Date Header (Section label style, uppercase)
Shift Cards (12px radius, 1px border #D1D5DB)
Bottom Nav Bar
```
### Detail Screen (Shift Details)
```
Artboard (390x fit-content, bg #FAFBFC)
Status Bar (390x44)
Header Bar (Back chevron + "Shift Details" title + share icon)
Badges Row (status chips)
Role Title (H1) + Venue (with avatar)
Schedule/Pay Cards (two-column)
Job Description (section label + body text)
Location (card with map + address)
Requirements (section label + checkmark list)
Shift Contact (section label + contact card with rows)
[Optional] Note from Manager (warm bg card)
Bottom CTA (pinned)
```
### Onboarding Screen
```
Artboard (390x844, bg #FAFBFC, justify: flex-start, paddingBottom: 40px)
Status Bar + Back (390x72)
Progress Bar (342px, 3px segments)
Step Counter ("Step X of Y" - Body Small)
Page Title (H1: Inter Tight 24px/700)
[Optional] Subtitle (Body Default)
Form Content (inputs, chips, sliders)
Bottom CTA (marginTop: auto - back icon + Continue)
```
### Confirmation Screen
```
Artboard (390x844, bg #FAFBFC)
Status Bar
Centered Content
Success Icon (green circle + checkmark)
Title (Display: Inter Tight 26px/700, centered)
Subtitle (Body Default, centered, #6A7382)
Details Card (border #D1D5DB, rows with label/value pairs)
Bottom CTAs (primary + outline)
```
## 5. Workflow Rules
### Write Incrementally
Each `write_html` call should produce ONE visual group:
- A header, a card, a single list row, a button bar, a section
- Never batch an entire screen in one call
### Review Checkpoints
After every 2-3 modifications, take a screenshot and evaluate:
- **Spacing**: Uneven gaps, cramped groups
- **Typography**: Hierarchy, readability, correct font/weight
- **Contrast**: Text legibility, element distinction
- **Alignment**: Vertical lanes, horizontal alignment
- **Clipping**: Content cut off at edges
- **Token compliance**: All values match design system tokens
### Color Audit Process
When updating frames to match the design system:
1. Get computed styles for all text, background, border elements
2. Map old colors to design system tokens:
- Dark navy (`#0F4C81`, `#1A3A5C`) -> Primary `#0A39DF`
- Near-black (`#111827`, `#0F172A`) -> Foreground `#121826`
- Gray variants (`#94A3B8`, `#64748B`, `#475569`) -> Text Secondary `#6A7382`
- Green accents (`#20B486`) -> Primary `#0A39DF` (for pay) or `#059669` (for status)
3. Batch update using `update_styles` with multiple nodeIds per style change
4. Verify with screenshots
### Structural Consistency
When creating matching screens (e.g., two shift detail views):
- Use identical section ordering
- Match section header styles (11px/700 uppercase `#6A7382`)
- Use same card/row component patterns
- Maintain consistent padding and gap values
## 6. SVG Icon Patterns
### Chevron Left (Back)
```html
<svg width="20" height="20" viewBox="0 0 24 24" fill="none">
<path d="M15 18L9 12L15 6" stroke="#6A7382" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
```
### Map Pin
```html
<svg width="18" height="18" viewBox="0 0 24 24" fill="none">
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" stroke="#6A7382" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="12" cy="10" r="3" stroke="#6A7382" stroke-width="2"/>
</svg>
```
### User (Supervisor)
```html
<svg width="16" height="16" viewBox="0 0 24 24" fill="none">
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" stroke="#6A7382" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="12" cy="7" r="4" stroke="#6A7382" stroke-width="2"/>
</svg>
```
### Phone
```html
<svg width="16" height="16" viewBox="0 0 24 24" fill="none">
<path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z" stroke="#6A7382" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
```
### Checkmark (Requirement Met)
```html
<svg width="16" height="16" viewBox="0 0 24 24" fill="none">
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" stroke="#059669" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M22 4L12 14.01l-3-3" stroke="#059669" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
```
### Chip Checkmark
```html
<!-- Large chip (14x14) -->
<svg width="14" height="14" viewBox="0 0 14 14" fill="none">
<path d="M2.5 7L5.5 10L11.5 4" stroke="#0A39DF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<!-- Small chip (12x12) -->
<svg width="12" height="12" viewBox="0 0 14 14" fill="none">
<path d="M2.5 7L5.5 10L11.5 4" stroke="#0A39DF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
```
## 7. Anti-Patterns
### Colors
- Never use `#0F4C81`, `#1A3A5C` (old navy) - use `#0A39DF` (Primary)
- Never use `#111827`, `#0F172A` - use `#121826` (Foreground)
- Never use `#94A3B8`, `#64748B`, `#475569` - use `#6A7382` (Text Secondary)
- Never use `#20B486` for pay rates - use `#0A39DF` (Primary)
- Never use `#E2E8F0` for card borders - use `#D1D5DB` (Border)
### Components
- Never use pill radius (999px) for chips or badges - use 8px or 10px
- Never use gradient backgrounds on buttons
- Never mix font families within a role (headings = Inter Tight, body = Manrope)
- Never place back buttons at the bottom of frames - always after status bar
- Never hardcode CTA position - use `marginTop: auto` for bottom pinning
### Structure
- Never batch an entire screen in one `write_html` call
- Never skip review checkpoints after 2-3 modifications
- Never create frames without following the naming convention
- Never use `justifyContent: space-between` on artboards with many direct children - use `marginTop: auto` on the CTA instead
## Summary
**The design file is the source of truth for visual direction.** Every element must use the established tokens:
1. **Colors**: 7 core tokens + semantic badge colors
2. **Typography**: Inter Tight (headings) + Manrope (body), defined scale
3. **Spacing**: 24px page padding, 16-24px section gaps, 40px bottom safe area
4. **Radii**: 8px (chips/badges), 12px (cards/inputs), 14px (buttons/CTAs)
5. **Components**: Buttons, chips (large/small), inputs, cards, badges, nav bars
6. **Structure**: Status bar > Back > Content > Bottom CTA (pinned)
7. **Naming**: `<app>-<section>-<number>-<name>`
When in doubt, screenshot an existing screen and match its patterns exactly.

23
CLAUDE.md
View File

@@ -135,27 +135,12 @@ lib/src/
## Skills & Sub-Agents ## Skills & Sub-Agents
The project has 4 specialized skills in `.claude/skills/` that provide deep domain knowledge. **Invoke them when working in their domains** — they contain detailed rules, patterns, and code examples beyond what's in this file. #### Skills
- The project has 4 specialized skills in `.claude/skills/` that provide deep domain knowledge. Invoke them and other global skills that you have when working in their domains.
### krow-mobile-architecture #### Sub-Agents
**When to use:** Architecting new mobile features, debugging state management or BLoC lifecycle issues, preventing prop drilling, managing session state, implementing Data Connect connector repositories, setting up feature modules and DI, refactoring to Clean Architecture. - The project has 4 sub-agents in `.claude/sub-agents/` that can be invoked for specific tasks. Invoke them and other global sub-agents that you have when working in their domains.
**What it covers:** Full Clean Architecture implementation, package dependency graph, Data Connect service & session management (SessionHandlerMixin, SessionListener), connector pattern for reusable backend queries, BLoC lifecycle safety (singleton registration, BlocProvider.value(), BlocErrorHandler mixin with _safeEmit()), feature isolation rules, typed navigation with safe extensions, session store pattern.
### krow-mobile-development-rules
**When to use:** Creating new mobile features/packages, implementing BLoCs/Use Cases/Repositories, integrating with Firebase Data Connect, migrating from prototypes, reviewing code compliance, setting up navigation flows.
**What it covers:** Non-negotiable enforcement rules — file creation & package structure with exact path conventions, naming conventions, zero-tolerance logic placement boundaries (business rules → Use Cases only, state → BLoCs only, data transformation → Repositories), localization integration (all strings via core_localization, BLoCs emit failures not strings), Data Connect repository pattern with `_service.run()`, prototype migration rules, error handling pattern (domain failures → ErrorTranslator), enforcement checklist.
### krow-mobile-design-system
**When to use:** Implementing any UI in mobile features, migrating POC/prototype designs to production, creating themed widgets, reviewing UI code for design system compliance, matching colors/typography from designs, adding icons/spacing/layout.
**What it covers:** Immutable design token rules — all colors from `UiColors` (zero hex codes), all typography from `UiTypography` (zero custom TextStyle), all spacing/radius/elevation from `UiConstants` (zero magic numbers), all icons from `UiIcons` (zero direct library imports). POC → Production workflow (structure → architecture → design system integration), color/typography matching tables, extension policy for adding new tokens, review checklist.
### krow-mobile-release
**When to use:** Preparing mobile releases, updating CHANGELOGs, triggering GitHub Actions release workflows, creating hotfix branches, understanding versioning strategy, setting up APK signing, troubleshooting release failures.
**What it covers:** Versioning strategy (`v{major}.{minor}.{patch}-{milestone}`), CHANGELOG management (Keep a Changelog format, writing guidelines), Git tagging (`krow-withus-<app>-mobile/<env>-vX.Y.Z`), GitHub Actions workflows (Product Release, Product Hotfix), APK signing setup (24 GitHub Secrets), step-by-step release process for dev/stage/prod, hotfix procedures, release cadence, troubleshooting guide, helper scripts.
## CI/CD ## CI/CD

17
internal/launchpad/assets/data/links.json
View File

@@ -1,4 +1,21 @@
[ [
{
"title": "Demonstrations",
"iconColorClass": "bg-cyan-100",
"iconPath": "assets/images/icon-video.svg",
"links": [
{
"title": "KROW Platform - M4 Demonstration",
"url": "https://www.youtube.com/embed/hD-Ngt5xfSc",
"badge": "Demo",
"badgeColorClass": "bg-cyan-500",
"containerClass": "bg-gradient-to-r from-cyan-50 to-blue-100 hover:from-cyan-100 hover:to-blue-200",
"iconClass": "w-2 h-2 bg-cyan-500 rounded-full",
"textHoverClass": "group-hover:text-cyan-700",
"isVideo": true
}
]
},
{ {
"title": "Applications", "title": "Applications",
"iconColorClass": "bg-primary-100", "iconColorClass": "bg-primary-100",

3
internal/launchpad/assets/images/icon-video.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.7646 4C15.6067 4 17.117 5.48602 17.1172 7.33301V8.41309L17.2607 8.2998L19.9629 6.15625C20.2986 5.88843 20.7104 5.75 21.1289 5.75L21.3184 5.75977C22.2568 5.85417 23 6.64122 23 7.61426V16.3857C23 17.4234 22.1548 18.2499 21.1289 18.25C20.7102 18.25 20.2987 18.1108 19.9629 17.8428V17.8438L17.2607 15.7002L17.1172 15.5859V16.667C17.117 18.514 15.6067 20 13.7646 20H4.35254C2.51066 19.9998 1.00018 18.5138 1 16.667V7.33301C1.00018 5.48616 2.51066 4.00022 4.35254 4H13.7646Z" stroke="#3949AB" stroke-width="2"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 622 B

5
internal/launchpad/assets/js/links-loader.js
View File

@@ -48,8 +48,9 @@ async function loadLinks() {
<div class="space-y-3"> <div class="space-y-3">
${group.links.map(link => { ${group.links.map(link => {
const isPrototype = link.url.startsWith('/prototypes/'); const isPrototype = link.url.startsWith('/prototypes/');
const hrefAttr = isPrototype ? 'href="#"' : `href="${link.url}" target="_blank"`; const isVideo = link.isVideo === true;
const onclickAttr = isPrototype ? `onclick="event.preventDefault(); showView('iframe', this, '${link.url}', '${link.title}')"` : ''; const hrefAttr = (isPrototype || isVideo) ? 'href="#"' : `href="${link.url}" target="_blank"`;
const onclickAttr = (isPrototype || isVideo) ? `onclick="event.preventDefault(); showView('iframe', this, '${link.url}', '${link.title}')"` : '';
return ` return `
<a ${hrefAttr} ${onclickAttr} <a ${hrefAttr} ${onclickAttr}