<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: 张文超</title>
    <description>The latest articles on DEV Community by 张文超 (@captainchaozi).</description>
    <link>https://dev.to/captainchaozi</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3088042%2Ffb962922-791d-4011-82a5-129bbebaac1d.jpg</url>
      <title>DEV Community: 张文超</title>
      <link>https://dev.to/captainchaozi</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/captainchaozi"/>
    <language>en</language>
    <item>
      <title>A State Model for AI Image Workflows That Don't Lose Context</title>
      <dc:creator>张文超</dc:creator>
      <pubDate>Fri, 24 Jul 2026 09:28:34 +0000</pubDate>
      <link>https://dev.to/captainchaozi/a-state-model-for-ai-image-workflows-that-dont-lose-context-jjo</link>
      <guid>https://dev.to/captainchaozi/a-state-model-for-ai-image-workflows-that-dont-lose-context-jjo</guid>
      <description>&lt;p&gt;Most AI image interfaces are optimized for one event: submit an input and receive an output. Real creative work is a sequence. A user generates a draft, chooses one result, edits it, removes a background, enhances it, compares versions, and finally exports a file.&lt;/p&gt;

&lt;p&gt;If each step is modeled as an isolated form submission, the application loses the relationships that make the workflow useful. The user has to upload the same image again, reconstruct the prompt, and guess which version should be edited next.&lt;/p&gt;

&lt;p&gt;The fix is not another image tool. It is a small state model that treats every result as part of a task lineage.&lt;/p&gt;

&lt;h2&gt;
  
  
  Separate tasks, runs, and assets
&lt;/h2&gt;

&lt;p&gt;A practical model needs at least three entities:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Task&lt;/strong&gt;: the user's durable intent, such as creating a product hero image.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Run&lt;/strong&gt;: one model or editing operation, including its inputs and settings.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Asset&lt;/strong&gt;: a source image or result file that can be reused by later runs.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The important relationship is that a run consumes assets and produces assets. A result is not just a URL returned by a provider; it is an asset with provenance.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kd"&gt;type&lt;/span&gt; &lt;span class="nx"&gt;ImageRun&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="na"&gt;id&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt;
  &lt;span class="na"&gt;taskId&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt;
  &lt;span class="na"&gt;operation&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt;
  &lt;span class="na"&gt;prompt&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt; &lt;span class="o"&gt;|&lt;/span&gt; &lt;span class="kc"&gt;null&lt;/span&gt;
  &lt;span class="na"&gt;inputAssetIds&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt;&lt;span class="p"&gt;[]&lt;/span&gt;
  &lt;span class="na"&gt;outputAssetIds&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt;&lt;span class="p"&gt;[]&lt;/span&gt;
  &lt;span class="na"&gt;model&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt;
  &lt;span class="na"&gt;settings&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;Record&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="kr"&gt;string&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;unknown&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
  &lt;span class="na"&gt;status&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;queued&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="o"&gt;|&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;running&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="o"&gt;|&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;succeeded&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="o"&gt;|&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;failed&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This makes "continue from this result" a normal operation: create a new run whose input is the selected output asset. There is no download-upload round trip and no ambiguous current file.&lt;/p&gt;

&lt;h2&gt;
  
  
  Make result selection explicit
&lt;/h2&gt;

&lt;p&gt;Generating four images does not mean all four are equally important. Store the user's selection instead of inferring it from the most recent timestamp.&lt;/p&gt;

&lt;p&gt;A task can have:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;a selected working asset;&lt;/li&gt;
&lt;li&gt;an optional final asset;&lt;/li&gt;
&lt;li&gt;an ordered history of runs;&lt;/li&gt;
&lt;li&gt;a delivery specification.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The selected working asset is the default input for the next operation. The final asset is the version that passed review. These are different states: a user may continue editing a promising result without declaring it finished.&lt;/p&gt;

&lt;h2&gt;
  
  
  Preserve the delivery contract
&lt;/h2&gt;

&lt;p&gt;The task should also keep the requirements that determine whether an image is done:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kd"&gt;type&lt;/span&gt; &lt;span class="nx"&gt;DeliverySpec&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;width&lt;/span&gt;&lt;span class="p"&gt;?:&lt;/span&gt; &lt;span class="kr"&gt;number&lt;/span&gt;
  &lt;span class="nx"&gt;height&lt;/span&gt;&lt;span class="p"&gt;?:&lt;/span&gt; &lt;span class="kr"&gt;number&lt;/span&gt;
  &lt;span class="na"&gt;format&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;png&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="o"&gt;|&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;jpg&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="o"&gt;|&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;webp&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;
  &lt;span class="nx"&gt;maxBytes&lt;/span&gt;&lt;span class="p"&gt;?:&lt;/span&gt; &lt;span class="kr"&gt;number&lt;/span&gt;
  &lt;span class="nx"&gt;background&lt;/span&gt;&lt;span class="p"&gt;?:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;transparent&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="o"&gt;|&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;opaque&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="o"&gt;|&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;either&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;
  &lt;span class="nx"&gt;protectedElements&lt;/span&gt;&lt;span class="p"&gt;?:&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt;&lt;span class="p"&gt;[]&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Finalization can then validate dimensions, format, file size, and required visual constraints before enabling the final download. This is more reliable than treating the last generated image as the deliverable.&lt;/p&gt;

&lt;h2&gt;
  
  
  Keep provider details behind the run
&lt;/h2&gt;

&lt;p&gt;Different image providers return different job identifiers, status shapes, and result payloads. Normalize those differences inside the run layer. The user-facing task should not depend on a provider's temporary response format.&lt;/p&gt;

&lt;p&gt;Useful fields to retain include:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;provider job ID;&lt;/li&gt;
&lt;li&gt;model and resolution;&lt;/li&gt;
&lt;li&gt;normalized cost;&lt;/li&gt;
&lt;li&gt;raw error category;&lt;/li&gt;
&lt;li&gt;retry relationship;&lt;/li&gt;
&lt;li&gt;timestamps for queue, start, and completion.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This also makes retries safer. A retry should create a new run connected to the failed run, not silently overwrite its evidence.&lt;/p&gt;

&lt;h2&gt;
  
  
  Treat export as a state transition
&lt;/h2&gt;

&lt;p&gt;Export is often implemented as a plain download button. In a result-first workflow it is better modeled as:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;select a final asset;&lt;/li&gt;
&lt;li&gt;validate it against the delivery spec;&lt;/li&gt;
&lt;li&gt;choose filename and output format;&lt;/li&gt;
&lt;li&gt;create an export record;&lt;/li&gt;
&lt;li&gt;download the exported artifact.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;That record answers a useful operational question later: which exact file did the user deliver?&lt;/p&gt;

&lt;p&gt;I am applying this model in &lt;a href="https://imgfast.org/workspace?utm_source=dev.to&amp;amp;utm_medium=referral&amp;amp;utm_campaign=promotion"&gt;ImgFast Workspace&lt;/a&gt;, where the primary flow is Create → Continue → Final → Download. The implementation details will vary by stack, but the durable idea is the same: preserve the lineage between intent, inputs, runs, results, and delivery.&lt;/p&gt;

&lt;p&gt;When the data model reflects that sequence, the UI becomes simpler. The next action can be attached to a visible result, history becomes explainable, and "final" stops being whichever file happens to be newest.&lt;/p&gt;

</description>
      <category>ai</category>
      <category>architecture</category>
      <category>systemdesign</category>
      <category>programming</category>
    </item>
    <item>
      <title>Designing a Version-Aware Game Wiki for Early Access</title>
      <dc:creator>张文超</dc:creator>
      <pubDate>Mon, 20 Jul 2026 21:25:07 +0000</pubDate>
      <link>https://dev.to/captainchaozi/designing-a-version-aware-game-wiki-for-early-access-12lc</link>
      <guid>https://dev.to/captainchaozi/designing-a-version-aware-game-wiki-for-early-access-12lc</guid>
      <description>&lt;p&gt;Early Access games create a documentation problem that ordinary wikis do not handle well: the facts can change faster than search results, community posts, and copied tables are updated. A page can look polished and still be wrong for the current build.&lt;/p&gt;

&lt;p&gt;I have been working on an independent Subnautica 2 player wiki, and the most useful engineering lesson has been to treat every guide, map marker, and item row as versioned data rather than timeless prose. This post describes the workflow without assuming any particular framework.&lt;/p&gt;

&lt;h2&gt;
  
  
  1. Put provenance next to the fact
&lt;/h2&gt;

&lt;p&gt;For every structured record, keep at least:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;the game build or patch it was checked against;&lt;/li&gt;
&lt;li&gt;the source type: official note, in-game observation, or community report;&lt;/li&gt;
&lt;li&gt;the observation date;&lt;/li&gt;
&lt;li&gt;a confidence state such as verified, provisional, or disputed;&lt;/li&gt;
&lt;li&gt;a stable identifier that survives display-name changes.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;A user should not have to trust a page because it looks complete. They should be able to see whether a coordinate came from the current build and whether another player can reproduce it.&lt;/p&gt;

