Direct answer
Before publishing, check that the app has one clear purpose and reuses components. Confirm loading and error states. Test keyboard access, labels, and a 320-pixel layout without overflow. Use browser evidence and tests before inviting users.
What should a beginner check before publishing?
Use this checklist after the main task works and before sharing the app with a wider audience. It is a UI and UX gate, not a security approval. Apps with accounts, payments, private data, or consequential automation still need experienced engineering and security review.
Six checks before you publish
Complete each check in order and keep the evidence you used to decide it passed.
- Purpose: A new user can identify one clear job and primary action.
- System: The app reuses components instead of inventing each control.
- States: Loading, empty, error, and success paths are handled.
- Access: The task works with a keyboard and meaningful labels.
- Mobile: The page works at 320px without lost content or overflow.
- Proof: Browser review and project tests support the decision to publish.
Does the screen have one clear purpose?
- The title names what the screen is for.
- One primary action is visually obvious and uses a specific verb.
- Supporting actions are present but quieter.
- A first-time user can explain what happens next without reading a tutorial.
Does the app reuse a small design system?
A first project does not need a large design organization. It needs a few explicit decisions that the coding agent can reuse and you can recognize when they are broken.
- Buttons with the same role look and behave the same way.
- Inputs have visible labels and consistent error treatment.
- Spacing, type sizes, colors, and radii come from a short shared scale.
- New cards, badges, and controls exist only when the content or behavior needs them.
Are loading, empty, error, and success states complete?
Know that work is happening
Context stays visible and the wait is named
Understand why nothing is present
The next useful action is available
Recover without blame
The cause and next step are clear
Know the outcome occurred
Confirmation is proportional and work can continue
Can someone use it without a mouse?
- Tab reaches every control in a logical order.
- Focus is visible and not hidden behind sticky content.
- Enter and Space activate controls as expected.
- Menus and dialogs can be closed and return focus correctly.
- Inputs have labels, errors are associated with their fields, and icon-only buttons have accessible names.
Does it work on a small screen?
- Set the viewport to 320px and complete the main task.
- Confirm there is no page-level horizontal scrolling.
- Make sure text wraps without covering controls or leaving important words hidden.
- Keep touch targets large enough and avoid behavior that depends on hover.
- Test long names, large text, and an on-screen keyboard where forms are involved.
What proof should you keep?
Evidence makes the next iteration safer. It also prevents a later agent from calling the interface finished only because the default preview still renders.
- A screenshot of the main state at desktop and 320px.
- A note that the keyboard path completed with visible focus.
- Screenshots or stories for loading, empty, error, and success.
- The relevant test, typecheck, lint, and build results.
- A short list of known limitations and who should not use the current version.
How can Better Design help a beginner?
Better Design can give a compatible coding agent a coherent visual system, editable components, focused UI and UX guidance, and review rules. You still need to use the app, inspect the code, and ask for experienced help when the project handles sensitive data or high-consequence actions.
Questions
Do I need to pass every check before sharing a prototype?
A private, low-risk prototype can be shared with clear limitations. Fix failed checks before presenting it as finished or inviting people to rely on it.
Is this checklist enough for an app with user accounts?
No. Accounts introduce authentication, authorization, privacy, recovery, and data-protection responsibilities. Get experienced engineering and security review before storing real user data.
What is the first check if I have little time?
Confirm one clear purpose and primary action, then complete the keyboard path at 320px. Those checks expose major hierarchy, access, and responsive failures quickly.
Are automated accessibility tests enough?
No. They catch important markup and contrast issues, but keyboard behavior, focus order, understandable copy, responsive layout, and real task completion still need hands-on review.