菜单
Create visual infographics using real-world analogies
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Audits the security posture of an AI agent (codebase or architecture description): finds toxic combinations, reviews MCP governance and guardrails, and produces a prioritized report with an optional red-team plan. Use when reviewing agent security, auditing MCP configs, or assessing prompt-injection and exfiltration risk.
Manage Plane.so project management via the planecli CLI — list, create, update, and search work items, projects, cycles/sprints, modules, labels, states, documents, and comments. ALWAYS use this skill when the user mentions Plane, Plane.so, planecli, or references work item identifiers like ABC-123, FE-234, MOB-45. Also invoke when the user asks to manage tasks, issues, sprints, backlogs, or project boards AND either explicitly mentions Plane or the project context indicates Plane is the tool in use. Do NOT use for other project management tools (Jira, Linear, Asana, Trello, Azure DevOps Boards).
Analyzes coupling between modules using the three-dimensional model (strength, distance, volatility) from "Balancing Coupling in Software Design". Use when asking "are these modules too coupled?", "show me dependencies", "analyze integration quality", "which modules should I decouple?", "coupling report", or evaluating architectural health. Do NOT use for domain boundary analysis (use domain-analysis) or component sizing (use component-identification-sizing).
Reviews frontend files (`.tsx`, `.ts`, `.js`) for code quality, performance, and business logic issues. Use when the user requests a code review of frontend files, when reviewing staged changes before commit, or when checking specific components for best-practice violations.
Generates Vitest + React Testing Library tests for frontend components, hooks, and utilities. Use when writing tests, reviewing spec files, improving coverage, or when the user mentions Vitest, RTL, unit tests, or integration tests.
Produce HTML output instead of markdown for any agent task. Four levels — Static Doc, Visual Artifact, Two-Way Interactive, Throwaway Tool. Based on Thariq Shihipar's "Unreasonable Effectiveness of HTML" framework. Triggers on "/html-it", "html-it", "html this", "render as html", "build me an html", "make an html artifact".
| name | explainer-graphic |
| description | Create visual infographics using real-world analogies |
| triggers | ["explainer graphic","make an infographic","explain this visually","create a graphic"] |
| context | fork |
Create stunning infographics that explain complex topics using real-world analogies anyone can understand. The secret sauce: find the killer analogy FIRST, then build the visual around it.
When you say "explain this visually" or "make an infographic about [topic]", this skill finds the perfect analogy, maps every piece, then writes a detailed visual brief you can build or hand to a designer.
The analogy makes or breaks the graphic. Search these categories for the best fit:
| Category | Example Analogies | Best For |
|---|---|---|
| Everyday Life | Kitchen, closet, mailbox, filing cabinet, remote control | Organization, storage, interfaces |
| Jobs and Roles | Receptionist, translator, librarian, bouncer, air traffic controller | Routing, filtering, managing |
| Construction | Blueprint, foundation, scaffolding, plumbing, wiring | Architecture, infrastructure |
| Cooking | Recipe, ingredients, oven, blender, mise en place | Processes, combining inputs |
| Sports | Playbook, coach, referee, training camp, relay race | Strategy, teamwork, handoffs |
| Gaming | Skill tree, inventory, quest log, respawn, power-ups | Progression, upgrades, systems |
| Nature | Root system, beehive, food chain, ecosystem, seasons | Networks, hierarchies, cycles |
| Pop Culture | Swiss army knife, Netflix queue, GPS navigation | Multi-tool, curated content, routing |
Fill out this framework for your chosen analogy:
| Real Concept | Analogy Equivalent | Visual Element | Connection |
|---|---|---|---|
| [Part 1 of concept] | [Analogy part] | [What to draw] | [Why this mapping works] |
| [Part 2 of concept] | [Analogy part] | [What to draw] | [Why this mapping works] |
| [Part 3 of concept] | [Analogy part] | [What to draw] | [Why this mapping works] |
| [Part 4 of concept] | [Analogy part] | [What to draw] | [Why this mapping works] |
Every part of the concept MUST map to something in the analogy. If a piece does not map cleanly, the analogy is wrong. Go back and pick a better one.
Pick the layout that best matches your concept type:
| Layout | Structure | Best For |
|---|---|---|
| Split Panel | Two halves side by side | Comparisons, before/after, real vs analogy |
| Circular Flow | Elements in a circle with arrows | Cycles, feedback loops, recurring processes |
| Stacked Steps | Vertical stack, top to bottom | Sequential processes, hierarchies, funnels |
| Comparison Grid | 2x2 or 3x3 grid of cards | Feature comparisons, category breakdowns |
| Before/After | Left side old way, right side new way | Transformations, upgrades, improvements |
| Pyramid | Layers building up from base | Foundation concepts, priority levels |
| Hub and Spoke | Central element with branches | One-to-many relationships, ecosystems |
| Timeline | Left to right progression | Evolution, history, step-by-step |
Produce a complete brief with ALL of the following:
One punchy line (8 words max). Example: "API Keys Are Just VIP Wristbands"
Specify target size: social post (1080x1080), infographic (1080x1920), slide (1920x1080), or blog (800x1200).
Background, primary, accent, text, and secondary text -- all with hex codes.
Exact placement of each element and size relative to canvas.
For each section of the graphic:
Describe how sections connect:
One highlighted box or banner with the main takeaway. This is the single most important sentence on the entire graphic. Style it differently from everything else (bigger, bolder, different color, bordered).
