Communitygithub.com

tmnhutwork/Landingpage-Photo-Retouch

Write or review UX copy — microcopy, error messages, empty states, CTAs. Trigger with "write copy for", "what should this button say?", "review this error message", or when naming a CTA, wording a confirmation dialog, filling an empty state, or writing onboarding text.

O que é Landingpage-Photo-Retouch?

Landingpage-Photo-Retouch is a Claude Code agent skill that write or review UX copy — microcopy, error messages, empty states, CTAs. Trigger with "write copy for", "what should this button say?", "review this error message", or when naming a CTA, wording a confirmation dialog, filling an empty state, or writing onboarding text.

Funciona com~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/tmnhutwork/Landingpage-Photo-Retouch/tree/HEAD/.agents/plugins/anthropic-design/skills/ux-copy

Perguntar na sua IA favorita

Abre um novo chat com esta habilidade de agente já pré-carregada.

Documentação

/ux-copy

If you see unfamiliar placeholders or need to check which tools are connected, see CONNECTORS.md.

Write or review UX copy for any interface context.

Usage

/ux-copy $ARGUMENTS

What I Need From You

  • Context: What screen, flow, or feature?
  • User state: What is the user trying to do? How are they feeling?
  • Tone: Formal, friendly, playful, reassuring?
  • Constraints: Character limits, platform guidelines?

Principles

  1. Clear: Say exactly what you mean. No jargon, no ambiguity.
  2. Concise: Use the fewest words that convey the full meaning.
  3. Consistent: Same terms for the same things everywhere.
  4. Useful: Every word should help the user accomplish their goal.
  5. Human: Write like a helpful person, not a robot.

Copy Patterns

CTAs

  • Start with a verb: "Start free trial", "Save changes", "Download report"
  • Be specific: "Create account" not "Submit"
  • Match the outcome to the label

Error Messages

Structure: What happened + Why + How to fix

  • "Payment declined. Your card was declined by your bank. Try a different card or contact your bank."

Empty States

Structure: What this is + Why it's empty + How to start

  • "No projects yet. Create your first project to start collaborating with your team."

Confirmation Dialogs

  • Make the action clear: "Delete 3 files?" not "Are you sure?"
  • Describe consequences: "This can't be undone"
  • Label buttons with the action: "Delete files" / "Keep files" not "OK" / "Cancel"

Tooltips

  • Concise, helpful, never obvious

Loading States

  • Set expectations, reduce anxiety

Onboarding

  • Progressive disclosure, one concept at a time

Voice and Tone

Adapt tone to context:

  • Success: Celebratory but not over the top
  • Error: Empathetic and helpful
  • Warning: Clear and actionable
  • Neutral: Informative and concise

Output

## UX Copy: [Context]

### Recommended Copy
**[Element]**: [Copy]

### Alternatives
| Option | Copy | Tone | Best For |
|--------|------|------|----------|
| A | [Copy] | [Tone] | [When to use] |
| B | [Copy] | [Tone] | [When to use] |
| C | [Copy] | [Tone] | [When to use] |

### Rationale
[Why this copy works — user context, clarity, action-orientation]

### Localization Notes
[Anything translators should know — idioms to avoid, character expansion, cultural context]

If Connectors Available

If ~~knowledge base is connected:

  • Pull your brand voice guidelines and content style guide
  • Check for existing copy patterns and terminology standards

If ~~design tool is connected:

  • View the screen context in Figma to understand the full user flow
  • Check character limits and layout constraints from the design

Tips

  1. Be specific about context — "Error message when payment fails" is better than "error message."
  2. Share your brand voice — "We're professional but warm" helps me match your tone.
  3. Consider the user's emotional state — Error messages need empathy. Success messages can celebrate.

Individual skills in this repo

This repo contains 15 individual skills — each has its own dedicated page.

tmnhutwork/Landingpage-Photo-Retouch

Run a WCAG 2.1 AA accessibility audit on a design or page. Trigger with "audit accessibility", "check a11y", "is this accessible?", or when reviewing a design for color contrast, keyboard navigation, touch target size, or screen reader behavior before handoff.

tmnhutwork/Landingpage-Photo-Retouch

Get structured design feedback on usability, hierarchy, and consistency. Trigger with "review this design", "critique this mockup", "what do you think of this screen?", or when sharing a Figma link or screenshot for feedback at any stage from exploration to final polish.

