Design skills

Browse reusable Agent Skills, each with a clear purpose and practical guidance.

legal-architecture

生成专业的法律结构可视化图,输出为自包含 HTML 文件(内嵌 SVG,浅色主题,适合打印和嵌入文档)。适用场景:(1) 用户要求"画结构图""生成可视化""做流程图""法律图示"时;(2) 涉及诉讼推理结构(当事人→证据→事实→法律→判决);(3) 合同关系图(甲乙方权利义务、履约节点、违约责任);(4) 法规程序图(申请→审查→决定→救济);(5) 证据链图、请求权基础分析图、法律体系层级图。Use when the user asks for litigation flow diagrams, contract relationship diagrams, legal reasoning structure diagrams, evidence chain diagrams, or any legal visualization.

145 repo starsObserved in 1 repos
Design

rikka-conventions

RikkaUI design system conventions. Use when writing or modifying any component, theme token, or showcase code.

145 repo starsObserved in 1 repos
Design

ui-ux-design-audit

Audit multi-surface UI/UX in the personal-assistant Obsidian plugin with the current PA framework, real interface evidence, structured scoring, adversarial finding verification, and product-decision routing. Use for design retrospectives, visual quality baselines, cross-surface consistency audits, accessibility/mobile evaluations, or requests such as "帮我看看设计" and "audit the UI". Default to audit-only; implement findings only when explicitly requested, and require separate authorization for commit or archive actions. For review of a current code diff or PR, use `personal-assistant-review` instead.

145 repo starsObserved in 1 repos
Design

app-ux-paradigms

Applies standard web app UX for keyboard shortcuts, modals, overlays, forms, and interaction patterns. Use when building UI, dialogs, menus, hotkeys, help text, accessibility, or when the user asks about Esc, shortcuts, modal close, backdrop click, or common desktop-app expectations.

144 repo starsObserved in 1 repos
Design

cinematographer

Design the MANDATORY cinematic scroll experience (every blog ships one): a full-bleed, scroll-driven background — primarily from the Scout's verified real imagery — plus the global motion choreography, so the narrative unfolds like a film as the reader scrolls. Owns the BACKGROUND layer + page-level motion (not the Designer's per-section visuals, not the Interaction centerpiece — it stages them inside the scroll). Outputs cinematographer.json (cin_xx scenes). There is no off path: a topic with no sourceable real imagery falls back to a generative-atmosphere or data-driven-spine background, never to a bare column.

144 repo starsObserved in 1 repos
Design

dataviz-craft

A shared reference library for editorial-grade data-visualization craft — Vega-Lite-first with a D3 fallback for charts Vega-Lite can't express. Read by the Designer at chart selection (intent → ranked chart type), the Programmer at implementation (editorial Vega-Lite recipes, annotation layers, axis/label de-clutter, encoding craft), and the Auditor/Critic for chart-quality review. It encodes the FT Visual Vocabulary intent taxonomy, the Cleveland–McGill channel-accuracy ordering, the BBC bbplot de-clutter ruleset, and colorblind-safe encoding rules. Not a pipeline stage — a craft source, like frontend-design.

144 repo starsObserved in 1 repos
Design

designer

Read editor.md, editor.json, and analyst.json. Make data-driven creative visual decisions for every section — teaser, charts, images, videos, audio, maps, and interactive demos when they fit the data. Generate selected assets. No HTML. Outputs designer.json with des_xx IDs.

144 repo starsObserved in 1 repos
Design

fronted-design

当需要设计或实现高质量前端页面/组件(Web UI、美化、落地页、控制台)时使用。

144 repo starsObserved in 1 repos
Design

frontend-design-pro

Shared UI/visual-design rule library for building polished, distinctive, multimedia-rich self-contained HTML stories. The Data2Story Designer and Programmer read it to choose a visual language (theme, type pairing, layout, components, motion) and implement it so every blog looks intentional and editorial, never templated. Use when designing or reshaping a story's look, picking fonts/colors/themes, building a hero/chart/card/map/audio component, adding motion or an interactive, or fixing a visual defect (invisible chart, overflow, broken media, AI-slop look). Not a pipeline stage — a design source consulted by other roles.

144 repo starsObserved in 1 repos
Design

hero

Craft the COVER — the one animated <video> hero that opens the page above the headline, built from a Scout-verified still (or an abstract generated still) via a deterministic source ladder. The cover is animated by DEFAULT; a static <img> is only the recorded last rung. Owns the hero video + its static furniture; the Interaction Engineer owns the pick-a-side overlay, the Cinematographer stages the cover as cin_00. Reuses data-des=des_hero_video (no new provenance prefix). Outputs hero.json + assets/teaser.webm + _web.mp4 + .jpg poster.

144 repo starsObserved in 1 repos
Design