devisland-markdown-rendering
Customizes DevIsland UI rendering logic, including Markdown formatting, diff views, and component display.
Install
mkdir -p .claude/skills/devisland-markdown-rendering && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/13029" && unzip -o skill.zip -d .claude/skills/devisland-markdown-rendering && rm skill.zipInstalls to .claude/skills/devisland-markdown-rendering
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Change DevIsland MarkdownView, agent message rendering, hook message formatting, diff rendering, attachment loading, heading handling, link/image safety, or tool output presentation. Use for MarkdownView, ToolMessageFormatter, Notch UI message displays, and related rendering tests.Key capabilities
- →Inspect existing behavior in `MarkdownView.swift` and `ToolMessageFormatter.swift`
- →Preserve scalar hook message formatting
- →Handle diff rendering by preserving whitespace changes and guarding malformed patches
- →Ensure security by not loading remote images or opening links without user intent
- →Fit rendered text within compact UI panels and session lists
- →Run focused tests for formatter behavior and visual changes
How it works
The skill inspects existing rendering components and tests, then applies rules for message formatting, diff rendering, and security. It ensures text fits within compact UI.
Inputs & outputs
When to use devisland-markdown-rendering
- →Fix layout issues in notch UI
- →Update diff formatting logic
- →Adjust tool message presentation
About this skill
DevIsland Markdown Rendering
Use this for message rendering and diff display changes. Pair with devisland-notch-ui when the rendered content appears in the notch or expanded panel.
Start
Read AGENTS.md and inspect existing behavior in:
DevIsland/UI/MarkdownView.swiftDevIsland/Provider/ToolMessageFormatter.swiftDevIsland/UI/NotchView.swiftDevIsland/UI/NotchComponents.swiftDevIsland/UI/PluginContributionRenderer.swiftwhen plugin contribution text is involvedDevIslandTests/ToolMessageFormatterTests.swift
Check recent tests before changing parsing or formatting.
Rendering Rules
Preserve scalar hook message formatting. Do not flatten whitespace-only edits or meaningful line breaks.
For diff rendering:
- Preserve whitespace-only changes.
- Keep edit/replace labels visually distinct.
- Guard empty or malformed patches.
- Avoid crashes on invalid heading levels or malformed Markdown.
For security:
- Do not load remote images unexpectedly.
- Do not open links without explicit user intent.
- Treat command output and tool responses as untrusted display content.
- HTML previews go through
HTMLPreviewContentPolicy(size limits, document wrapping) — keep it restrictive and covered byHTMLPreviewContentPolicyTests.
UI Fit
Rendered text must fit in compact panels and session lists. Avoid hero-scale type inside notch surfaces. Keep headings smaller and predictable inside compact UI.
If changing font size, weight, or spacing, verify readability in both collapsed/expanded contexts and session lists.
Tests And Checks
Use focused tests for formatter behavior:
ToolMessageFormatterTestsPluginContributionRendererTestswhen plugin UI text rendering changes- Any
MarkdownViewor message rendering tests present in the repo
Run:
./scripts/run-tests.sh
./scripts/build_and_run.sh --no-kill --no-run
For visual-only changes, describe the manual rendering cases to inspect.
When not to use it
- →When changes are not related to Markdown rendering or diff display
- →When the rendered content does not appear in the Notch UI
- →When security policies for HTML previews are to be relaxed
Limitations
- →HTML previews are restricted by `HTMLPreviewContentPolicy` size limits
- →Does not load remote images unexpectedly
- →Does not open links without explicit user intent
How it compares
This workflow specifically addresses DevIsland's Markdown and diff rendering requirements, including security and UI fit, which differs from generic Markdown rendering.
Compared to similar skills
devisland-markdown-rendering side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| devisland-markdown-rendering (this skill) | 0 | 2mo | Review | Intermediate |
| using-streamlit-markdown | 0 | 3mo | No flags | Beginner |
| ui-ux-pro-max | 1,909 | 5mo | Review | Intermediate |
| svg-precision | 527 | 4mo | Review | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by nangchang
View all by nangchang →You might also like
using-streamlit-markdown
clivehywong
Covers all Markdown features in Streamlit including GitHub-flavored syntax plus Streamlit extensions like colored text, badges, Material icons, and LaTeX. Use when formatting text, labels, tooltips, or any text-rendering element.
ui-ux-pro-max
nextlevelbuilder
UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 8 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient.
svg-precision
dkyazzentwatwa
Deterministic SVG generation, validation, and rendering. Use for icons, diagrams, charts, UI mockups, or technical drawings requiring structural correctness and cross-viewer compatibility.
mobile-ios-design
wshobson
Master iOS Human Interface Guidelines and SwiftUI patterns for building native iOS apps. Use when designing iOS interfaces, implementing SwiftUI views, or ensuring apps follow Apple's design principles.
openscad
mitsuhiko
Create and render OpenSCAD 3D models. Generate preview images from multiple angles, extract customizable parameters, validate syntax, and export STL files for 3D printing platforms like MakerWorld.
mobile-android-design
wshobson
Master Material Design 3 and Jetpack Compose patterns for building native Android apps. Use when designing Android interfaces, implementing Compose UI, or following Google's Material Design guidelines.