skills.rest
jf3096
jf3096COMMUNITY
Explore all skills by this author →
GitHub

psd-2-html

Generate and execute psd-to-html CLI commands for PSD to HTML/React conversion.

Updated Mar 13, 2026
Search Tags:#automation#html#react#cli#conversion#psd
One-click install
npx skills add https://github.com/jf3096/personal-configs --skill psd-2-html
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: psd-2-html
Source: https://github.com/jf3096/personal-configs/tree/main/.codex/skills/psd-2-html
Command: npx skills add https://github.com/jf3096/personal-configs --skill psd-2-html

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill automates the conversion of Photoshop (PSD) design files into HTML and React templates, streamlining the front-end development workflow.

Core Features & Use Cases

  • Automated CLI Command Generation: Generates executable psd-to-html CLI commands based on user intent.
  • Smart Parameter Completion: Intelligently fills in missing parameters like source PSD, output directory, and template type with minimal user interaction.
  • Pre-checks and Installation Guidance: Verifies the psd command installation and provides npm installation instructions if needed.
  • Use Case: A designer hands off a PSD file, and you need to quickly generate a React component structure. This Skill can take the PSD file name and automatically create the corresponding HTML/React code structure, asking only for confirmation.

Quick Start

Use the psd-2-html skill to convert the file 'quiz-rewards.psd' into a React template.

Frequently Asked Questions about psd-2-html

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I convert a PSD file to a React component automatically?▼

You can convert PSD to React by providing the file name and intent; the Skill generates executable `psd-to-html` CLI commands, completes missing parameters like output directory and template type, and asks for confirmation before executing.

What is the best way to automate Photoshop PSD to HTML conversion via command line?▼

Automating PSD to HTML conversion is handled by generating executable `psd-to-html` CLI commands based on user intent, completing missing parameters, and providing pre-checks along with npm installation guidance for the `psd` command if it is not found.

Do I need to install the psd command before converting PSD files to HTML?▼

You do not need to pre-install the `psd` command manually, because the Skill performs a pre-check and provides explicit npm installation instructions to ensure the `psd-to-html` CLI environment is ready before command execution.

Can I specify the output directory and template type when converting PSD to React?▼

You can specify the output directory and template type, and the Skill will intelligently complete any missing parameters from your initial request, ensuring the generated `psd-to-html` CLI command is fully executable with minimal interaction.

Why does my PSD to HTML CLI command fail to execute?▼

PSD to HTML command execution fails if the `psd` command is not installed; the Skill addresses this by verifying installation, providing npm guidance, and ensuring the generated command is fully parameterized and confirmed before running.

Related Skills

Explore More Design & Creative Skills→
huangjia2019huangjia2019
114

openspec-verify-change

Verify OpenSpec change implementations against tasks, specs, and design notes.

Community
Advanced
forranyforrany

bk-chat-x

Render AI chat interfaces with Vue components for input, messages, and shortcuts.

Community
Intermediate
belos-streetbelos-street
8

unocss

Generate on-demand atomic CSS for used utility classes in frontend projects.

Community
Intermediate
daffy0208daffy0208
34

Figma Developer

Convert Figma designs into React components and design tokens.

Community
Intermediate