Claude-skill-registry docs-styles

CSS styles, color themes, and visual conventions for docs.cloudposse.com. Use when styling components, mermaid diagrams, or working with site theming.

install

source · Clone the upstream repo

git clone https://github.com/majiayu000/claude-skill-registry

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/majiayu000/claude-skill-registry "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/data/docs-styles" ~/.claude/skills/majiayu000-claude-skill-registry-docs-styles && rm -rf "$T"

manifest: skills/data/docs-styles/SKILL.md

Documentation Styles

CSS styles and color conventions for docs.cloudposse.com.

Color Palette

Site Primary Colors

Defined in

src/css/custom.css

Variable	Light	Dark	Usage
`--ifm-color-primary`	`#3578e5`	`#3578e5`	Primary blue, links, buttons
`--ifm-color-primary-dark`	`#306cce`	`#306cce`	Hover states
`--ifm-color-primary-darkest`	`#2554a0`	`#2554a0`	Active states
`--ifm-background-color`	default	`#030711`	Page background

Mermaid Diagram Colors

Defined in

src/css/mermaid.css

Variable	Hex	Usage
`--mermaid-primary`	`#3578e5`	Primary elements, read-only access
`--mermaid-primary-dark`	`#2554a0`	Darker blue variant
`--mermaid-secondary`	`#6c757d`	Gray, neutral elements
`--mermaid-success`	`#28a745`	Green, write/apply access
`--mermaid-danger`	`#dc3545`	Red, destructive/admin
`--mermaid-warning`	`#e67e22`	Orange, caution/IdP
`--mermaid-info`	`#17a2b8`	Teal, informational
`--mermaid-user`	`#9b59b6`	Purple, user/identity
`--mermaid-account`	`#2c3e50`	Dark slate, AWS accounts

Using Colors in Mermaid Diagrams

Mermaid doesn't support CSS variables directly. Use hex values with

style

flowchart LR
    user["User"] --> service["Service"]

    style user fill:#9b59b6,color:#fff
    style service fill:#3578e5,color:#fff

Semantic Color Meanings

Color	Meaning	Example Usage
Blue ( `#3578e5` )	Read-only, plan, info	TerraformPlanAccess
Green ( `#28a745` )	Write, apply, success	TerraformApplyAccess
Orange ( `#e67e22` )	Identity, IdP, warning	Identity Center
Purple ( `#9b59b6` )	User, human identity	User nodes
Dark slate ( `#2c3e50` )	AWS accounts, infrastructure	Account nodes
Red ( `#dc3545` )	Destructive, admin, danger	RootAccess

CSS File Locations

File	Purpose
`src/css/custom.css`	Global styles, Infima overrides
`src/css/mermaid.css`	Mermaid diagram styling
`src/css/admonitions.css`	Admonition/callout styling
`src/css/sidebar.css`	Navigation sidebar
`src/css/navbar.css`	Top navigation
`src/css/footer.css`	Footer styling

Dark Mode

Use

[data-theme='dark']

html[data-theme='dark']

selectors:

[data-theme='dark'] .my-element {
    background: #21262d;
    color: #fff;
}

Component Styling

React components have co-located CSS modules:

src/components/
├── Steps/
│   ├── index.js
│   └── index.module.css
├── ActionCard/
│   ├── index.js
│   └── index.module.css

Use

clsx

for conditional class names:

import clsx from 'clsx';
import styles from './index.module.css';

<div className={clsx(styles.container, isActive && styles.active)} />