### Install Superloopy Plugin

Source: https://github.com/beefiker/superloopy/blob/main/docs/superloopy-claude-validation.md

Commands to add and install the Superloopy plugin from the marketplace. Ensure Node.js version 20 or higher is present.

```bash
/plugin marketplace add beefiker/superloopy
/plugin install superloopy@beefiker
```

--------------------------------

### Video Card Prompt Example

Source: https://github.com/beefiker/superloopy/blob/main/skills/superloopy-frontend/references/design/loom.md

An example prompt for styling a video card, including background, radius, shadow, thumbnail, and title properties.

```prompt
Video card: white bg, 16px radius, shadow 0 2px 12px rgba(26,26,46,0.08), 16:9 thumbnail with play overlay, title 20px/600 in #1a1a2e, hover 0 8px 28px rgba(26,26,46,0.12).
```

--------------------------------

### Ollama Example Prompt: Integration Grid

Source: https://github.com/beefiker/superloopy/blob/main/skills/superloopy-frontend/references/design/ollama.md

An example prompt for an integration grid layout, specifying card styling, columns, and content.

```markdown
Integration grid: 4 columns of 12px-radius cards, 1px solid #e5e5e5, icon + name, pure white surface.
```

--------------------------------

### Secondary Button Prompt Example

Source: https://github.com/beefiker/superloopy/blob/main/skills/superloopy-frontend/references/design/railway.md

An example prompt for styling a secondary button, detailing its background, text color, radius, and border properties.

```prompt
Secondary button: bg #1c1929, text #f5f5f7, 8px radius, border 1px solid rgba(255,255,255,0.12), hover border rgba(255,255,255,0.2).
```

--------------------------------

### Recording Bubble Prompt Example

Source: https://github.com/beefiker/superloopy/blob/main/skills/superloopy-frontend/references/design/loom.md

An example prompt for creating the recording bubble, detailing its size, gradient ring, record dot color, and glow effect.

```prompt
Recording bubble: 96px perfect circle, gradient ring linear-gradient(120deg,#fa5d5d,#625df5), coral record-dot #fa5d5d, soft glow 0 8px 28px rgba(98,93,245,0.25).
```

--------------------------------

### Code Block Prompt Example

Source: https://github.com/beefiker/superloopy/blob/main/skills/superloopy-frontend/references/design/resend.md

Example prompt for styling a code block, specifying font, size, line-height, background, border, and syntax highlighting colors.

```text
Code block: Commit Mono 16px on black, frost-border container 24px radius, syntax in #ff801f/#3b9eff/#11ff99.
```

--------------------------------

### Hero Section Prompt Example

Source: https://github.com/beefiker/superloopy/blob/main/skills/superloopy-frontend/references/design/railway.md

An example prompt for creating a hero section, specifying background, gradient glow, headline typography, and CTA button styling.

```prompt
Hero on #13111c with a blurred radial gradient glow (#8a3ffc ~18% opacity) behind the headline. H1 64px Inter weight 600, line-height 1.05, letter-spacing -1.5px, color #f5f5f7. Gradient pill CTA linear-gradient(90deg,#c049ff,#8a3ffc), white text, 8px radius, 10px 20px.
```

--------------------------------

### Hero Section Prompt Example

Source: https://github.com/beefiker/superloopy/blob/main/skills/superloopy-frontend/references/design/loom.md

An example prompt for generating a hero section, specifying background wash, typography, and CTA button styles.

```prompt
Hero on #ffffff with faint coral→violet wash: H1 Inter 44px / weight 700 / 1.12 / -0.75px in #1a1a2e; subhead 18px/400/1.55 in #6f6f8d; violet CTA #625df5, white text 600, 10px radius, 12px 20px padding, hover #4f4ad6.
```

--------------------------------

### Install Superloopy Agents

Source: https://github.com/beefiker/superloopy/blob/main/README.md

Installs or re-copies the optional subagents if needed. This command is typically not required as agents are bundled with the plugin.

```bash
superloopy agents install
```

--------------------------------

### Feature Card Prompt Example

Source: https://github.com/beefiker/superloopy/blob/main/skills/superloopy-frontend/references/design/resend.md

Example prompt for creating a feature card with a transparent background, frost border, specific typography for title and body, and defined spacing.

```text
Feature card: transparent bg, NO gray border — use 1px solid rgba(214,235,253,0.19), 16px radius. Title 56px ABC Favorit 400 letter-spacing -2.8px; body 16px Inter 400 in #a1a4a5.
```

--------------------------------

### Example Prompt: Card Component

Source: https://github.com/beefiker/superloopy/blob/main/skills/superloopy-frontend/references/design/notion.md

A prompt detailing the styling for a card component, including borders, radius, shadows, and title typography.

