skills.rest
rnny66
rnny66COMMUNITY
Explore all skills by this author →
GitHub

ocp-style-system

Reference OPC project CSS design tokens, BEM naming, and animation patterns.

Updated Aug 23, 2026
Search Tags:#frontend#css#style guide#design tokens#animation#opc
One-click install
npx skills add https://github.com/rnny66/OPC --skill ocp-style-system
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ocp-style-system
Source: https://github.com/rnny66/OPC/tree/main/.claude/skills/ocp-style-system
Command: npx skills add https://github.com/rnny66/OPC --skill ocp-style-system

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a quick reference for the OPC project's CSS conventions, design tokens, and animation patterns, ensuring consistent styling and efficient development.

Core Features & Use Cases

  • Design Token Reference: Quickly find color, radius, and typography values.
  • CSS Rule Guidelines: Understand naming conventions, file structure, and best practices.
  • Animation Patterns: Learn how to implement entrance, scroll-reveal, and staggered animations.
  • Use Case: When styling a new component for the OPC site, consult this Skill to find the correct color variables, apply BEM naming, and implement the standard transition effects.

Quick Start

Use the ocp-style-system skill to find the CSS class for a blue filled button.

Frequently Asked Questions about ocp-style-system

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I find the correct CSS variables for styling OPC components?▼

To find the correct CSS variables for styling OPC components, consult the design token reference for predefined color, radius, and typography values. This ensures consistent UI development by enforcing standard project variables.

What CSS naming convention does the OPC style system use?▼

The OPC style system uses the BEM methodology for CSS naming conventions. Adhering to BEM ensures structured, maintainable class names and enforces consistent styling guidelines across the project.

How do I implement scroll-reveal and entrance animations for the OPC site?▼

To implement scroll-reveal and entrance animations, use the predefined animation keyframes provided in the OPC style system. It includes specific patterns for entrance, scroll-reveal, and staggered animations for interactive elements.

Do I need to install any dependencies to use the OPC CSS style guide?▼

No dependencies are required to use the OPC CSS style guide. The system operates as a standalone reference for conventions, design tokens, and animation patterns without external library installations.

What is the best way to maintain consistent UI styling in the OPC project?▼

The best way to maintain consistent UI styling in the OPC project is by enforcing the use of CSS variables, BEM methodology, and predefined animation keyframes. This facilitates strict adherence to project-specific styling guidelines.

Related Skills

Explore More Software Engineering Skills→
StartaleGroupStartaleGroup
3

teach-impeccable

Collect project design context and persist it to the AI config file.

Official
Intermediate
shynlee04shynlee04

Frontend CSS

Enforce consistent CSS styling with Tailwind, BEM, and CSS Modules.

Community
Intermediate
usermaumusermaum

frontend-specialist

Create React components styled with Tailwind CSS and the Latte theme.

Community
Intermediate
EIS-ITSEIS-ITS

Frontend CSS

Apply design tokens and CSS methodologies to style components and optimize production builds.

Official
Intermediate