&lt;h2&gt;
  
  
  2. Separate stable identity from mutable labels
&lt;/h2&gt;

&lt;p&gt;Names, descriptions, recipes, and locations may change. Use an internal key as the identity and keep display text as versioned attributes. This prevents an item rename from creating a second logical entity or breaking every inbound link.&lt;/p&gt;

&lt;p&gt;The same rule helps with localization: English and translated labels point to one entity, while the source and verification state remain shared.&lt;/p&gt;

&lt;h2&gt;
  
  
  3. Model maps as evidence, not decoration
&lt;/h2&gt;

&lt;p&gt;An interactive map should not be a pile of pins. A useful marker contains coordinates, category, build, evidence, verification state, and a short player-facing note. If a patch moves or removes the object, preserve the history and mark the old observation as superseded.&lt;/p&gt;

&lt;p&gt;This also makes filters honest. “Show verified markers for the current build” is a meaningful query; “show everything ever imported” is not.&lt;/p&gt;

&lt;h2&gt;
  
  
  4. Make guides depend on structured facts
&lt;/h2&gt;

&lt;p&gt;Low-spoiler guides are easier to maintain when routes reference item and location records instead of duplicating them. When a resource moves, the dependency graph tells you which guides need review.&lt;/p&gt;

&lt;p&gt;A practical review queue can be generated after every patch:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;ingest official patch notes;&lt;/li&gt;
&lt;li&gt;map changed nouns to stable entity IDs;&lt;/li&gt;
&lt;li&gt;flag affected recipes, markers, and guides;&lt;/li&gt;
&lt;li&gt;verify the highest-impact facts in game;&lt;/li&gt;
&lt;li&gt;publish the new state while retaining the previous build.&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  5. Design for uncertainty
&lt;/h2&gt;

&lt;p&gt;Not every fact can be verified immediately. Hiding uncertainty encourages accidental certainty. I prefer explicit labels:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Verified&lt;/strong&gt;: reproduced for the stated build;&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Provisional&lt;/strong&gt;: credible but not reproduced;&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Disputed&lt;/strong&gt;: conflicting observations exist;&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Superseded&lt;/strong&gt;: valid in an older build, not current.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;These labels are more useful than a single “last updated” date because one page can contain facts with different evidence quality.&lt;/p&gt;

&lt;h2&gt;
  
  
  6. Give players task-oriented entry points
&lt;/h2&gt;

&lt;p&gt;Players rarely arrive wanting “the database.” They want to unblock a task: find a resource, understand a recipe, plan a vehicle route, or check whether an old guide still applies.&lt;/p&gt;

&lt;p&gt;The public navigation should therefore expose task views—map, items, blueprints, creatures, guides, updates, and FAQ—while the data layer stays normalized underneath. As a working example, the &lt;a href="https://subnautica2wiki.net/?utm_source=dev.to&amp;amp;utm_medium=referral&amp;amp;utm_campaign=promotion"&gt;Subnautica 2 Wiki&lt;/a&gt; combines those views and publishes current-build context for players. Disclosure: I maintain this independent resource; it is not an official game site.&lt;/p&gt;

&lt;h2&gt;
  
  
  7. Add regression checks for content
&lt;/h2&gt;

&lt;p&gt;Content can break like code. Useful automated checks include:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;every current recipe references existing item IDs;&lt;/li&gt;
&lt;li&gt;every public marker has coordinates and a build;&lt;/li&gt;
&lt;li&gt;no verified current fact points only to a superseded source;&lt;/li&gt;
&lt;li&gt;localized pages resolve to the same canonical entity;&lt;/li&gt;
&lt;li&gt;guide links do not point to removed routes;&lt;/li&gt;
&lt;li&gt;sitemap and canonical URLs match the public information architecture.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;These checks do not prove that a coordinate is correct, but they prevent many silent consistency failures.&lt;/p&gt;

&lt;h2&gt;
  
  
  Closing thought
&lt;/h2&gt;

&lt;p&gt;The key shift is simple: build an evidence system that renders a wiki, not a collection of pages that happens to contain facts. Early Access makes uncertainty unavoidable. Good architecture makes that uncertainty visible, reviewable, and inexpensive to update.&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>gamedev</category>
      <category>tutorial</category>
      <category>architecture</category>
    </item>
    <item>
      <title>Five checks for a useful browser-based crosshair preview</title>
      <dc:creator>张文超</dc:creator>
      <pubDate>Wed, 15 Jul 2026 14:52:07 +0000</pubDate>
      <link>https://dev.to/captainchaozi/five-checks-for-a-useful-browser-based-crosshair-preview-4cbl</link>
      <guid>https://dev.to/captainchaozi/five-checks-for-a-useful-browser-based-crosshair-preview-4cbl</guid>
      <description>&lt;p&gt;A crosshair editor looks simple until the preview and the exported profile stop agreeing. If you are building or evaluating a browser-based editor, these are the checks that make the interface useful instead of decorative.&lt;/p&gt;

&lt;h2&gt;
  
  
  1. Treat the profile code as derived state
&lt;/h2&gt;

&lt;p&gt;The visible controls should be the source of truth. When color, opacity, outlines, center dot, inner lines, outer lines, or error settings change, regenerate the profile code from the same state used by the preview.&lt;/p&gt;

&lt;p&gt;Avoid maintaining a separate editable code string unless you also have a tested parser and a clear conflict-resolution rule. Two sources of truth create hard-to-explain mismatches.&lt;/p&gt;

&lt;h2&gt;
  
  
  2. Preview more than the standing state
&lt;/h2&gt;

&lt;p&gt;A static center preview misses movement and firing error behavior. Provide distinct standing, moving, and firing states so users can see whether the lines expand too far or whether feedback becomes distracting.&lt;/p&gt;

&lt;p&gt;The goal is not to reproduce every frame of the game. It is to expose the relationships between the configured values before the user imports the profile.&lt;/p&gt;

&lt;h2&gt;
  
  
  3. Use backgrounds as contrast tests
&lt;/h2&gt;

&lt;p&gt;A black grid is helpful for alignment, but it hides visibility problems. Include bright, dark, warm, and cool scenes. The user should be able to find the first background where the center becomes difficult to track.&lt;/p&gt;

&lt;p&gt;I used this checklist while reviewing the &lt;a href="https://crosshairmaker.com/?utm_source=dev.to&amp;amp;utm_medium=referral&amp;amp;utm_campaign=promotion#crosshair-codes"&gt;Crosshair Maker codes and presets workflow&lt;/a&gt;. Its editor keeps the generated profile code synchronized with the controls, offers standing, moving, and firing previews, and lets the same setup be checked against three backgrounds.&lt;/p&gt;

&lt;h2&gt;
  
  
  4. Make presets editable states, not dead examples
&lt;/h2&gt;

&lt;p&gt;A preset is most useful when it loads into the same editor as a hand-built setup. Users can start from a dot, a compact static style, or a dynamic example, then inspect which values produced it.&lt;/p&gt;

&lt;p&gt;Label presets as starting points. Do not imply that one setting is universally best or that a preset belongs to a professional player unless you have a reliable source.&lt;/p&gt;

&lt;h2&gt;
  
  
  5. Keep the in-client verification step visible
&lt;/h2&gt;

&lt;p&gt;A web preview cannot guarantee identical rendering at every resolution or after every game update. The final workflow should end with copying the profile code, importing it into the game, and checking it at the user's normal resolution.&lt;/p&gt;

&lt;p&gt;That limitation belongs in the product, not in fine print. It sets the right expectation and gives users a clear next step when a preview looks different in the client.&lt;/p&gt;

&lt;h2&gt;
  
  
  A compact implementation contract
&lt;/h2&gt;

&lt;p&gt;A useful first version should support:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;one state model for controls, preview, and generated code;&lt;/li&gt;
&lt;li&gt;separate standing, moving, and firing previews;&lt;/li&gt;
&lt;li&gt;several contrast backgrounds;&lt;/li&gt;
&lt;li&gt;editable presets;&lt;/li&gt;
&lt;li&gt;copy and reset actions;&lt;/li&gt;
&lt;li&gt;an explicit in-client verification note.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Crosshair Maker is an independent tool and is not affiliated with or endorsed by Riot Games. VALORANT is a trademark of Riot Games, Inc.&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>tutorial</category>
      <category>gamedev</category>
    </item>
    <item>
      <title>A practical checklist for validating Palworld 1.0 breeding data</title>
      <dc:creator>张文超</dc:creator>
      <pubDate>Wed, 15 Jul 2026 13:30:44 +0000</pubDate>
      <link>https://dev.to/captainchaozi/a-practical-checklist-for-validating-palworld-10-breeding-data-10bo</link>
      <guid>https://dev.to/captainchaozi/a-practical-checklist-for-validating-palworld-10-breeding-data-10bo</guid>
      <description>&lt;p&gt;When a breeding result stops matching an older guide, the fastest fix is usually not trying more random parent pairs. First verify which game version and dataset the calculator is using.&lt;/p&gt;

