When to use this workflow
Use this review on a real task, not only on an isolated screenshot. Define what the user is trying to accomplish and which pages or states belong to the flow. A review of the default state cannot establish whether errors, navigation, or recovery are usable.
A worked example
For a signup-flow exercise, move from the entry page through validation and confirmation. Record each finding with the affected element, reproduction steps, expected behavior, observed behavior, and a suggested next action. Separate a broken interaction from a subjective visual preference so the team can prioritize the work.
Decisions and common mistakes
Avoid turning a general guideline into an automatic redesign. If a suggestion conflicts with an established product convention, inspect the reason for that convention and the effect on the task. Rank issues by impact and evidence rather than by how easy they are to describe.
What to hand off
After a fix, repeat the failing steps and check adjacent states. Keep the original finding and the new result together. A useful review leaves a reproducible list of resolved and open issues, rather than a broad statement that the interface follows best practices.
Set up and try the skill
1. Start with one concrete task
Bring: A running interface or relevant source files and the specific flow to review.
First task: Review one complete task and record each finding with the element, observed behavior, and proposed fix.
Choose a small task for “review ui design guidelines.” Provide the relevant file, screen, or brief and define what a useful result should contain. Keep the original version available for comparison.
2. Install and verify the instructions
Run this command from the project where you want the skill available. Follow the installer’s host selection, then confirm the skill appears in that host. The command is the installation method documented by the TDP repository.
npx skills add thedesignproject/agent-skills -s web-design-guidelinesRead the full skill instructions for prerequisites and supported tools. Installing a skill does not automatically connect Figma or grant access to external tools.
3. Apply it with your project context
Use the starter request below with the relevant inputs attached or referenced. Confirm that the host loaded the intended skill; a matching name alone is not evidence that its instructions were applied.
4. Review the result
Reproduce each reported issue; prioritize failures that block the task before cosmetic changes.
Compare the output with the task’s acceptance criteria. Check factual claims, unsupported assumptions, and any changes to the interface. For code or design changes, review real states and behavior before treating the result as finished.
5. Keep what works
Save approved outputs with their source and ownership. Note which instructions helped, where the result needed correction, and what must be checked next time. Use the workflow below to connect this task to its next step.
A starter request
Adapt this example to your files, audience, and requirements.
Review this interface against web design guidelines. Return a prioritized list with the affected element, observed issue, and a concrete fix.
Completion checklist
- The inputs and intended result are explicit.
- Required files and tools are available in the chosen host.
- The result has been reviewed against the actual task.
- Limitations and follow-up checks are recorded.