Choose by task and output
A landing page, a product dashboard and a Figma handoff need different kinds of help. Choose a design skill for the page you are building, then add implementation and review skills where the task calls for them.
By OpenAgentSkill · Source notes checked
Start from the audience, product brief and visual direction. Taste Skill is an alternative for landing pages and redesigns.
Explore this workflow →Choose product UI guidance with tables, charts and interaction rules. The checked Taste Skill source explicitly excludes dashboards.
Explore this workflow →Provide an accessible frame, its assets and tokens through Figma MCP. Verify fidelity against the source design.
Explore this workflow →Review the resulting interface; add React Best Practices for rendering and data-fetching concerns.
Explore this workflow →The comparison describes the pinned upstream instructions. It does not assign new review scores or imply successful installation. Inspect the pinned instructions and available registry profiles before choosing.
| Skill / task | Output | Setup | Limits |
|---|---|---|---|
| Frontend Design Visual direction and implementation Pinned SKILL.md ↗ | Frontend code for a distinctive interface | A coding agent and the target application's toolchain | Choose a design direction from the brief. It does not establish accessibility or browser correctness. |
| UI UX Pro Max UI systems and product interfaces Pinned SKILL.md ↗ | Design choices, component guidance and implementation | Keep the source's data and scripts; inspect its client-specific setup | Use for product UI and dashboards. Searchable design guidance is not a usability study. |
| Taste Skill Landing pages and purposeful redesigns Pinned SKILL.md ↗ | Landing pages, portfolios and editorial frontend layouts | A coding agent with access to the brief and existing code | The checked source excludes dashboards, data tables and multi-step product UI. |
| Figma Implement Design Implement an approved design Pinned SKILL.md ↗ | Application code guided by Figma frames and tokens | Figma MCP, an accessible design URL or selected desktop node, and repository access | Requires the actual design and access. A screenshot-only reconstruction is a different task. |
| Web Design Guidelines Review an implementation Pinned SKILL.md ↗ | Findings against web interface guidelines | UI files and access to the source's current guidelines | Reviews existing UI. It does not generate an entire application or certify compliance. |
| Vercel React Best Practices React and Next.js performance Pinned SKILL.md ↗ | Focused implementation or refactoring guidance | An existing React / Next.js project and its checks | Measure affected user flows after changes. Static guidance is not a performance benchmark. |
These original editorial fixtures demonstrate the deliverables and checks to ask for. Their production notes identify how they were made; they are separate from upstream Skill instructions.
Original OpenAgentSkill editorial example. Browser layout checked at desktop and mobile widths; local links and headings inspected.
Sample copy and figures are fictional. This is not a comparative run of the listed design skills.
Original editorial example. Filter interaction and the empty state checked in a browser; sample records remain local.
No live backend or customer metrics. It demonstrates product UI requirements, not backend integration or a usability study.
Original editorial fixture. The implemented colors, spacing and card width are compared with the supplied local token specification.
The source is a local design specification, not a private Figma file. A real Figma fidelity check requires your accessible frame and Figma MCP.
Use the client's discovered skill name and preserve referenced scripts and files. Remotion explicitly lists these clients in its official guide; each other source has its own setup requirements.
Check the current client's custom-skill import, shell or file access and the selected source's documented support. Keep helper files together. Test one small input before treating a community workflow as compatible.
Specify the actual product and its file or tool capabilities. A conversation can help draft a brief; producing editable files or running a local code skill requires the corresponding supported runtime.
UI UX Pro Max covers product interfaces and charts in its checked source. Taste Skill targets landing pages, portfolios and redesigns and excludes dashboards. Add browser and accessibility checks to either implementation path.
No. Figma Implement Design translates an accessible design into repository code. It needs Figma MCP and a frame or selection; visual design from a brief is a different workflow.
No. The comparison describes pinned upstream instructions. The downloadable examples are original OpenAgentSkill editorial fixtures, with their own production and verification notes.