&lt;h2&gt;
  
  
  What I check
&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Supported game version.&lt;/strong&gt; A calculator should say whether it targets Palworld 1.0 or an earlier dataset.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Pinned source data.&lt;/strong&gt; Look for a source release, commit, dataset date, or checksum instead of a vague “updated” badge.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Both lookup directions.&lt;/strong&gt; Parents → Child helps when you already own two Pals. Target → Parents is better when you know the offspring you want.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Special rules.&lt;/strong&gt; Fixed pairs, same-species results, and gender-direction exceptions should not be flattened into one average-rank formula.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Explicit limits.&lt;/strong&gt; Species outcomes are different from passive inheritance, IV inheritance, mutation, cake timing, or shortest-route planning.&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  A small tool built around that workflow
&lt;/h2&gt;

&lt;p&gt;I built &lt;a href="https://palbreed.org/" rel="noopener noreferrer"&gt;PalBreed&lt;/a&gt; as a free, no-sign-in Palworld 1.0 breeding calculator. It supports both lookup directions and currently indexes 44,851 parent relationships.&lt;/p&gt;

&lt;p&gt;The more useful part for debugging is its &lt;a href="https://palbreed.org/data-status" rel="noopener noreferrer"&gt;data status page&lt;/a&gt;: it publishes the supported game version, dataset date, upstream release and commit, SHA-256 checksums, regression cases, and known limits.&lt;/p&gt;

&lt;p&gt;For players who want to inspect the whole relationship index rather than run one calculation, there is also a searchable &lt;a href="https://palbreed.org/breeding-combinations" rel="noopener noreferrer"&gt;breeding combinations list&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;PalBreed is an independent community tool and is not affiliated with Pocketpair. It currently calculates species outcomes only; it does not simulate passives, IVs, mutation, cake timing, shortest paths, or personal inventory.&lt;/p&gt;

</description>
      <category>data</category>
      <category>gamedev</category>
      <category>testing</category>
      <category>tutorial</category>
    </item>
    <item>
      <title>A Practical Workflow for Reusable AI Image Prompts</title>
      <dc:creator>张文超</dc:creator>
      <pubDate>Mon, 13 Jul 2026 20:39:22 +0000</pubDate>
      <link>https://dev.to/captainchaozi/a-practical-workflow-for-reusable-ai-image-prompts-3gkl</link>
      <guid>https://dev.to/captainchaozi/a-practical-workflow-for-reusable-ai-image-prompts-3gkl</guid>
      <description>&lt;p&gt;Most AI image experiments fail for a boring reason: the prompt is treated as a one-off sentence instead of a reusable specification.&lt;/p&gt;

&lt;p&gt;A reliable image workflow is closer to a small build system. It separates the parts that should stay stable from the parts that change between runs, records what produced each result, and gives reviewers something concrete to compare.&lt;/p&gt;

&lt;p&gt;This post describes a lightweight approach that works for product screenshots, article covers, social cards, diagrams, and campaign variants.&lt;/p&gt;

&lt;h2&gt;
  
  
  1. Start with a prompt contract
&lt;/h2&gt;

&lt;p&gt;Before writing prose, define the fields your workflow actually needs:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;subject&lt;/strong&gt;: the main object or scene&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;purpose&lt;/strong&gt;: cover, product mockup, ad, illustration, or reference asset&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;composition&lt;/strong&gt;: camera angle, framing, negative space, hierarchy&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;style&lt;/strong&gt;: photographic, editorial, diagrammatic, 3D, flat illustration&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;palette&lt;/strong&gt;: named colors or brand tokens&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;text policy&lt;/strong&gt;: no text, exact text, or editable placeholder&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;aspect ratio&lt;/strong&gt;: tied to the destination slot&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;constraints&lt;/strong&gt;: forbidden elements, privacy boundaries, brand rules&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;A prompt contract prevents the common failure mode where every revision rewrites the whole prompt and accidentally changes three unrelated decisions.&lt;/p&gt;

&lt;h2&gt;
  
  
  2. Store variables separately from the template
&lt;/h2&gt;

&lt;p&gt;Keep the reusable instruction as a template and pass the changing values as data.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight json"&gt;&lt;code&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"subject"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"a compact browser-based image workspace"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"purpose"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"developer tutorial cover"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"composition"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"editor panel on the left, generated variations on the right"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"style"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"clean editorial product illustration"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"palette"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="s2"&gt;"#111827"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"#2563EB"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"#F8FAFC"&lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"text_policy"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"no embedded text"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"aspect_ratio"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"16:9"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"constraints"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="s2"&gt;"no logos"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"no watermarks"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"no fake UI labels"&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This makes prompts diffable. A reviewer can see that a new run changed only the composition or palette instead of trying to infer changes from a paragraph.&lt;/p&gt;

&lt;h2&gt;
  
  
  3. Make reference images explicit
&lt;/h2&gt;

&lt;p&gt;Reference images should have roles, not just filenames.&lt;/p&gt;

&lt;p&gt;For example:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;reference A controls layout&lt;/li&gt;
&lt;li&gt;reference B controls material and lighting&lt;/li&gt;
&lt;li&gt;reference C controls color only&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;If the model supports multiple references, state which visual properties may transfer from each source. Also state what must &lt;em&gt;not&lt;/em&gt; transfer. This reduces accidental copying of text, logos, faces, or irrelevant background details.&lt;/p&gt;

&lt;h2&gt;
  
  
  4. Generate a small, intentional batch
&lt;/h2&gt;

&lt;p&gt;More output is not always more information. I usually generate three variants with one controlled difference:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;safe composition with clear hierarchy&lt;/li&gt;
&lt;li&gt;more expressive composition using the same palette&lt;/li&gt;
&lt;li&gt;simplified composition optimized for small-screen cropping&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;The batch becomes an experiment instead of a slot machine. If every variant changes subject, style, camera, and color simultaneously, you learn almost nothing from the comparison.&lt;/p&gt;

&lt;h2&gt;
  
  
  5. Score the result against the destination
&lt;/h2&gt;

&lt;p&gt;An image can look good and still fail its job. Review it against the actual slot:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Does the focal point survive the mobile crop?&lt;/li&gt;
&lt;li&gt;Is there enough quiet space for a headline added later?&lt;/li&gt;
&lt;li&gt;Does the image still read at thumbnail size?&lt;/li&gt;
&lt;li&gt;Are UI details plausible without pretending to be a literal screenshot?&lt;/li&gt;
&lt;li&gt;Are hands, text, charts, and small objects visually coherent?&lt;/li&gt;
&lt;li&gt;Does the file meet the expected dimensions and weight?&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;For Chinese teams testing GPT Image 2, I use the &lt;a href="https://gptimage2.yfyyu.com/?utm_source=dev.to&amp;amp;utm_medium=referral&amp;amp;utm_campaign=promotion"&gt;GPT Image 2 中文生成器&lt;/a&gt; as one workspace for prompt drafts, reference-image runs, saved prompts, and reusable scene templates. The important part is not the specific interface; it is keeping the prompt, references, output, and revision history together.&lt;/p&gt;

&lt;h2&gt;
  
  
  6. Save the winning prompt as a versioned asset
&lt;/h2&gt;

&lt;p&gt;A useful saved record includes:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight yaml"&gt;&lt;code&gt;&lt;span class="na"&gt;id&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;tutorial-cover-browser-workspace-v3&lt;/span&gt;
&lt;span class="na"&gt;model&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;gpt-image-2&lt;/span&gt;
&lt;span class="na"&gt;ratio&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;16:9&lt;/span&gt;
&lt;span class="na"&gt;references&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
  &lt;span class="pi"&gt;-&lt;/span&gt; &lt;span class="s"&gt;layout-grid.png&lt;/span&gt;
&lt;span class="na"&gt;prompt_template&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;tutorial-cover-v2&lt;/span&gt;
&lt;span class="na"&gt;variables&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
  &lt;span class="na"&gt;subject&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;browser-based image workspace&lt;/span&gt;
  &lt;span class="na"&gt;palette&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;dark-blue-neutral&lt;/span&gt;
&lt;span class="na"&gt;review&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
  &lt;span class="na"&gt;mobile_crop&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;pass&lt;/span&gt;
  &lt;span class="na"&gt;embedded_text&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;none&lt;/span&gt;
  &lt;span class="na"&gt;brand_fit&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;pass&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This is enough to recreate the direction later without pretending that image generation is perfectly deterministic.&lt;/p&gt;

&lt;h2&gt;
  
  
  7. Treat post-processing as part of the pipeline
