메뉴
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 />."