tmnhutwork/Landingpage-Photo-Retouch

Generate developer handoff specs from a design. Use when a design is ready for engineering and needs a spec sheet covering layout, design tokens, component props, interaction states, responsive breakpoints, edge cases, and animation details.

tmnhutwork/Landingpage-Photo-Retouch

Audit, document, or extend your design system. Use when checking for naming inconsistencies or hardcoded values across components, writing documentation for a component's variants, states, and accessibility notes, or designing a new pattern that fits the existing system.

tmnhutwork/Landingpage-Photo-Retouch

Synthesize user research into themes, insights, and recommendations. Use when you have interview transcripts, survey results, usability test notes, support tickets, or NPS responses that need to be distilled into patterns, user segments, and prioritized next steps.

tmnhutwork/Landingpage-Photo-Retouch

Plan, conduct, and synthesize user research. Trigger with "user research plan", "interview guide", "usability test", "survey design", "research questions", or when the user needs help with any aspect of understanding their users through research.

tmnhutwork/Landingpage-Photo-Retouch

Design banners for social media, ads, website heroes, creative assets, and print. Multiple art direction options with AI-generated visuals. Actions: design, create, generate banner. Platforms: Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Google Display, website hero, print. Styles: minimalist, gradient, bold typography, photo-based, illustrated, geometric, retro, glassmorphism, 3D, neon, duotone, editorial, collage. Uses ui-ux-pro-max, frontend-design, ai-artist, ai-multimodal skills.

tmnhutwork/Landingpage-Photo-Retouch

Brand voice, visual identity, messaging frameworks, asset management, brand consistency. Activate for branded content, tone of voice, marketing assets, brand compliance, style guides.

tmnhutwork/Landingpage-Photo-Retouch

Comprehensive design skill: brand identity, design tokens, UI styling, logo generation (55 styles, Gemini AI), corporate identity program (50 deliverables, CIP mockups), HTML presentations (Chart.js), banner design (22 styles, social/ads/web/print), icon design (15 styles, SVG, Gemini 3.1 Pro), social photos (HTML→screenshot, multi-platform). Actions: design logo, create CIP, generate mockups, build slides, design banner, generate icon, create social photos, social media images, brand identity, design system. Platforms: Facebook, Twitter, LinkedIn, YouTube, Instagram, Pinterest, TikTok, Threads, Google Ads.

tmnhutwork/Landingpage-Photo-Retouch

Audit, document, or extend your design system. Use when checking for naming inconsistencies or hardcoded values across components, writing documentation for a component's variants, states, and accessibility notes, or designing a new pattern that fits the existing system.

tmnhutwork/Landingpage-Photo-Retouch

Translates Figma designs into production-ready application code with 1:1 visual fidelity. Use when implementing UI code from Figma files, when user mentions "implement design", "generate code", "implement component", provides Figma URLs, or asks to build components matching Figma specs. For Figma canvas writes via `use_figma`, use `figma-use`.

tmnhutwork/Landingpage-Photo-Retouch

Use the Figma MCP server to fetch design context, screenshots, variables, and assets from Figma, and to translate Figma nodes into production code. Trigger when a task involves Figma URLs, node IDs, design-to-code implementation, or Figma MCP setup and troubleshooting.

tmnhutwork/Landingpage-Photo-Retouch

Create strategic HTML presentations with Chart.js, design tokens, responsive layouts, copywriting formulas, and contextual slide strategies.

tmnhutwork/Landingpage-Photo-Retouch

Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessible components (dialogs, dropdowns, forms, tables), customizing themes and colors, implementing dark mode, generating visual designs and posters, or establishing consistent styling patterns across applications.

tmnhutwork/Landingpage-Photo-Retouch

UI/UX design intelligence for web, mobile, and desktop. This skill should be used when designing, building, reviewing, or fixing interfaces, including pages, components, design systems, accessibility, interaction, responsive layout, typography, color, charts, and stack-specific UI implementation. Searchable local data: 79 searchable styles (50 active), 192 product palettes and reasoning profiles, 74 font pairings, 119 UX guidelines, 105 icons, 17 GSAP presets, 25 chart types, and 22 stacks.

Habilidades Relacionadas