&lt;/h2&gt;

&lt;p&gt;The generated master is rarely the final delivery asset. A practical pipeline may still need to:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;crop to the exact content slot&lt;/li&gt;
&lt;li&gt;export WebP or AVIF&lt;/li&gt;
&lt;li&gt;create 1x and 2x variants&lt;/li&gt;
&lt;li&gt;strip unnecessary metadata&lt;/li&gt;
&lt;li&gt;verify contrast after the page overlay is applied&lt;/li&gt;
&lt;li&gt;keep the original master for future crops&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Do not bake headlines into the image unless the destination truly requires it. HTML text is easier to edit, localize, test, and make accessible.&lt;/p&gt;

&lt;h2&gt;
  
  
  A compact operating loop
&lt;/h2&gt;

&lt;p&gt;The full loop can stay simple:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;define the slot&lt;/li&gt;
&lt;li&gt;fill the prompt contract&lt;/li&gt;
&lt;li&gt;assign reference-image roles&lt;/li&gt;
&lt;li&gt;generate three controlled variants&lt;/li&gt;
&lt;li&gt;review at final crop sizes&lt;/li&gt;
&lt;li&gt;save the winning prompt and metadata&lt;/li&gt;
&lt;li&gt;optimize the delivery files&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;That small amount of structure turns image generation from repeated improvisation into a workflow a team can reuse, review, and improve.&lt;/p&gt;

</description>
      <category>tutorial</category>
      <category>productivity</category>
      <category>ai</category>
      <category>webdev</category>
    </item>
    <item>
      <title>A practical checklist for formatting LinkedIn posts before you publish</title>
      <dc:creator>张文超</dc:creator>
      <pubDate>Sun, 12 Jul 2026 19:08:59 +0000</pubDate>
      <link>https://dev.to/captainchaozi/a-practical-checklist-for-formatting-linkedin-posts-before-you-publish-3904</link>
      <guid>https://dev.to/captainchaozi/a-practical-checklist-for-formatting-linkedin-posts-before-you-publish-3904</guid>
      <description>&lt;p&gt;LinkedIn posts are usually written in a messy place first: a notes app, a doc, a Slack draft, or directly inside the composer. The problem is not just grammar. The final post has to survive line breaks, character limits, hooks, links, hashtags, mentions, and the fact that Unicode styles can make text harder to read if they are overused.&lt;/p&gt;

&lt;p&gt;Here is the checklist I use before copying a post into LinkedIn.&lt;/p&gt;

&lt;h2&gt;
  
  
  1. Make the hook readable without decoration
&lt;/h2&gt;

&lt;p&gt;If the first two lines only work because they are bold, the hook is weak. Write the hook in plain text first, then add emphasis only if it helps scanning.&lt;/p&gt;

&lt;p&gt;A useful hook usually does one of these:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;names a specific problem&lt;/li&gt;
&lt;li&gt;states a concrete result&lt;/li&gt;
&lt;li&gt;contrasts two workflows&lt;/li&gt;
&lt;li&gt;asks a question the audience already has&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  2. Keep styled text rare
&lt;/h2&gt;

&lt;p&gt;Unicode bold and italic can be useful, but they are not the same as semantic HTML. Screen readers may spell out some styled characters, search behavior can be inconsistent, and copied text can look strange in other tools.&lt;/p&gt;

&lt;p&gt;I keep styling to:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;one short bold phrase near the top&lt;/li&gt;
&lt;li&gt;section labels when the post is long&lt;/li&gt;
&lt;li&gt;no styling inside URLs, emails, hashtags, or @mentions&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  3. Check the post shape before checking the words
&lt;/h2&gt;

&lt;p&gt;A LinkedIn post often fails because of shape, not content. Before editing sentence by sentence, zoom out:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Are there too many one-line paragraphs?&lt;/li&gt;
&lt;li&gt;Is every bullet doing real work?&lt;/li&gt;
&lt;li&gt;Does the post still make sense if someone reads only the first and last paragraph?&lt;/li&gt;
&lt;li&gt;Is the CTA visible without being shouty?&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  4. Protect links, hashtags, and mentions
&lt;/h2&gt;

&lt;p&gt;This is the easiest place to break a post. Do not apply Unicode styling to:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;URLs&lt;/li&gt;
&lt;li&gt;email addresses&lt;/li&gt;
&lt;li&gt;@mentions&lt;/li&gt;
&lt;li&gt;hashtags&lt;/li&gt;
&lt;li&gt;code snippets&lt;/li&gt;
&lt;li&gt;product names that must be searchable exactly&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;I usually format the body first, then paste links and hashtags back in plain text.&lt;/p&gt;

&lt;h2&gt;
  
  
  5. Preview before posting
&lt;/h2&gt;

&lt;p&gt;The composer is not a great drafting environment. A preview step helps catch issues like a hook that wraps badly on mobile, a post that crosses the 3000-character limit, or a styled phrase that looks heavier than expected.&lt;/p&gt;

&lt;p&gt;I built a small free workbench for this workflow: &lt;a href="https://socialtexttools.net/?utm_source=dev.to&amp;amp;utm_medium=referral&amp;amp;utm_campaign=promotion#tool"&gt;Social Text Tools LinkedIn Text Formatter&lt;/a&gt;. It lets you draft LinkedIn text, apply Unicode styles, keep sensitive tokens plain with safe mode, preview the result, and copy the final version.&lt;/p&gt;

&lt;p&gt;The main habit is simple: finish the message in plain language first, then use formatting to improve scanning. Formatting should make a good post easier to read, not hide a weak one.&lt;/p&gt;

</description>
      <category>productivity</category>
    </item>
    <item>
      <title>Compress an MP4 in the browser before you upload it</title>
      <dc:creator>张文超</dc:creator>
      <pubDate>Fri, 03 Jul 2026 13:44:14 +0000</pubDate>
      <link>https://dev.to/captainchaozi/compress-an-mp4-in-the-browser-before-you-upload-it-38lj</link>
      <guid>https://dev.to/captainchaozi/compress-an-mp4-in-the-browser-before-you-upload-it-38lj</guid>
      <description>&lt;p&gt;Most video upload problems are not editing problems. They are file-size problems.&lt;/p&gt;

&lt;p&gt;Someone has a screen recording, a quick phone clip, or a short demo, and the destination has a hard limit: an email attachment, a support form, a chat app, a course platform, or a social upload flow. The common reaction is to open a full editor, guess an export preset, wait, check the output, and then repeat.&lt;/p&gt;

&lt;p&gt;A simpler workflow is to start with the target file size.&lt;/p&gt;

&lt;h2&gt;
  
  
  A practical target-size workflow
&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;Keep the original video.&lt;/li&gt;
&lt;li&gt;Decide the real limit you need to stay under.&lt;/li&gt;
&lt;li&gt;Leave a little buffer instead of aiming exactly at the limit.&lt;/li&gt;
&lt;li&gt;Compress to that target.&lt;/li&gt;
&lt;li&gt;Reopen the output and check text, faces, motion, and audio before sending it.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;That last step matters because tight targets are tradeoffs. A short 1080p clip can often shrink cleanly. A long, noisy, high-motion recording may need a lower resolution or a less aggressive target. No browser tool or encoder can make every video hit every size without visible loss.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why browser-local compression helps
&lt;/h2&gt;

&lt;p&gt;For quick sharing tasks, I prefer tools that do not require uploading the original video to a remote compression queue first. It reduces friction for private review clips, internal demos, customer support recordings, and files that simply do not need to leave the browser before export.&lt;/p&gt;

&lt;p&gt;I have been using &lt;a href="https://compressmp4.org/?utm_source=dev.to&amp;amp;utm_medium=referral&amp;amp;utm_campaign=promotion"&gt;CompressMP4&lt;/a&gt; for this exact case. It lets you choose a percentage or a target MB, processes the selected video in the browser, and gives you a smaller MP4 download without requiring an account for the public compressor.&lt;/p&gt;

&lt;h2&gt;
  
  
  When this is a good fit
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;You need a smaller MP4 for email, chat, a form, or a social upload.&lt;/li&gt;
&lt;li&gt;You know the target size but do not want to think in bitrate settings.&lt;/li&gt;
&lt;li&gt;You want a quick browser workflow rather than a full video editor.&lt;/li&gt;
&lt;li&gt;You are working with a file where local browser processing is preferable to a server-side upload queue.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  When to use something else
&lt;/h2&gt;

&lt;p&gt;Use a full editor or transcoding tool if you need batch jobs, exact codec control, subtitles, trimming, watermarks, team presets, or server-side automation. For very large or long videos, local browser compression can also be slower than a dedicated desktop or server workflow.&lt;/p&gt;

