docs-styles

Apply CSS styling rules and color palettes from src/css to docs.cloudposse.com.

98|34|Updated Apr 27, 2018
One-click install
npx skills add https://github.com/cloudposse/docs --skill docs-styles
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: docs-styles
Source: https://github.com/cloudposse/docs/tree/main/.claude/skills/docs-styles
Command: npx skills add https://github.com/cloudposse/docs --skill docs-styles

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

CSS styles and color conventions for docs.cloudposse.com ensure consistent visuals across pages, diagrams, and components, reducing design drift and speeding up front-end work.

Core Features & Use Cases

  • Global styling rules defined in src/css/custom.css and mermaid.css for consistent visuals.
  • Defined color palette with site primary colors and mermaid colors to ensure accessible contrasts.
  • Guidelines for dark mode, semantic color meanings, and component styling.

Quick Start

Apply the docs-styles by including src/css/custom.css and src/css/mermaid.css in your project to adopt the official theming.

Frequently Asked Questions about docs-styles

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

FAQPage Schema
How do I unify CSS styling and theming across documentation pages?▼

Unify CSS styling by applying global rules from src/css/custom.css and mermaid.css to standardize visuals, color usage, and component design across all documentation pages.

What color palette definitions are needed for documentation theming?▼

Documentation theming requires defined site primary colors and mermaid colors to ensure accessible contrasts, with all color palette definitions stored in the theme configuration.

How do I style mermaid diagrams with CSS for consistent documentation visuals?▼

Style mermaid diagrams by including src/css/mermaid.css in your project, which applies standardized color definitions to ensure consistent visual rendering across all documentation diagrams.

Does this CSS design system support dark mode for documentation sites?▼

Dark mode is supported through defined guidelines for semantic color meanings and component styling, ensuring accessible contrasts and consistent visuals in both light and dark documentation themes.

Can I use these documentation styles without referencing files in src/css?▼

No, adopting the official theming requires referencing files in src/css, specifically including custom.css and mermaid.css in your project to apply the standardized design system.

What's the best way to prevent design drift in documentation front-end work?▼

Prevent design drift by applying a standardized CSS design system with global styling rules, defined color palettes, and component guidelines to ensure consistent visuals across all documentation pages.