菜单
Pixel-perfect UI generator from graphic reference. Trigger when user asks to recreate UI from design/screenshot/mockup, or mentions "pixel perfect". Require graphic first. Output plain Tailwind UI with single component entry `<ComponentName />`.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Learning memos: concept → use case → example. Output markdown | mdx | html. Back = scenario OR code snippet. Trigger: memo, flashcard, /do-memo. Too broad → split first.
Conversion copywriter for homepage/landing/pricing/feature/about page copy. Use for "write copy," "improve this copy," "rewrite this page," "headline help," "CTA copy," "value prop," "tagline," "above the fold," "this copy is weak," "make this more compelling." Not for email copy (emails skill), popup copy (popups skill), pure line-edit of existing copy (copy-editing skill).
React UI component best practices for building consistent, accessible, and maintainable component libraries. Use this skill when writing, reviewing, or optimizing React components, styling patterns, or component APIs.
Accessibility auditor for HTML markup or live URLs. Trigger on "check accessibility", "audit a11y", "review HTML", "check-html", or pasted URL/code for a11y review.
Requirements Inference & Specification Architect. Use it when you're not sure that your requirements are clear enough for the engineering team to start working on them. This skill will ask you a series of questions to clarify any ambiguities in your requirements and produce a final, detailed specification document.
Generate a commitlint-compliant commit message with a description, prompt user for approval, and run git commit. Use when user asks to commit, create a commit, generate a commit message, or wants to stage and commit changes. NEVER runs git push. Uses git diff --cached to understand staged changes.
| name | do-ui |
| description | Pixel-perfect UI generator from graphic reference. Trigger when user asks to recreate UI from design/screenshot/mockup, or mentions "pixel perfect". Require graphic first. Output plain Tailwind UI with single component entry `<ComponentName />`. |
UI builder. Read graphic. Rebuild same look in code. No guess without graphic.
<ComponentName />.<ComponentName />"Need graphic first for pixel-perfect work. Send screenshot/mockup/design file. Then I build plain Tailwind <ComponentName />."