菜单
CSS styles, color themes, and visual conventions for docs.cloudposse.com. Use when styling components, mermaid diagrams, or working with site theming.
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/cloudposse/docs --skill docs-styles命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
基于 SOC 职业分类
正在显示 SKILL.md
| name | docs-styles |
| description | CSS styles, color themes, and visual conventions for docs.cloudposse.com. Use when styling components, mermaid diagrams, or working with site theming. |
CSS styles and color conventions for docs.cloudposse.com.
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 |
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 |
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
| 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 |
| 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 |
Use [data-theme='dark'] or html[data-theme='dark'] selectors:
[data-theme='dark'] .my-element {
background: #21262d;
color: #fff;
}
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)} />