Agent Skill to Frontend Skill: 21St Ui Review
Agent Skill to Frontend Skill: 21St Ui Review is a verified SKILL blueprint on Promptally in Frontend & Motion Design optimized for leading AI models. Review existing UI against the project's design context, accessibility expectations, responsive behavior, interaction quality, and high-confidence production rules. Use for UI audits, design QA, frontend review, accessibility review, consistency checks, or requests to find and safely fix visual defects. Trigger for requests such as "review this UI", "audit this page", "find design issues", "check responsiveness", or "fix obvious UX problems". Use 21st-ui-build when the request is prima. Available to explore, customize with pre-filled variables, and copy with zero authentication required.
Technical Specifications
| Specification | Value |
|---|---|
| Artifact type | SKILL (Frontend & Motion Design) |
| Compatible engines | Universal / Model Agnostic |
| Input variables | None (pre-filled) |
| Approximate tokens | 552 |
| Source file | SKILL.md |
| Access tier | Free public (MIT) |
Pre-Filled Template
--- name: 21st-ui-review description: Review existing UI against the project's design context, accessibility expectations, responsive behavior, interaction quality, and high-confidence production rules. Use for UI audits, design QA, frontend review, accessibility review, consistency checks, or requests to find and safely fix visual defects. Trigger for requests such as "review this UI", "audit this page", "find design issues", "check responsiveness", or "fix obvious UX problems". Use 21st-ui-build when the request is primarily to create new UI. --- # Review UI with evidence Separate deterministic defects from subjective design recommendations. ## Workflow 1. Read `.21st/design.json`, project instructions, and the relevant source. 2. Run the deterministic review first: ```bash 21st review <path> 21st review <path> --json ``` 3. Inspect the actual component composition and runtime states. Validate claims against code rather than inferring behavior from names. 4. Group findings into: - deterministic defects; - design-system drift; - accessibility and interaction defects; - responsive risks; - subjective product/design recommendations. 5. Prioritize by user impact and include exact file and line attribution. 6. Use `21st review <path> --fix` only for deterministic, low-ambiguity fixes. Never silently redesign, change brand identity, or alter product behavior. 7. Run relevant project tests after fixes and rerun review to prove resolution. ## Review priorities - semantic controls and accessible names; - keyboard access, focus visibility, and dialog/menu behavior; - image alternatives and meaningful labels; - touch target size and disabled/loading states; - responsive overflow and fixed-width assumptions; - reduced-motion handling; - hardcoded visual values that conflict with project tokens; - duplicate primitives instead of existing components; - inconsistent typography, radius, spacing, shadows, and icons; - fake data, placeholder copy, or missing empty/error states. ## Output Lead with actionable findings ordered by severity. Keep subjective suggestions clearly labeled. If no issue is proven, say so and state what was inspected.
How to use this skill
- Review the pre-filled example and source files above.
- Copy the template or download
SKILL.md, then use it in your model, IDE, or workflow tool. - Compare your result with the sample output when one is provided.
Frequently Asked Questions
How do I use Agent Skill to Frontend Skill: 21St Ui Review?
Open the skill on Promptally, review the pre-filled example, then copy the template or download SKILL.md and paste it into your model, IDE or workflow tool. Agent Skill to Frontend Skill: 21St Ui Review is a static blueprint with no dynamic variables. Copy it and use it as-is.
Is Agent Skill to Frontend Skill: 21St Ui Review free?
Yes. Agent Skill to Frontend Skill: 21St Ui Review is free to view, copy and download on Promptally without creating an account. It is published under the MIT license.
What variables does Agent Skill to Frontend Skill: 21St Ui Review need?
Agent Skill to Frontend Skill: 21St Ui Review is a static blueprint with no dynamic variables. Copy it and use it as-is.