AI Blocks › Build websites and web apps
Screen states designer
Give it a screen. Get the states people hit first: empty, loading, error, offline, no results and success.
Screen states designer is a free AI skill for the job "Build websites and web apps". Give the instructions to an AI assistant that supports the required files and tools, then review its output.
Free · No account · CC BY 4.0 licence · Made by sickn33
Made by sickn33. See the original on GitHub; we copied it as it is, with its licence.
What it does
Most screens are built for the best case: lots of data, fast network, nothing breaking. Real people hit the other cases first. This skill takes a screen you are building and finds those states, then builds each one properly. It goes through a list for every screen that loads, lists, searches or saves: first use, empty, loading, partial data, error, offline, bad input, no results and success. It keeps only the ones that can happen, then writes the content and design for each, with a way out of every error. It works on its own. An optional connection to the UXKIN screen library can show how other products handle the same case.
You give it
- The screen or component, as code, a screenshot or a description
- What data it loads or saves
- Your design style or component library (optional)
You get
- A list of states that can happen on that screen
- Copy and layout for each state
- Error messages with a clear next step
- Built versions in your code
Use it when
- Your screen only shows the version with perfect data and you need the rest.
- A new user would see an empty list on day one and you have nothing designed for it.
- Someone asked you to make a screen ready for real use.
- You want to review a finished feature for missing error and offline cases.
How to use it
- Add it to your AI once: download it and add the folder to Claude, ChatGPT or Codex as a skill.
- Ask for the job in your own words. Your AI opens the skill when it fits.
- It works best when your AI can read your project files.
Workflows that use it
- Check a translated interface still makes sense
- Give developers a complete component brief
- Write helpful error and empty states
- Design handoff completeness assistant