Menu
Using Optics for implementing design system guidelines, theming, and color scales.
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 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.
| name | theming-context |
| description | Using Optics for implementing design system guidelines, theming, and color scales. |
| metadata | {"triggers":"theme, design-system, optics"} |
To customize the application, a custom theme files that serve as overrides to the existing tokens can be provided. An example implementation of the main project CSS file would look like:
@import '@rolemodel/optics';
@import 'stylesheets/theme/my_app_theme';
Note how the custom theme is imported after the main Optics styles, ensuring that any token overrides take precedence.
A custom theme can change any tokens, including colors, radius, fonts, and even redefine the luminosity and semantic scales.
@import url('https://fonts.googleapis.com/css2?family=Coming+Soon&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Grandstander:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
:root {
/* Colors */
--op-color-primary-h: my-new-value;
--op-color-primary-s: my-new-value;
--op-color-primary-l: my-new-value;
/* Color Scale */
--op-color-primary-plus-two: light-dark(
hsl(var(--op-color-primary-h) var(--op-color-primary-s) 64%),
hsl(var(--op-color-primary-h) var(--op-color-primary-s) 32%)
);
/* Fonts */
--op-font-family: 'Coming Soon', sans-serif;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme-mode='light']) {
--op-font-family: 'Grandstander', sans-serif;
}
}
:root[data-theme-mode='dark'] {
--op-font-family: 'Grandstander', sans-serif;
}
If you need to override the provided color scales, you should redefine all the variants of that color to ensure consistency across the application. For example, if you are overriding the primary color, you should redefine all its variants like so:
:root {
--op-color-primary-h: 164;
--op-color-primary-s: 100%;
--op-color-primary-l: 50%;
/* Main Scale */
--op-color-primary-plus-two: light-dark(
hsl(var(--op-color-primary-h) var(--op-color-primary-s) 64%),
hsl(var(--op-color-primary-h) var(--op-color-primary-s) 32%)
);
--op-color-primary-plus-one: light-dark(
hsl(var(--op-color-primary-h) var(--op-color-primary-s) 45%),
hsl(var(--op-color-primary-h) var(--op-color-primary-s) 35%)
);
/* On Scale */
--op-color-primary-on-plus-two: light-dark(
hsl(var(--op-color-primary-h) var(--op-color-primary-s) 16%),
hsl(var(--op-color-primary-h) var(--op-color-primary-s) 80%)
);
--op-color-primary-on-plus-two-alt: light-dark(
hsl(var(--op-color-primary-h) var(--op-color-primary-s) 6%),
hsl(var(--op-color-primary-h) var(--op-color-primary-s) 92%)
);
--op-color-primary-on-plus-one: light-dark(
hsl(var(--op-color-primary-h) var(--op-color-primary-s) 100%),
hsl(var(--op-color-primary-h) var(--op-color-primary-s) 80%)
);
--op-color-primary-on-plus-one-alt: light-dark(
hsl(var(--op-color-primary-h) var(--op-color-primary-s) 95%),
hsl(var(--op-color-primary-h) var(--op-color-primary-s) 98%)
);
}
For more details on theming and token overrides, refer to the Optics documentation using the links below
For detailed component usage, refer to:
If the user asks about specific components or advanced features not covered in this skill:
web_fetch or another method to retrieve the relevant documentation pageExample: For button variants, check https://docs.optics.rolemodel.design/?path=/docs/components-button--docs