跳到主要内容
SkillsBin技能仓
/
提交收录

html-ppt-tech-sharing 精选

OpenDesign internals: how the agent stream, sandbox, and artifacts work — an engineering deep-dive talk. Built as a decision-grade AI literacy deck for engineers, dev community.

写作 Claude CodeCodex CLICursorMCP 客户端 Apache-2.0 10 万
在 GitHub 打开

安装方式

cp -r design-templates/html-ppt-tech-sharing ~/.claude/skills/html-ppt-tech-sharing

把该 skill 目录放进客户端 skills 目录。不同客户端的目录可能不同，Claude Code 默认是 ~/.claude/skills/

整仓一次性获取：git clone --depth 1 https://github.com/nexu-io/open-design.git

依赖与权限

  • 无需 API Key
  • 需要联网访问外部服务
  • 依赖外部命令：go make
  • 以上为按正文与 frontmatter 自动推断的信号，仅供参考；安装前建议先阅读原文。
触发场景
enterprise-ai-copilot-rollout-briefai-literacyGive an Engineering Tech Talk like a Staff Developer-Advocate像 Staff DevRel 一样做工程分享aicopilotworkflowhtml deck

SKILL.md 正文

来源 nexu-io/open-design@0bd8251 · 许可 Apache-2.0 · 内容未修改

HTML PPT · Tech Sharing

A focused entry point into the [html-ppt](../html-ppt/SKILL.md) master skill that lands the user directly on the tech-sharing full-deck template.

When this card is picked

The Examples gallery wires "Use this prompt" to the example_prompt above. When you accept that prompt, this card is the right pick if the user wants exactly the visual identity of tech-sharing (see the upstream [full-decks catalog](../html-ppt/references/full-decks.md) for screenshots and rationale).

How to author the deck

  1. Read the master skill first. All authoring rules live in

[design-templates/html-ppt/SKILL.md](../html-ppt/SKILL.md) — content/audience checklist,

token rules, layout reuse, presenter mode, the keyboard runtime, and the

"never put presenter-only text on the slide" rule.

  1. Start from the matching template folder:

design-templates/html-ppt/templates/full-decks/tech-sharing/ — copy index.html and

style.css into the project, keep the .tpl-tech-sharing body class.

  1. Bring the shared runtime with the template. The upstream

index.html links the shared CSS/JS via ../../../assets/... because it

sits three folders deep inside design-templates/html-ppt/templates/full-decks/.

Once you copy index.html into the project, those parent-relative URLs

no longer resolve and base.css, animations.css, and runtime.js

will 404 — meaning the deck never activates and slide navigation is

dead. Pick one of these two recipes per project:

  • Recipe A — copy + rewrite (preferred): copy

design-templates/html-ppt/assets/fonts.css, design-templates/html-ppt/assets/base.css,

design-templates/html-ppt/assets/animations/animations.css, and

design-templates/html-ppt/assets/runtime.js into a project-local

assets/ (with assets/animations/animations.css), then rewrite the

four <link>/<script> tags in index.html from

../../../assets/... to the matching project-local paths

(assets/fonts.css, assets/base.css,

assets/animations/animations.css, assets/runtime.js).

  • Recipe B — inline: read the same four files and replace each

<link rel="stylesheet" href="../../../assets/..."> with a

<style>...</style> containing the file's contents, and the

<script src="../../../assets/runtime.js"> with a

<script>...</script> containing runtime.js. Yields a single

self-contained index.html.

Either way, do not ship the upstream ../../../assets/... URLs

verbatim into a project artifact — they only work in-tree.

  1. Pick a theme. Default tokens look fine; if the user wants a different

