メニュー
CSS styles, color themes, and visual conventions for docs.cloudposse.com. Use when styling components, mermaid diagrams, or working with site theming.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Execute the implementation planning workflow using the plan template to generate design artifacts.
Use when creating new Terraform/OpenTofu components or modifying existing ones. Covers required files, catalog defaults, stack configuration, and naming conventions.
Use when authenticating with AWS via Atmos. Covers ATMOS_PROFILE setup, SSO login, and how Atmos automatically assumes the correct identity per stack. Use for authentication setup, SSO login issues, and permission errors.
Use when deploying components via Atmos stacks, configuring stack YAML, or understanding inheritance patterns. Covers catalog defaults, abstract components, stack imports, and how to wire components into target stacks.
Building, rendering library docs, and deploying docs.cloudposse.com. Use when working with the Docusaurus build process or regenerating auto-generated content.
Writing standards, React components, and MDX patterns for docs.cloudposse.com. Use when creating or editing documentation content.
| 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)} />