&lt;p&gt;For the common "this video is too large to send" case, though, starting with a target size is usually the fastest path.&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>productivity</category>
      <category>video</category>
      <category>tutorial</category>
    </item>
    <item>
      <title>How I stopped collecting random agent skills and started building reusable workflow collections</title>
      <dc:creator>张文超</dc:creator>
      <pubDate>Mon, 18 May 2026 01:49:43 +0000</pubDate>
      <link>https://dev.to/captainchaozi/how-i-stopped-collecting-random-agent-skills-and-started-building-reusable-workflow-collections-55na</link>
      <guid>https://dev.to/captainchaozi/how-i-stopped-collecting-random-agent-skills-and-started-building-reusable-workflow-collections-55na</guid>
      <description>&lt;p&gt;Most people do not have a skill discovery problem for very long.&lt;/p&gt;

&lt;p&gt;After a few days with Claude Code, Codex, Cursor, or other agent tools, the problem changes.&lt;/p&gt;

&lt;p&gt;You find a few useful skills on GitHub. You install some. You bookmark others. Then your setup turns into a pile of disconnected commands, repos, and half-remembered &lt;code&gt;SKILL.md&lt;/code&gt; files.&lt;/p&gt;

&lt;p&gt;That is where I started too.&lt;/p&gt;

&lt;p&gt;The missing piece was not "more skills". It was a better way to organize skills around repeatable work.&lt;/p&gt;

&lt;h2&gt;
  
  
  The real problem: skills without workflow context
&lt;/h2&gt;

&lt;p&gt;A single skill can be useful on its own.&lt;/p&gt;

&lt;p&gt;But in real work, skills usually come in groups:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;research + synthesis + writing&lt;/li&gt;
&lt;li&gt;SEO analysis + content planning + localization&lt;/li&gt;
&lt;li&gt;design review + image generation + asset upload&lt;/li&gt;
&lt;li&gt;bug triage + reproduction + code review&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;If those groups only live in your memory, you keep rebuilding the same workflow every week.&lt;/p&gt;

&lt;p&gt;That is why I started thinking in collections instead of one-off installs.&lt;/p&gt;

&lt;h2&gt;
  
  
  1. Save skills by job, not by hype
&lt;/h2&gt;

&lt;p&gt;The easiest mistake is collecting skills because they look impressive.&lt;/p&gt;

&lt;p&gt;A better filter is:&lt;/p&gt;

&lt;p&gt;"Would I install this again for a specific job?"&lt;/p&gt;

&lt;p&gt;If the answer is yes, put it into a workflow bucket.&lt;/p&gt;

&lt;p&gt;For example:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;content workflow&lt;/li&gt;
&lt;li&gt;landing page workflow&lt;/li&gt;
&lt;li&gt;image workflow&lt;/li&gt;
&lt;li&gt;code review workflow&lt;/li&gt;
&lt;li&gt;growth workflow&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;That makes a skill directory much more useful, because you are no longer asking "What is popular?" You are asking "What helps with this job?"&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjak9j8c6rahytz8zefx0.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjak9j8c6rahytz8zefx0.png" alt="Agent Skills Finder home directory overview" width="800" height="611"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  2. Evaluate the skill before you add it to a workflow
&lt;/h2&gt;

&lt;p&gt;I also stopped saving skills based on repo names alone.&lt;/p&gt;

&lt;p&gt;Before a skill goes into one of my workflow collections, I want to inspect:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;what the skill actually promises to do&lt;/li&gt;
&lt;li&gt;whether the &lt;code&gt;SKILL.md&lt;/code&gt; is specific or vague&lt;/li&gt;
&lt;li&gt;whether the file tree suggests real implementation or just a thin wrapper&lt;/li&gt;
&lt;li&gt;whether the install command is clear&lt;/li&gt;
&lt;li&gt;whether there are any comments, ratings, or other signals worth checking&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;That is why I like directories that let me inspect the skill before I install it. Lately I have been using &lt;a href="https://agentskillsfinder.com/collections?utm_source=dev_to" rel="noopener noreferrer"&gt;Agent Skills Finder collections&lt;/a&gt; as the place where I group candidate skills by workflow after checking the details first.&lt;/p&gt;

&lt;p&gt;It is still a discovery and evaluation layer, not a security audit. I still review third-party code and instructions before enabling anything in a real workspace.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2n7qfly5426v8twablbm.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2n7qfly5426v8twablbm.png" alt="Agent Skills Finder detail page for install and file inspection" width="800" height="474"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  3. Keep the collection small enough to be reusable
&lt;/h2&gt;

&lt;p&gt;The goal is not to create a giant archive.&lt;/p&gt;

&lt;p&gt;The goal is to create small, reusable sets that match the way you actually work.&lt;/p&gt;

&lt;p&gt;I have found that 3 to 7 skills per collection is usually enough.&lt;/p&gt;

&lt;p&gt;More than that, and the collection becomes a wishlist instead of a workflow.&lt;/p&gt;

&lt;p&gt;A useful collection should answer one practical question:&lt;/p&gt;

&lt;p&gt;"If I need to do this job tomorrow, which skills would I reach for first?"&lt;/p&gt;

&lt;h2&gt;
  
  
  4. Write one sentence for why each skill belongs there
&lt;/h2&gt;

&lt;p&gt;This sounds minor, but it matters.&lt;/p&gt;

&lt;p&gt;If you cannot explain why a skill belongs in a collection, it probably does not belong there yet.&lt;/p&gt;

&lt;p&gt;A one-line note is often enough:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;"Use this to inspect repo structure before editing."&lt;/li&gt;
&lt;li&gt;"Use this for draft generation after keyword clustering."&lt;/li&gt;
&lt;li&gt;"Use this after code review to create release notes."&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;That short explanation becomes the bridge between a list of skills and a workflow that someone else can actually reuse.&lt;/p&gt;

&lt;h2&gt;
  
  
  5. Revisit collections after real usage, not right after discovery
&lt;/h2&gt;

&lt;p&gt;The best time to refine a workflow collection is after you used it in actual work.&lt;/p&gt;

&lt;p&gt;That is when you notice:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;which skills overlap too much&lt;/li&gt;
&lt;li&gt;which ones look good but are never actually used&lt;/li&gt;
&lt;li&gt;which missing step keeps forcing you back to manual work&lt;/li&gt;
&lt;li&gt;which skill deserves to move into a different collection&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This is also why I no longer treat discovery as the finish line.&lt;/p&gt;

&lt;p&gt;Discovery is only step one. Reuse is the real test.&lt;/p&gt;

&lt;h2&gt;
  
  
  Final thought
&lt;/h2&gt;

&lt;p&gt;For agent tooling, the hard part is not finding one more skill.&lt;/p&gt;

&lt;p&gt;The hard part is turning a scattered set of installs into a workflow you can repeat, share, and improve.&lt;/p&gt;

&lt;p&gt;Once I started organizing skills as collections tied to real jobs, the whole setup became much easier to use.&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjak9j8c6rahytz8zefx0.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjak9j8c6rahytz8zefx0.png" alt=" " width="800" height="611"&gt;&lt;/a&gt;&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2n7qfly5426v8twablbm.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2n7qfly5426v8twablbm.png" alt=" " width="800" height="474"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>ai</category>
      <category>productivity</category>
      <category>tutorial</category>
      <category>webdev</category>
    </item>
    <item>
      <title>How I turned one-off AI image prompts into reusable templates for social and product visuals</title>
      <dc:creator>张文超</dc:creator>
      <pubDate>Mon, 18 May 2026 01:43:42 +0000</pubDate>
      <link>https://dev.to/captainchaozi/how-i-turned-one-off-ai-image-prompts-into-reusable-templates-for-social-and-product-visuals-5hg5</link>
      <guid>https://dev.to/captainchaozi/how-i-turned-one-off-ai-image-prompts-into-reusable-templates-for-social-and-product-visuals-5hg5</guid>
      <description>&lt;p&gt;Most prompt advice focuses on how to get one good image.&lt;/p&gt;

&lt;p&gt;That helps when you are exploring. It is much less useful when you need to make visuals every week for product updates, blog covers, social posts, launch cards, or e-commerce campaigns.&lt;/p&gt;

&lt;p&gt;The real problem is usually not prompt quality. It is workflow repeatability.&lt;/p&gt;

&lt;p&gt;If a prompt works once, can you turn it into something the next person on your team can reuse without starting from a blank box again?&lt;/p&gt;

&lt;p&gt;Here is the lightweight system I have been using to make AI image prompts more reusable.&lt;/p&gt;

&lt;h2&gt;
  
  
  1. Stop saving prompts as plain text snippets
&lt;/h2&gt;

&lt;p&gt;A prompt alone is missing too much context.&lt;/p&gt;

&lt;p&gt;When I revisit an old prompt a week later, I usually need answers to these questions:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;What job was this image doing?&lt;/li&gt;
&lt;li&gt;Which aspect ratio was it designed for?&lt;/li&gt;
&lt;li&gt;Was it meant for a social card, product visual, ad draft, or blog cover?&lt;/li&gt;
&lt;li&gt;Did it need empty space for text?&lt;/li&gt;
&lt;li&gt;Which parts looked reliable, and which parts still needed manual review?&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Without that context, even a strong prompt becomes hard to reuse.&lt;/p&gt;

