optics-context
OfficialStyle apps consistently with Optics design.
AuthorRoleModel
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This skill standardizes UI styling by applying the Optics design framework to CSS.
Core Features & Use Cases
- Apply Optics classes for layout, spacing, typography, colors, and components to ensure consistency across views.
- Reference tokens from assets/tokens.json and component definitions from assets/components.json to drive styling decisions.
- Use case: Implement Optics tokens for a dashboard, a form, or a content page to maintain a unified look and feel.
Quick Start
Use the optics-context skill to apply a standard header and grid layout to a sample page using the assets in skills/optics-context.
Dependency Matrix
Required Modules
None requiredComponents
assets
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: optics-context Download link: https://github.com/RoleModel/rolemodel-skills/archive/main.zip#optics-context Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.