feel, swap in any of the 36 themes from design-templates/html-ppt/assets/themes/*.css

via <link id="theme-link"> and let T cycle.

  1. Replace demo content, not classes. The .tpl-tech-sharing scoped CSS only

recognises the structural classes shipped in the template — keep them.

  1. Speaker notes go inside <aside class="notes"> or <div class="notes"> — never as visible text on the slide.

Attribution

Visual system, layouts, themes and the runtime keyboard model come from

the upstream MIT-licensed lewislulu/html-ppt-skill. The

LICENSE file ships at design-templates/html-ppt/LICENSE; please keep it in place when

redistributing.

质量与来源

所属仓库
nexu-io/open-design
仓库星标
10 万
最近更新
今天
采集时间
今天
commit
0bd8251c9b5c
内容指纹
sha256:15341f4df540a71
文件路径
design-templates/html-ppt-tech-sharing/SKILL.md

同仓库其它 Skill

查看全部 50 个
od-contribute
One-click contribution flow for OpenDesign (nexu-io/open-design) — even for non-coders. Pick one of four cards (ship a Skill or Design System you made with OD; translate docs; fix a typo / write a blog; report a bug), the agent validates and opens a PR (or issue) for you. Trigger words contribute to open design, ship my OD skill, ship my OD design system, translate OD docs, report an OD bug, od-contribute.
精选 nexu-io/open-design 10 万 原文
Claude CodeCodex CLICursor
sample-plugin
Phase 1 sample plugin synthesizing a SKILL.md frontmatter for backwards-compat tests.
精选 nexu-io/open-design 10 万 原文
Claude CodeCodex CLICursor
aster-atelier
Use this template when the user wants an artistic creative-studio website with classical imagery, cobalt skies, elegant serif typography and cinematic scrolling.
精选 nexu-io/open-design 10 万 原文
Claude CodeCodex CLICursor
audio-jingle
Audio generation skill — jingles, beds, voiceover, and sound effects. Routes music requests to Suno V5 / Udio / Lyria, speech to MiniMax TTS / FishAudio / ElevenLabs V3, and SFX to ElevenLabs SFX or AudioCraft. Output is one MP3/WAV file saved to the project folder.
精选 nexu-io/open-design 10 万 原文
Claude CodeCodex CLICursor
blog-post
A long-form article / blog post — masthead, hero image placeholder, article body with figures and pull quotes, author byline, related posts. Use when the brief asks for "blog", "article", "post", "essay", or "case study".
精选 nexu-io/open-design 10 万 原文
Claude CodeCodex CLICursor
clinical-case-report
Structured medical case presentation for clinical rounds, conferences, and documentation. Generates SOAP-format or narrative case reports with physiologically accurate vitals, labs, and evidence-based plans. Use when the brief mentions "case report", "case presentation", "SOAP note", "clinical case", "ward rounds", "case summary", or "patient presentation".
精选 nexu-io/open-design 10 万 原文
Claude CodeCodex CLICursor

相似 Skill

更多「写作」
interview-prep
Prepares the user for a specific interview from their real experience. Builds a story bank in Situation/Task/Action/Result/Reflection form mapped to the competencies the role and company test (such as Amazon's Leadership Principles), writes a cited company and role brief from public sources, predicts questions per round, drafts opener, why-us, weakness and salary answers, prepares questions to ask and a logistics checklist, and runs a post-interview debrief. Use when the user says "help me prepare for my interview", "I have an interview tomorrow" or "in 2 hours", "build my story bank", "STAR stories", "interviewing as a career changer", "what will they ask me", "how do I answer tell me about yourself", "questions to ask the interviewer", "research the company" or "debrief my interview". Uses Reactive Resume MCP tools when connected. For scored role-play practice, mock-interview; for thank-you notes and tracking, job-application-manager; for a salary number, offers or negotiation, offer-negotiation.
精选 reactive-resume/reactive-resume 4.4 万 原文
Claude CodeCodex CLIGemini CLI
job-application-manager
Runs the job-search pipeline. Adds jobs from a link or pasted posting, keeps stages and dates accurate, sets follow-ups, runs a weekly review (stale applications, next actions, funnel stats), records the exact resume version sent, and drafts networking, LinkedIn, referral, recruiter-reply, follow-up, thank-you, status-check, expedite and withdrawal messages without sending them. Use when the user says "add this job to my tracker", "I applied", "log my interview", "I got rejected", "I was ghosted", "log my offer", "track my applications", "do my weekly review", "what should I follow up on", "write a thank-you note", "message this recruiter", "ask for a referral", "withdraw my application", or wants a job-search spreadsheet. Works with a Markdown/CSV tracker or Reactive Resume MCP tools. Not for resume work (resume-tailor, resume-bullet-writer, resume-content-guide), interview prep or practice (interview-prep, mock-interview), or judging, negotiating, accepting or declining an offer (offer-negotiation).
精选 reactive-resume/reactive-resume 4.4 万 原文
Claude CodeCodex CLIGemini CLI
mock-interview
Runs a mock interview for a specific job description. Plays the interviewer in a chosen round (recruiter screen, hiring manager, behavioral, coding, system design, case, product sense, panel), persona and difficulty; asks one question at a time, probes vague answers, and gives quote-backed rubric scores after each answer (coach mode) or at the end (realistic). Model answers use only the user's real experience. Use when the user says "mock interview me", "interview me for this job", "practice interview", "pretend you're the interviewer", "grill me for this role", "run a behavioral round", "quick recruiter screen", "hiring-manager mock", "system design mock" or "case interview practice". With Reactive Resume MCP it reads the application and stories and logs the session. For a story bank, company brief, questions to ask or a real-interview debrief, interview-prep; for scheduling or thank-you notes, job-application-manager; for fixing the resume, resume-tailor; for negotiation practice, offer-negotiation.
精选 reactive-resume/reactive-resume 4.4 万 原文
Claude CodeCodex CLIGemini CLI
offer-negotiation
Evaluates and negotiates job offers. Decodes base, bonus, equity, sign-on, level and terms with unknowns kept unknown and each offer in its own currency, benchmarks against checkable pay data, finds true leverage, drafts one counter as email and call script, role-plays the recruiter, and handles the salary-expectations number, deadlines and extensions, "best and final", competing offers, counteroffers and written acceptance or decline. Country-aware (India CTC, 13th-month pay, public-sector scales). Use when the user says "I got an offer of...", "is this offer good", "should I negotiate", "how do I counter", "compare my offers", "what is my equity worth", "they asked my salary expectations", "they want an answer by Friday", "can I ask for more time", "should I accept" or "practice the negotiation call". Uses Reactive Resume MCP tools when connected. For logging the offer, its deadline and withdrawal notes, job-application-manager; for other interview answers, interview-prep.
精选 reactive-resume/reactive-resume 4.4 万 原文
Claude CodeCodex CLIGemini CLI
resume-builder
Builds a complete resume from scratch as Reactive Resume JSON that conforms to the schema and imports at https://rxresu.me. Asks for each missing detail instead of inventing it, then produces valid JSON (UUIDs, HTML descriptions, template and layout). Use when the user wants to create, build or generate a new resume, turn their work history into Reactive Resume JSON, or asks about the Reactive Resume schema, sections, templates or layout. For what belongs on a resume or a resume audit use resume-content-guide; for rewriting bullets, resume-bullet-writer; for fitting one job posting, resume-tailor; for tracking applications, job-application-manager; for interviews, interview-prep or mock-interview.
精选 reactive-resume/reactive-resume 4.4 万 原文
Claude CodeCodex CLIGemini CLI
resume-bullet-writer
Turns resume duties into truthful impact bullets. Questions the user role by role to dig out achievements, asks for real numbers or honest ranges (never invents them), and writes concise bullets in XYZ, CAR, scope or qualitative form. Use when the user says "rewrite my bullets", "make this bullet stronger", "quantify my resume", "turn my duties into achievements", "improve my experience section", "my resume sounds boring", "I don't have any numbers", pastes resume lines for feedback, or works in a low-number job (nursing, teaching, care, trades, admin, creative). With the Reactive Resume MCP server connected, it edits experience, project, volunteer and education descriptions with apply_resume_patch after the user approves. Use resume-content-guide instead for which sections or details belong and for summaries or headlines, resume-tailor to fit one job posting, interview-prep or mock-interview for interview stories and practice, and resume-builder to build a resume from scratch.
精选 reactive-resume/reactive-resume 4.4 万 原文
Claude CodeCodex CLIGemini CLI