&lt;p&gt;So instead of saving only the text, save a small template unit:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;the prompt&lt;/li&gt;
&lt;li&gt;the best output image&lt;/li&gt;
&lt;li&gt;the intended use case&lt;/li&gt;
&lt;li&gt;the aspect ratio&lt;/li&gt;
&lt;li&gt;the visual constraints&lt;/li&gt;
&lt;li&gt;a short note on what should change next time&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;That turns a prompt from a lucky result into a reusable asset.&lt;/p&gt;

&lt;h2&gt;
  
  
  2. Separate the fixed structure from the changing variables
&lt;/h2&gt;

&lt;p&gt;For recurring visuals, I now split prompts into two parts.&lt;/p&gt;

&lt;p&gt;Fixed structure:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;layout&lt;/li&gt;
&lt;li&gt;camera angle or composition&lt;/li&gt;
&lt;li&gt;subject type&lt;/li&gt;
&lt;li&gt;spacing for headline or CTA&lt;/li&gt;
&lt;li&gt;lighting direction&lt;/li&gt;
&lt;li&gt;background rules&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Variables:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;campaign theme&lt;/li&gt;
&lt;li&gt;product name&lt;/li&gt;
&lt;li&gt;seasonal details&lt;/li&gt;
&lt;li&gt;color direction&lt;/li&gt;
&lt;li&gt;audience-specific language&lt;/li&gt;
&lt;li&gt;reference image&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This makes it much easier to create variants without rewriting the entire prompt every time.&lt;/p&gt;

&lt;p&gt;For example, a template for a product launch card can keep the same composition and text-safe area, while only changing the product context, color palette, and campaign angle.&lt;/p&gt;

&lt;h2&gt;
  
  
  3. Organize prompts by visual job, not by style buzzwords
&lt;/h2&gt;

&lt;p&gt;A lot of prompt libraries become hard to use because they are grouped by style labels like "cinematic", "modern", or "minimalist".&lt;/p&gt;

&lt;p&gt;That is not usually how teams work.&lt;/p&gt;

&lt;p&gt;The more useful structure is by output job:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;blog cover&lt;/li&gt;
&lt;li&gt;social post&lt;/li&gt;
&lt;li&gt;promo banner&lt;/li&gt;
&lt;li&gt;product concept image&lt;/li&gt;
&lt;li&gt;comparison visual&lt;/li&gt;
&lt;li&gt;infographic draft&lt;/li&gt;
&lt;li&gt;thumbnail&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;That is also why template-driven tools feel more practical than generic generators when the goal is real content production.&lt;/p&gt;

&lt;p&gt;If I need a starting point for a campaign visual, I would rather open a category of reusable prompt workflows than stare at an empty prompt box. Lately I have been testing that approach in &lt;a href="https://gpt-image-prompt.com/template?utm_source=dev_to" rel="noopener noreferrer"&gt;GPT Image Prompt&lt;/a&gt;, mainly because the template view is closer to how actual content work is organized.&lt;/p&gt;

&lt;p&gt;It is still a draft workspace, not a final approval system. You still need to review text rendering, brand accuracy, product details, and rights before publishing anything externally.&lt;/p&gt;

&lt;h2&gt;
  
  
  4. Use the output as part of the next input
&lt;/h2&gt;

&lt;p&gt;One thing that changed my workflow a lot: once a visual direction works, the generated image should become part of the next round.&lt;/p&gt;

&lt;p&gt;That means:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;reuse the same prompt with smaller edits&lt;/li&gt;
&lt;li&gt;attach the last good image as a reference&lt;/li&gt;
&lt;li&gt;keep a note about what should stay stable&lt;/li&gt;
&lt;li&gt;only change one or two variables at a time&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This reduces the common problem where every new attempt drifts into a completely different composition.&lt;/p&gt;

&lt;p&gt;For social and product visuals, that stability matters more than novelty.&lt;/p&gt;

&lt;h2&gt;
  
  
  5. Review templates like code, not like inspiration
&lt;/h2&gt;

&lt;p&gt;If a prompt is going to be reused, review it the same way you would review a reusable component:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Is the output consistent?&lt;/li&gt;
&lt;li&gt;Does it fail in predictable ways?&lt;/li&gt;
&lt;li&gt;Does it leave enough room for copy?&lt;/li&gt;
&lt;li&gt;Does it break when you swap in a different product or theme?&lt;/li&gt;
&lt;li&gt;Can someone else on the team use it without extra explanation?&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;That mindset makes AI image work a lot less random.&lt;/p&gt;

&lt;h2&gt;
  
  
  Final thought
&lt;/h2&gt;

&lt;p&gt;The useful shift is simple: stop treating image prompts as one-time instructions and start treating them as reusable templates for recurring visual jobs.&lt;/p&gt;

&lt;p&gt;Once you do that, AI image generation becomes much more practical for newsletters, product updates, social content, and e-commerce drafts.&lt;/p&gt;

</description>
      <category>ai</category>
      <category>productivity</category>
      <category>tutorial</category>
      <category>webdev</category>
    </item>
    <item>
      <title>How I Evaluate Agent Skills Before Installing Them</title>
      <dc:creator>张文超</dc:creator>
      <pubDate>Fri, 15 May 2026 10:10:04 +0000</pubDate>
      <link>https://dev.to/captainchaozi/how-i-evaluate-agent-skills-before-installing-them-3de6</link>
      <guid>https://dev.to/captainchaozi/how-i-evaluate-agent-skills-before-installing-them-3de6</guid>
      <description>&lt;p&gt;Most agent skills are still discovered through scattered GitHub repositories, screenshots, and chat recommendations. That makes the install step easy to rush and the evaluation step easy to skip.&lt;/p&gt;

&lt;p&gt;After a few avoidable bad installs, I settled on a simple review workflow before I enable any third-party skill in Claude Code, Codex, Cursor, OpenClaw, or a similar agent setup.&lt;/p&gt;

&lt;h2&gt;
  
  
  What I check first
&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;I read the actual SKILL.md instead of stopping at the repository name.&lt;/li&gt;
&lt;li&gt;I compare the install command with the tool I am using right now.&lt;/li&gt;
&lt;li&gt;I inspect the file tree so I know how large the skill is and what it touches.&lt;/li&gt;
&lt;li&gt;I look for author context, stars, comments, ratings, or any other community signal.&lt;/li&gt;
&lt;li&gt;I save the good candidates somewhere instead of repeating the same search next week.&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  Why this matters
&lt;/h2&gt;

&lt;p&gt;A lot of skill discovery still happens through random links. That is fine for inspiration, but it is a weak way to make installation decisions.&lt;/p&gt;

&lt;p&gt;If I cannot quickly inspect the instructions, the file layout, and the surrounding signals, I am much more likely to install something I do not actually understand.&lt;/p&gt;

&lt;h2&gt;
  
  
  My current workflow
&lt;/h2&gt;

&lt;p&gt;I now start from a directory view, shortlist a few relevant skills by workflow, open each detail page, compare the instructions side by side, and only then decide what to install in a real workspace.&lt;/p&gt;

&lt;p&gt;One directory that makes this easier is Agent Skills Finder:&lt;br&gt;
&lt;a href="https://agentskillsfinder.com/?utm_source=target_4_dev_to_tech_blog" rel="noopener noreferrer"&gt;https://agentskillsfinder.com/?utm_source=target_4_dev_to_tech_blog&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;It is a searchable directory for discovering agent skills before you install them. You can inspect real SKILL.md files, compare install commands, review file trees, and check community signals before enabling a third-party skill.&lt;/p&gt;

&lt;h2&gt;
  
  
  Who this is useful for
&lt;/h2&gt;

&lt;p&gt;This workflow is especially useful if you regularly switch between Claude Code, Codex, Cursor, OpenClaw, or other agent tools and do not want every install decision to start from scratch.&lt;/p&gt;

&lt;p&gt;It is also useful for teams that want a more repeatable way to compare third-party skills before they enter a shared workflow.&lt;/p&gt;

&lt;h2&gt;
  
  
  The point
&lt;/h2&gt;

&lt;p&gt;A good skill workflow starts with inspection, not impulse. If you can evaluate the actual files and instructions first, you make fewer bad installs and build a more reusable skill stack over time.&lt;/p&gt;

