Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
How to build Mastra frontend interfaces with the @mastra/playground-ui design system. This skill should be used when creating or modifying any application UI — pages, components, styling, or tokens — in this repo or in an external consumer of the design system. The docs site has its own styling and is out of scope.
29k25d agoReviewMountCreate a free account to mount
Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web, or create slides for a talk/pitch. Helps non-designers discover their aesthetic through visual exploration rather than abstract choices.
Implement frontend features, components, pages, and modules. Expert in React 19, strict TypeScript, semantic HTML, accessible markup, CSS layout, and maintainable code patterns. Use for any frontend implementation task.
917mo agoReviewMountCreate a free account to mount
Use when writing or changing Vitest or React Testing Library tests under `web/` or `packages/dify-ui/`, or when the user explicitly requests frontend test strategy, including evaluation of an existing strategy. Do not use for frontend code-review-only requests, general testability discussion, Python tests, or Cucumber/Playwright E2E.
Write, review, and debug Jest and React Testing Library unit and integration tests for Langflow frontend components, hooks, utilities, and Zustand stores.
High-aesthetic frontend UI generator trained on the design DNA of Linear, Vercel, Stripe, Raycast, Resend, Supabase, Anthropic and 10+ other benchmark products. Analyzes reference URLs or screenshots to extract design DNA (color, typography, spacing, motion), generates pixel-perfect production code, and saves extracted styles as reusable template skills. 26 curated palettes, anti-AI-slop enforced: real design systems, typographic craft, 8px grid discipline. Use when asked to "build UI", "design a page", "clone this style", "make it look like X", or "generate frontend". Proactively suggest when user shares a URL/screenshot for inspiration.
117mo agoReviewMountCreate a free account to mount
Diff-scoped self-review of frontend changes under site/src against the FE pattern rules (FE1-FE10) before creating or updating a PR. Use whenever a branch diff touches site/src files.
17k30d agoReviewMountCreate a free account to mount
Generate frontend component tests (React Testing Library, Vue Test Utils, snapshot) for existing components. Auto-invoke when user says "test this component", "write component test", or "add component test".
35513mo agoReviewMountCreate a free account to mount
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
Anti-slop frontend design for web UI — landing pages, portfolios, marketing/product sites, and redesigns. Reads the brief, infers the right direction, and ships interfaces that don't look templated. Real design systems when applicable, audit-first on redesigns, strict pre-flight check. NOT for mobile apps.
Plain text files in a repository that tell a coding agent how the project works: commands to run, conventions to follow and things to avoid. CLAUDE.md, AGENTS.md, cursor rules and skills are the common kinds.
CLAUDE.md or AGENTS.md?
CLAUDE.md is read by Claude Code. AGENTS.md is an open format that Codex, Cursor and other agents read. Many projects keep one and point the other at it.
What is a skill?
A folder with a SKILL.md that describes one capability, such as filling PDFs or reviewing code. The agent loads it only when the task calls for it.
Can I search my own team's files too?
Your agents already can, over MCP, limited to the files you're allowed to read. Searching them from this page is coming.