Menu
Use the Optics design framework for styling applications. Apply Optics classes for layout, spacing, typography, colors, and components. Use when working on CSS, styling views, or implementing design system guidelines.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Generate multi-audience documentation from any codebase — workflows for non-technical readers, architecture for developers, and AI orientation for agents. Deterministic JS scripts handle structural extraction; the agent writes the prose. Project-agnostic and self-orienting. Use when the user asks to "document this project", runs `/document-this`, runs `/document-this <file-path>`, runs `/document-this --focus "<Feature Name>"` for a deep-dive on one subsystem in a named subfolder, or wants fresh documentation reflecting the current codebase state.
Test-driven development and testing patterns for Rails applications. Drives implementation from tests using an outside-in approach with RSpec, Capybara, and FactoryBot. Use when building new features, writing or improving tests, adding test coverage, fixing bugs with a test-first workflow, or when the user mentions TDD, test-driven, test-first, outside-in, spec plan, RSpec, Capybara, system specs, model specs, testing patterns, writing tests, or improving test coverage.
Pick the single highest-priority unresolved Sentry issue and hand it off to a fixer skill. Use when triaging Sentry errors, running automated issue triage, or when asked to fix the top Sentry issue in a project.
Find and fix issues from Sentry. Use when asked to fix Sentry errors, debug production issues, investigate exceptions, or resolve bugs reported in Sentry. Methodically analyzes stack traces, breadcrumbs, traces, and context to identify root causes.
Expose locally-running apps to stable public HTTPS URLs using a single per-developer Cloudflare Tunnel (cloudflared). Use whenever you need an external service to reach your local dev server — receiving webhooks (Box, Stripe, GitHub, Twilio, etc.), testing OAuth callbacks, sharing a work-in-progress with a teammate, or previewing on a real device. Also use when the user mentions cloudflared, "tunnel", "trycloudflare", "public URL for localhost", "webhook can't reach my machine", or asks how to route a domain to their local port.
Use this skill to guide a developer or designer through a BRAVE framework breakdown of a task before they start work. Trigger whenever someone wants to think through a ticket, break down a card, plan their approach before starting, validate a task before picking it up, or prepare a breakdown to share with a teammate or client. Also trigger for any of these phrases or close variations: "BRAVE this", "brave it", "break down this card", "think through this ticket", "help me plan this out before I start", "want to make sure I understand this before I start coding", "want to revalidate this card", "help me think through this before my standup/meeting", or "I'm about to pick up a card and want to break it down". If someone mentions starting work on a card and wants help planning, validating, or understanding it first — this skill should run.
| name | optics-context |
| description | Use the Optics design framework for styling applications. Apply Optics classes for layout, spacing, typography, colors, and components. Use when working on CSS, styling views, or implementing design system guidelines. |
| metadata | {"triggers":"slim, css, frontend, design-system, optics"} |
Apply the Optics design system for consistent, token-based styling in Rails applications.
assets/tokens.jsonSearch for components in this order:
skills/optics-context/assets/components.json
app/assets/stylesheets for existing classesAlways use CSS custom properties from assets/tokens.json:
var(--op-color-primary-base), var(--op-color-background)var(--op-space-small), var(--op-space-medium), var(--op-space-large)var(--op-font-medium), var(--op-line-height-base)var(--op-radius-small), var(--op-border-width)var(--op-shadow-small), var(--op-shadow-medium)Never use hard-coded values:
❌ Colors: #fff, #000, rgb(...), rgba(...), hsl(...), color names like white, black ❌ Spacing: Bare px, rem, em values in padding, margin, gap ❌ Shadows: box-shadow: 0 1px 3px rgba(...) ❌ Borders: border: 1px solid #ddd ❌ Gradients: linear-gradient(...) with literal colors
Common token mistakes:
❌ var(--op_color_primary_base) - Wrong separator (underscore instead of hyphen) ❌ var(--color-primary-base) - Missing --op- prefix ❌ var(--op-primary-color-base) - Wrong segment order
✅ var(--op-color-primary-base) - Correct format
Fix violations by replacing with tokens from assets/tokens.json
Block, Element, Modifier naming:
.block {
} /* Component base */
.block__element {
} /* Part of component */
.block--modifier {
} /* Variant of component */
.block__element--modifier {
} /* Variant of element */
Nest modifiers and elements:
.card {
/* Base styles */
&.card--padded {
/* Modifier */
}
.card__header {
/* Element */
}
}
File organization:
app/assets/stylesheets/components/{component-name}.cssapp/assets/stylesheets/components/overrides/{component-name}.cssapplication.scssComponent structure:
Example - Card component:
.card {
position: relative;
border-radius: var(--op-radius-medium);
background-color: var(--op-color-background);
box-shadow: var(--op-shadow-small);
/* Modifiers */
&.card--padded {
padding: var(--op-space-medium);
}
&.card--elevated {
box-shadow: var(--op-shadow-large);
}
/* Elements */
.card__header {
padding: var(--op-space-medium);
border-bottom: var(--op-border-width) solid var(--op-color-border);
border-start-start-radius: var(--op-radius-medium);
border-start-end-radius: var(--op-radius-medium);
}
.card__body {
padding: var(--op-space-medium);
}
.card__footer {
padding: var(--op-space-medium);
border-top: var(--op-border-width) solid var(--op-color-border);
border-end-start-radius: var(--op-radius-medium);
border-end-end-radius: var(--op-radius-medium);
}
}
Example - Button component:
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: var(--op-space-small) var(--op-space-medium);
font-size: var(--op-font-medium);
font-weight: var(--op-font-weight-medium);
border-radius: var(--op-radius-small);
border: var(--op-border-width) solid transparent;
cursor: pointer;
transition: all 0.2s ease;
&:hover {
opacity: 0.9;
}
&.btn--large {
padding: var(--op-space-medium) var(--op-space-large);
font-size: var(--op-font-large);
}
&.btn--small {
padding: var(--op-space-x-small) var(--op-space-small);
font-size: var(--op-font-small);
}
&.btn--disabled,
&:disabled {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
}
&.btn--primary {
background-color: var(--op-color-primary-base);
color: var(--op-color-primary-on-base);
&:hover {
background-color: var(--op-color-primary-plus-two);
color: var(--op-color-primary-on-plus-two);
}
}
&.btn--secondary {
background-color: var(--op-color-neutral-base);
color: var(--op-color-neutral-on-base);
&:hover {
background-color: var(--op-color-neutral-plus-two);
color: var(--op-color-neutral-on-plus-two);
}
}
&.btn--outline {
background-color: transparent;
border-color: var(--op-color-border);
color: var(--op-color-neutral-on-plus-max);
&:hover {
border-color: var(--op-color-primary-base);
}
}
First ensure there isn't an existing token that fits your need When tokens are missing, create component-specific ones:
Project-specific tokens (preferred for custom needs):
--{project-prefix}-{category}-{name}--ya-color-brand-accent for "Your App" projectToken categories:
--op-color-{name} or --{prefix}-color-{name}--op-space-{size} or --{prefix}-space-{size}--op-font-{property}-{value}--op-radius-{size}, --op-border-{property}--op-shadow-{size}Discovery workflow:
assets/components.json for existing componentapp/assets/stylesheets for project stylesToken workflow:
assets/tokens.json for appropriate tokenvar(--op-category-name)Component workflow:
components/ or components/overrides/application.scssSee assets/components.json for available Optics components and assets/tokens.json for all design tokens.