</description>
      <category>ai</category>
      <category>productivity</category>
      <category>tutorial</category>
      <category>webdev</category>
    </item>
    <item>
      <title>A practical prompt workflow for repeatable AI marketing visuals</title>
      <dc:creator>张文超</dc:creator>
      <pubDate>Mon, 11 May 2026 08:14:09 +0000</pubDate>
      <link>https://dev.to/captainchaozi/a-practical-prompt-workflow-for-repeatable-ai-marketing-visuals-5f96</link>
      <guid>https://dev.to/captainchaozi/a-practical-prompt-workflow-for-repeatable-ai-marketing-visuals-5f96</guid>
      <description>&lt;p&gt;Most AI image experiments start the same way: you write a prompt, get one interesting result, tweak a few words, and then lose track of what actually worked.&lt;/p&gt;

&lt;p&gt;That is fine for play. It breaks down when you need to produce the same kind of visual every week: launch graphics, product mockups, blog covers, social cards, ad concepts, or simple infographics.&lt;/p&gt;

&lt;p&gt;The useful shift is to stop treating the prompt as a single text box and start treating it as a small workflow.&lt;/p&gt;

&lt;h2&gt;
  
  
  1. Start with the job, not the style
&lt;/h2&gt;

&lt;p&gt;Before writing any prompt, define the visual job:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;What is this image supposed to help someone understand?&lt;/li&gt;
&lt;li&gt;Where will it appear?&lt;/li&gt;
&lt;li&gt;What aspect ratio does that surface expect?&lt;/li&gt;
&lt;li&gt;Does the image need empty space for a headline or UI overlay?&lt;/li&gt;
&lt;li&gt;Which parts must be reviewed manually before publishing?&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;For example, "a futuristic illustration" is too loose. "A 16:9 blog cover for a post about API image generation, with clear empty space on the left for a title" is much easier to iterate.&lt;/p&gt;

&lt;h2&gt;
  
  
  2. Separate stable constraints from variables
&lt;/h2&gt;

&lt;p&gt;A reusable prompt should have two layers.&lt;/p&gt;

&lt;p&gt;Stable constraints:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;format and aspect ratio&lt;/li&gt;
&lt;li&gt;subject&lt;/li&gt;
&lt;li&gt;composition&lt;/li&gt;
&lt;li&gt;brand or product context&lt;/li&gt;
&lt;li&gt;text-safe area&lt;/li&gt;
&lt;li&gt;lighting or material rules&lt;/li&gt;
&lt;li&gt;things to avoid&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Variables:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;audience&lt;/li&gt;
&lt;li&gt;campaign theme&lt;/li&gt;
&lt;li&gt;color direction&lt;/li&gt;
&lt;li&gt;object details&lt;/li&gt;
&lt;li&gt;seasonal or product-specific copy&lt;/li&gt;
&lt;li&gt;image reference&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;That split makes it easier to reuse one workflow for multiple outputs without rewriting everything.&lt;/p&gt;

&lt;h2&gt;
  
  
  3. Keep a reference prompt library
&lt;/h2&gt;

&lt;p&gt;The biggest time sink is not writing prompts. It is rediscovering prompts you already wrote.&lt;/p&gt;

&lt;p&gt;A useful library does not need to be complex. Save:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;the prompt&lt;/li&gt;
&lt;li&gt;the output image&lt;/li&gt;
&lt;li&gt;the category or use case&lt;/li&gt;
&lt;li&gt;what you would change next time&lt;/li&gt;
&lt;li&gt;whether the result was safe enough for public use&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;If you work on marketing or product content, categories like poster, social card, product concept, infographic, app screenshot style, and event visual are more useful than generic style tags.&lt;/p&gt;

&lt;h2&gt;
  
  
  4. Use generated results as inputs
&lt;/h2&gt;

&lt;p&gt;Once you get a strong direction, the result should become part of the next iteration. Reference-image workflows are useful because they let you keep composition, subject shape, or mood while changing the next prompt.&lt;/p&gt;

&lt;p&gt;That is also why I like tools that combine prompt examples, reference images, and history instead of only giving me an empty prompt box. I have been testing this workflow in &lt;a href="https://gpt-image-prompt.com/model/gpt-image-2?utm_source=dev_to" rel="noopener noreferrer"&gt;GPT Image Prompt&lt;/a&gt;, which keeps the generator, examples, saved prompts, and previous results close together.&lt;/p&gt;

&lt;p&gt;The product is still best treated as a draft and exploration workspace. You still need to review text, brand accuracy, rights, and final production quality yourself.&lt;/p&gt;

&lt;h2&gt;
  
  
  5. Review before reuse
&lt;/h2&gt;

&lt;p&gt;Before reusing a prompt, check:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Does it produce consistent composition?&lt;/li&gt;
&lt;li&gt;Does it preserve important product details?&lt;/li&gt;
&lt;li&gt;Does it make text or labels that need correction?&lt;/li&gt;
&lt;li&gt;Is the result acceptable as a draft, or only as inspiration?&lt;/li&gt;
&lt;li&gt;Can the prompt be turned into a template for future work?&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This review step is what turns a good accident into a repeatable asset.&lt;/p&gt;

&lt;h2&gt;
  
  
  Final thought
&lt;/h2&gt;

&lt;p&gt;For AI visuals, the prompt is only one part of the system. The repeatable value comes from the loop around it: template, prompt, reference image, output, review, and saved history.&lt;/p&gt;

&lt;p&gt;Once that loop exists, image generation becomes less random and much easier to use in real content work.&lt;/p&gt;

</description>
      <category>ai</category>
      <category>webdev</category>
      <category>productivity</category>
      <category>tutorial</category>
    </item>
    <item>
      <title>Agent Skills Are Getting Easier to Build, But Still Hard to Use</title>
      <dc:creator>张文超</dc:creator>
      <pubDate>Mon, 13 Apr 2026 08:34:45 +0000</pubDate>
      <link>https://dev.to/captainchaozi/agent-skills-are-getting-easier-to-build-but-still-hard-to-use-35j</link>
      <guid>https://dev.to/captainchaozi/agent-skills-are-getting-easier-to-build-but-still-hard-to-use-35j</guid>
      <description>&lt;p&gt;Agent Skills Are Getting Easier to Build, But Still Hard to Use&lt;/p&gt;

&lt;p&gt;If you have spent any time with agent skills recently, you have probably had the same experience.&lt;/p&gt;

&lt;p&gt;You find a promising skill on GitHub. Then you open another one. Then five more. One repo has a good &lt;code&gt;SKILL.md&lt;/code&gt; but weak install instructions. Another looks useful but gives you no clear signal about whether it is still worth installing. A third might solve only part of your workflow, so now you also need two more skills and some way to remember how they fit together.&lt;/p&gt;

&lt;p&gt;That is the real bottleneck right now.&lt;/p&gt;

&lt;p&gt;The problem is no longer that agent skills do not exist. The problem is that using them well still takes too much manual work.&lt;/p&gt;

&lt;p&gt;Anthropic describes skills as folders that include instructions, scripts, and resources that agents can load when needed, and its SDK docs describe them as &lt;code&gt;SKILL.md&lt;/code&gt;-based packages that Claude can invoke autonomously when relevant. OpenAI is pushing in a similar direction, with reusable skills in hosted and local shell environments, plus subagent workflows for more complex work. In other words, this is no longer a niche pattern. It is becoming part of how modern coding agents are extended and organized. :contentReference[oaicite:0]{index=0}&lt;/p&gt;

&lt;p&gt;But once you move from the idea of skills to actually using them, the friction shows up fast.&lt;/p&gt;

&lt;h2&gt;
  
  
  Where people get stuck with agent skills
&lt;/h2&gt;

&lt;h3&gt;
  
  
  1. Discovery is still messy
&lt;/h3&gt;

&lt;p&gt;The ecosystem is growing quickly. One public curated repository already describes itself as a collection of &lt;strong&gt;1000+ agent skills&lt;/strong&gt; across Claude Code, Codex, Gemini CLI, Cursor, and more. That sounds great until you are the person trying to find the &lt;em&gt;right&lt;/em&gt; one for a real task. :contentReference[oaicite:1]{index=1}&lt;/p&gt;

&lt;p&gt;Most users are still doing some version of this:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;search GitHub&lt;/li&gt;
&lt;li&gt;open repos one by one&lt;/li&gt;
&lt;li&gt;guess from repo names&lt;/li&gt;
&lt;li&gt;skim &lt;code&gt;SKILL.md&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;copy install commands by hand&lt;/li&gt;
&lt;li&gt;hope they picked the right thing&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;That is not a smooth workflow. It is directory hunting.&lt;/p&gt;

&lt;h3&gt;
  
  
  2. Installability and discoverability are inconsistent
&lt;/h3&gt;

&lt;p&gt;This is one of the least glamorous problems, but it wastes a lot of time.&lt;/p&gt;

&lt;p&gt;You can see ecosystem issues where local skills are not recognized automatically, forcing users to read the &lt;code&gt;SKILL.md&lt;/code&gt; manually and follow the workflow by hand. You can also see cases where individual skills were not exposed as separate installable entries, so users could not discover or install them cleanly. Even tool authors are discussing where skill files should land because a standard discovery path is still emerging. :contentReference[oaicite:2]{index=2}&lt;/p&gt;

