From ce
Generates Mermaid diagrams for flowcharts, sequences, states, classes, and architecture using semantic styling, shapes, and visual hierarchy.
npx claudepluginhub rileyhilliard/claude-essentials --plugin ceThis skill uses the workspace's default tool permissions.
**Default: Dark mode colors** from [references/color-palettes.md](references/color-palettes.md).
Generates design tokens/docs from CSS/Tailwind/styled-components codebases, audits visual consistency across 10 dimensions, detects AI slop in UI.
Records polished WebM UI demo videos of web apps using Playwright with cursor overlay, natural pacing, and three-phase scripting. Activates for demo, walkthrough, screen recording, or tutorial requests.
Delivers idiomatic Kotlin patterns for null safety, immutability, sealed classes, coroutines, Flows, extensions, DSL builders, and Gradle DSL. Use when writing, reviewing, refactoring, or designing Kotlin code.
Default: Dark mode colors from references/color-palettes.md.
| Concept | Diagram Type |
|---|---|
| Process flows, decisions | Flowchart (TB direction) |
| API calls, message passing | Sequence diagram |
| Lifecycle states | State diagram |
| Data models, relationships | Class diagram or ERD |
| System architecture | Flowchart with subgraphs (LR direction) |
Do:
<br/> for longerDon't:
#000000) - too harsh, use dark grayLR (left-to-right): Pipelines, architecture diagrams TB (top-to-bottom): Hierarchies, decision flows
Use subgraphs for: deployment boundaries, logical layers, team ownership, trust boundaries.