```css
/* "Card: #ffffff, 1px solid rgba(0,0,0,0.1), 12px radius, shadow 0 4px 18px rgba(0,0,0,.04), 0 2px 7.8px rgba(0,0,0,.027), 0 .8px 2.9px rgba(0,0,0,.02), 0 .175px 1px rgba(0,0,0,.01)`. Title 22px/700/-0.25px. */
```

--------------------------------

### Starbucks Example Component Prompt: Content Card

Source: https://github.com/beefiker/superloopy/blob/main/skills/superloopy-frontend/references/design/starbucks.md

A prompt for styling a content card on a cream background with specific typography and shadow.

```text
Content card on cream #f2f0eb: white surface, radius 12px, shadow 0 0 .5px rgba(0,0,0,.14), 0 1px 1px rgba(0,0,0,.24); H1 24px/600 #006241, body 16px/400/1.50 in rgba(0,0,0,.58).
```

--------------------------------

### Ollama Example Prompt: Hero Section

Source: https://github.com/beefiker/superloopy/blob/main/skills/superloopy-frontend/references/design/ollama.md

An example prompt describing the layout and styling for a hero section, including illustration, headline, and CTA buttons.

```markdown
Hero on #ffffff: black-line illustration centered above a headline SF Pro Rounded 48px weight 500 line-height 1.0 in #000; a black pill CTA (#000 bg, #fff text, 9999px, 10px 24px) beside a gray pill (#e5e5e5 bg, #262626 text).
```

--------------------------------

### Hero Section Prompt Example

Source: https://github.com/beefiker/superloopy/blob/main/skills/superloopy-frontend/references/design/resend.md

Example prompt for generating a hero section with specific typography, colors, and button styles adhering to the Resend design principles.

```text
Hero on #000000: headline 96px Domaine Display weight 400, line-height 1.00, letter-spacing -0.96px, color #f0f0f0, OpenType 'ss01' 'ss04' 'ss11'. Subtitle 20px ABC Favorit 400/1.30. Two pills: solid white (#ffffff/#000000) and transparent with frost border rgba(214,235,253,0.19), both 9999px radius.
```

--------------------------------

### Example Prompt: Hero Section

Source: https://github.com/beefiker/superloopy/blob/main/skills/superloopy-frontend/references/design/notion.md

A prompt for generating a hero section with specific typography, colors, and CTA styling.

```css
/* "Hero on #ffffff: headline 64px Inter weight 700, line-height 1.00, letter-spacing -2.125px, color rgba(0,0,0,0.95). Subtitle 20px/600/1.40 in #615d59. Blue CTA #0075de, 4px radius, 8px 16px padding, white text, hover #005bab." */
```

--------------------------------

### SpaceX Content Scene Example Prompt

Source: https://github.com/beefiker/superloopy/blob/main/skills/superloopy-frontend/references/design/spacex.md

An example prompt for generating a content scene. It specifies a 100vh photo with a dark overlay, a left-aligned text block including a heading, body text, and a ghost button with specific styling for its radius and padding.

```text
Content scene: 100vh photo with `rgba(0,0,0,0.5)` overlay, left-aligned block — 48px D-DIN-Bold uppercase heading, 16px D-DIN body, ghost button below; no card, no shadow.
```

--------------------------------

### Groq Prompt: Secondary Button on Dark

Source: https://github.com/beefiker/superloopy/blob/main/skills/superloopy-frontend/references/design/groq.md

Example prompt for styling a secondary button on a dark background, including hover states.

```text
Secondary button on dark: transparent, 1px `rgba(255,255,255,0.1)`, `#fafafa` text, 4px radius, fast 120ms hover to coral border.
```

--------------------------------

### Solid CTA Component Example

Source: https://github.com/beefiker/superloopy/blob/main/skills/superloopy-frontend/references/design/resend.md

Defines the styles for a solid, high-contrast call-to-action button with a white background and black text, suitable for key actions like 'Get started'.

```css
/* Solid CTA (high contrast) */
background: #ffffff;
color: #000000;
border-radius: 9999px;
padding: 5px 12px;
```

--------------------------------

### Netlify Deploy Console Example

Source: https://github.com/beefiker/superloopy/blob/main/skills/superloopy-frontend/references/design/netlify.md

A prompt for styling the Netlify deploy console, detailing log text appearance, status pill design, and section title formatting against a dark background.

```prompt
Deploy console on #13262f: log text 14px Roboto Mono #9fb3bf; a status pill #00ad9f 'Published' with leading dot and teal glow 0 0 32px rgba(0,199,183,0.35); section title 12px/600 uppercase #7e96a1 +0.3px tracking.
```

--------------------------------

### Update Superloopy Plugin via Claude Code Marketplace

Source: https://github.com/beefiker/superloopy/blob/main/README.md

For Superloopy installations via Claude Code, refresh the marketplace, then reinstall the plugin to get the new version. Finally, reload plugins to apply the update without restarting Claude Code.

```bash
/plugin marketplace update beefiker
/plugin install superloopy@beefiker
/reload-plugins
```

--------------------------------

### Local Preview with serve or Python HTTP server

Source: https://github.com/beefiker/superloopy/blob/main/web/README.md

Serve the 'web' directory locally for preview. You can use 'npx serve' or Python's built-in HTTP server.

```bash
npx serve web      # or: python3 -m http.server -d web 8080
```

--------------------------------

### Installation Box Styling

Source: https://github.com/beefiker/superloopy/blob/main/web/index.html

CSS for an installation box, including its header and the main content area.

```css
.installbox{border:1px solid var(--line);border-radius:20px;background:rgba(10,7,30,.6);overflow:hidden;max-width:760px}
.installbox .hd{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--line)}
.installbox .hd span{color:var(--muted);font-size:13px}
.copy{cursor:pointer;border:1px solid
```

--------------------------------

### Superloopy Doctor - Checkout Install Command

Source: https://github.com/beefiker/superloopy/blob/main/skills/superloopy-doctor/SKILL.md

Use this command to install dependencies for the checkout process.

```bash
node src/cli.js install --json
```

--------------------------------

### Zapier Example Prompt: Tab Navigation Component

Source: https://github.com/beefiker/superloopy/blob/main/skills/superloopy-frontend/references/design/zapier.md

A prompt for styling tab navigation, including font, size, color, padding, and the specific inset box-shadows for active and hover states. This ensures consistency with the defined tab component styles.

```text
- "Tab nav: Inter 16/500 `#201515`, 12px 16px padding, active `box-shadow: rgb(255,79,0) 0 -4px 0 0 inset`, hover `rgb(197,192,177) 0 -4px 0 0 inset`."
```

--------------------------------

### Install Codex CLI Plugins

Source: https://github.com/beefiker/superloopy/blob/main/web/index.html

Add the Superloopy plugin to your Codex CLI. Restart Codex after installation.

```bash
$ codex plugin marketplace add https://github.com/beefiker/superloopy
$ codex plugin add superloopy@beefiker
```

--------------------------------

### Install Superloopy on Codex

Source: https://github.com/beefiker/superloopy/blob/main/README.md

Use these commands to add the Superloopy plugin to your Codex environment. Ensure Node.js and Codex CLI are installed.

```bash
codex plugin marketplace add https://github.com/beefiker/superloopy
codex plugin add superloopy@beefiker
```

--------------------------------

### Code Preview Panel Component Example

Source: https://github.com/beefiker/superloopy/blob/main/skills/superloopy-frontend/references/design/resend.md

Styles for a code preview panel, featuring a dark background, specific font, frost-border container with large radius, and syntax highlighting using accent colors.

```css
/* Code preview panel */
background: #000000;
font-family: "Commit Mono", ui-monospace, monospace;
font-size: 16px;
line-height: 1.50;
container-radius: 24px;
border: 1px solid rgba(214,235,253,0.19);
/* Syntax tokens from accent set: #ff801f, #3b9eff, #11ff99, #ffc53d */
```

--------------------------------

### Service Card Prompt Example

Source: https://github.com/beefiker/superloopy/blob/main/skills/superloopy-frontend/references/design/railway.md

An example prompt for styling a service card, including background, border, padding, and typography for its elements.

```prompt
Service card: bg #1c1929, 1px solid rgba(255,255,255,0.08), 12px radius, 20px padding. Title 22px Inter 600 / -0.3px; body 16px 400 in #9b96ab; GeistMono 13px uppercase status label +0.4px.
```

--------------------------------

### Netlify Hero Section Example

Source: https://github.com/beefiker/superloopy/blob/main/skills/superloopy-frontend/references/design/netlify.md

Provides a prompt for generating a Netlify hero section, specifying typography, colors, CTA button styles, and a teal-cyan gradient accent.

```prompt
Hero on #ffffff: H1 64px Pacaembu weight 800, line-height 1.05, letter-spacing -1.5px, #14323b; subhead 20px/400 #5c7480. Primary CTA bg #00ad9f white text, 8px radius, 10px 20px, hover #00897f; secondary 1px solid #cbd6db. A teal→cyan gradient linear-gradient(135deg,#00ad9f,#00c7b7) accent rule under the headline.
```

--------------------------------

### Renault Example Component Prompt: PromoCard

Source: https://github.com/beefiker/superloopy/blob/main/skills/superloopy-frontend/references/design/renault.md

A prompt for generating a PromoCard with a full-bleed photo, overlay gradient, heading, button, and padding, adhering to Renault's design specifications.

```markdown
- "PromoCard: full-bleed photo, top overlay `linear-gradient(rgba(0,0,0,0.6), transparent 40%)`, NouvelR 40px/700/0.95 white heading, one inverted white-bg 0px-radius button, 10px 15px padding."
```

--------------------------------

### Update Superloopy from Checkout

Source: https://github.com/beefiker/superloopy/blob/main/README.md

If you installed Superloopy from a source checkout, use these commands to update your local repository and then rerun the installer. This ensures you have the latest code changes.

```bash
git pull --ff-only
node src/cli.js install --json
superloopy doctor
```