&lt;p&gt;That means the work is often not “use the skill.”&lt;br&gt;&lt;br&gt;
It is “figure out how this particular skill expects to be found.”&lt;/p&gt;

&lt;h3&gt;
  
  
  3. It is hard to judge a skill before you install it
&lt;/h3&gt;

&lt;p&gt;A GitHub repo can tell you almost nothing about whether a skill is worth your time.&lt;/p&gt;

&lt;p&gt;Stars help a little, but not much. A repo title helps even less. What people actually need before installing is more practical:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;what this skill really does&lt;/li&gt;
&lt;li&gt;how it is meant to be used&lt;/li&gt;
&lt;li&gt;what files it includes&lt;/li&gt;
&lt;li&gt;whether it overlaps with another option&lt;/li&gt;
&lt;li&gt;whether other users found it useful&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Without that, installation becomes trial and error.&lt;/p&gt;

&lt;h3&gt;
  
  
  4. Real work usually needs more than one skill
&lt;/h3&gt;

&lt;p&gt;A single skill rarely completes an end-to-end workflow.&lt;/p&gt;

&lt;p&gt;You might use one skill for search, another for content cleanup, another for document output, and another for review. OpenAI’s subagent documentation points in the same direction: useful agent workflows are often multi-step and parallel, not single-command tricks. :contentReference[oaicite:3]{index=3}&lt;/p&gt;

&lt;p&gt;The practical problem is not just finding one skill. It is building a repeatable stack of skills that works together.&lt;/p&gt;

&lt;h3&gt;
  
  
  5. Good skills are easy to lose
&lt;/h3&gt;

&lt;p&gt;Even after you find something useful, the next problem appears a week later:&lt;/p&gt;

&lt;p&gt;“Where was that skill I used for this?”&lt;/p&gt;

&lt;p&gt;Most people end up with browser tabs, bookmarks, notes, or a half-remembered repo name. That is a bad retrieval system for something you expect to reuse.&lt;/p&gt;

&lt;h2&gt;
  
  
  What should exist instead
&lt;/h2&gt;

&lt;p&gt;A good agent-skill product should reduce four kinds of friction:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Discovery friction&lt;/strong&gt;: help people search by task, category, and workflow, not just repo name
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Decision friction&lt;/strong&gt;: help people inspect a skill before installation
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Reuse friction&lt;/strong&gt;: help people save good skills and return to them later
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Workflow friction&lt;/strong&gt;: help people group multiple skills into something repeatable&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;That is exactly why &lt;strong&gt;Agent Skills Finder&lt;/strong&gt; is useful.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why Agent Skills Finder is worth recommending
&lt;/h2&gt;

&lt;p&gt;Agent Skills Finder is not trying to be “yet another list of GitHub repos.”&lt;/p&gt;

&lt;p&gt;Its core job is much more practical: help users move from &lt;strong&gt;“I need a skill”&lt;/strong&gt; to &lt;strong&gt;“I know which one to install, and why.”&lt;/strong&gt; That product direction is explicit in the current PRD, and the implemented feature set follows that idea closely. :contentReference[oaicite:4]{index=4}&lt;/p&gt;

&lt;p&gt;Here is what makes it valuable in real use.&lt;/p&gt;

&lt;h3&gt;
  
  
  1. It gives people more than one way to find a skill
&lt;/h3&gt;

&lt;p&gt;Instead of forcing users to search GitHub blindly, the site supports browsing from the homepage, hot lists, new lists, categories, tags, and search results. It uses a category and tag structure so users can narrow by workflow direction before opening individual skill pages. :contentReference[oaicite:5]{index=5}&lt;/p&gt;

&lt;p&gt;That matters because most users do not start with a repo name.&lt;br&gt;&lt;br&gt;
They start with a job to do.&lt;/p&gt;

&lt;h3&gt;
  
  
  2. It turns the skill page into a decision page
&lt;/h3&gt;

&lt;p&gt;This is the strongest part of the product.&lt;/p&gt;

&lt;p&gt;The skill detail page is not just a link-out page. It is built to help users decide before installing. According to the current product spec, users can review:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;structured overview content&lt;/li&gt;
&lt;li&gt;how-to-use and FAQ sections&lt;/li&gt;
&lt;li&gt;install commands&lt;/li&gt;
&lt;li&gt;recursive GitHub file tree&lt;/li&gt;
&lt;li&gt;text file previews&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;SKILL.md&lt;/code&gt; by default&lt;/li&gt;
&lt;li&gt;signals like favorites, ratings, comments, added date, and category&lt;/li&gt;
&lt;li&gt;related skills for comparison :contentReference[oaicite:6]{index=6}&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;That changes the experience from “open repo and guess” to “inspect first, install second.”&lt;/p&gt;

&lt;h3&gt;
  
  
  3. It solves the “I found it once, now where is it?” problem
&lt;/h3&gt;

&lt;p&gt;The site includes favorites and a dedicated favorites page, with an &lt;code&gt;Install all&lt;/code&gt; flow so useful skills are not lost after the first discovery. That turns scattered one-off finds into a reusable shortlist. :contentReference[oaicite:7]{index=7}&lt;/p&gt;

&lt;p&gt;This is a simple feature, but it fixes a common failure point in day-to-day use.&lt;/p&gt;

&lt;h3&gt;
  
  
  4. It treats workflows as first-class, not accidental
&lt;/h3&gt;

&lt;p&gt;One of the smartest decisions in Agent Skills Finder is the collection model.&lt;/p&gt;

&lt;p&gt;Users can create private or public collections, add skills to them, include external GitHub &lt;code&gt;SKILL.md&lt;/code&gt; sources, and generate install commands from collection pages. In practice, this means people can turn “these three or four skills I use together” into a repeatable workflow instead of a mental note. :contentReference[oaicite:8]{index=8}&lt;/p&gt;

&lt;p&gt;That is closer to how real users work.&lt;/p&gt;

&lt;p&gt;They do not just reuse a skill.&lt;br&gt;&lt;br&gt;
They reuse a sequence.&lt;/p&gt;

&lt;h3&gt;
  
  
  5. It adds community signals where GitHub alone is weak
&lt;/h3&gt;

&lt;p&gt;The product also supports ratings and comments on skill detail pages, which gives later users more than raw star counts to work with. That is useful because a skill can look active on GitHub and still be a poor fit for a specific workflow. User feedback adds practical context. :contentReference[oaicite:9]{index=9}&lt;/p&gt;

&lt;h3&gt;
  
  
  6. It lowers the cost of growing the directory
&lt;/h3&gt;

&lt;p&gt;When users do not find a skill, they can submit one from a GitHub repo URL, skill directory URL, or direct &lt;code&gt;SKILL.md&lt;/code&gt; URL, then track review status from their own submissions page. That makes the directory easier to expand without asking users to leave the product. :contentReference[oaicite:10]{index=10}&lt;/p&gt;

&lt;p&gt;That is how a useful directory stays useful.&lt;/p&gt;

&lt;h2&gt;
  
  
  The bigger point
&lt;/h2&gt;

&lt;p&gt;Agent skills are clearly becoming part of the standard toolkit for coding agents and agent workflows. The vendors are moving in that direction. The community is producing more and more skills. The ecosystem is broadening across tools and platforms. :contentReference[oaicite:11]{index=11}&lt;/p&gt;

&lt;p&gt;But the user experience is still fragmented.&lt;/p&gt;

&lt;p&gt;That is why a product like Agent Skills Finder matters.&lt;/p&gt;

&lt;p&gt;It does not try to replace skills.&lt;br&gt;&lt;br&gt;
It makes skills easier to evaluate, organize, and actually use.&lt;/p&gt;

&lt;p&gt;For anyone who has already felt the pain of searching GitHub, comparing vague repos, copying install commands, and losing track of useful workflow pieces, this is the kind of layer the ecosystem needs.&lt;/p&gt;

&lt;h2&gt;
  
  
  Try it
&lt;/h2&gt;

&lt;p&gt;If you are exploring agent skills and want a faster way to go from discovery to installation, start here:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Home: &lt;code&gt;https://agentskillsfinder.com/&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;Categories: &lt;code&gt;https://agentskillsfinder.com/categories&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;Hot skills: &lt;code&gt;https://agentskillsfinder.com/hot&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;New skills: &lt;code&gt;https://agentskillsfinder.com/new&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;Collections: &lt;code&gt;https://agentskillsfinder.com/collections&lt;/code&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The value is straightforward:&lt;/p&gt;

&lt;p&gt;find faster, judge earlier, save what works, and turn scattered skills into a workflow you can actually reuse.&lt;/p&gt;

</description>
      <category>ai</category>
      <category>skills</category>
      <category>claude</category>
    </item>
  </channel>
</rss>
