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.