Can I use this for React component styling?

Yes, the skill provides established patterns for co-locating CSS modules with React components and using the clsx utility for conditional class names.

Does this skill support dark mode configuration?

Yes, it includes specific color variables and CSS selectors like [data-theme='dark'] to ensure a consistent experience across different display modes.

What is the primary purpose of the docs-styles skill?

It provides specific CSS styles, color themes, and visual conventions to maintain consistency across the Cloud Posse documentation site.

How are colors used in Mermaid diagrams with this skill?

The skill defines semantic hex codes for diagrams, where blue indicates read-only access, green indicates write/apply access, and orange signifies identity providers.

Where are the global CSS files located in this structure?

Global styles and Infima overrides are primarily located in src/css/custom.css, while specialized styles for diagrams and navigation are in their respective CSS files.

Cloud Posse Documentation Styles

Name: Cloud Posse Documentation Styles
Author: cloudposse

bycloudposse

•

学习与文档

Manages visual styles, color themes, and Mermaid diagram conventions for Cloud Posse documentation.

The docs-styles skill provides specialized guidance for maintaining the visual identity and technical diagrams of docs.cloudposse.com. It ensures consistent use of color palettes for light and dark modes, standardized CSS for Mermaid diagrams, and proper implementation of React component styling using CSS modules. This skill is essential for developers and technical writers looking to maintain design consistency across Cloud Posse's infrastructure documentation, helping them apply semantic color meanings to technical diagrams and user interface elements correctly.

主要功能

0194 GitHub stars

02Directory structure for global and component-specific styles

03Guidelines for CSS module implementation in React components

04Infima framework overrides for Docusaurus-based documentation

05Standardized color palette for light and dark themes

06Semantic color mapping for technical Mermaid diagrams

使用场景

01Styling new React components within the Cloud Posse documentation site

02Updating documentation theme colors to match brand identity

03Creating technical architecture diagrams with semantic color coding

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add cloudposse/docs docs-styles

For use in Claude.ai and ChatGPT

Download Skill