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.
916mo 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.
160k3d agoReviewMountCreate a free account to mount
Frontend Testing Skill - Langflow
## When to Apply
Activate this skill when:
- Writing new unit or integration tests for React components, hooks, utilities, or Zustand stores
- Reviewing existing tests for correctness
Steady6 mentions in 2 weeks
15 projects use a version of this
156k2mo agoReviewMountCreate a free account to mount
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.
17k19d 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".
35512mo 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.
Product-specific interface design for an Agent-Native app. Use when creating or changing any user-facing UI, including screenshot feedback, copy or density cleanup, settings, controls, or a visual redesign.
Entry-point reference for OrangeHRM's Vue 3 frontend — the per-page mini-SPA architecture (no vue-router; each backend page-controller mounts one Vue root component into the Twig shell), the four-step page registration flow, plugin-frontend layout under `src/client/src/orangehrm{X}Plugin/`, the three import aliases (`@/`, `@ohrm/core`, `@ohrm/components`) + the external `@ohrm/oxd` design system, the catalog of OXD components actually used in the codebase, the custom `@ohrm/components` layer (DateInput, EmployeeAutocomplete, FileUploadInput, etc.), the typical Vue page file anatomy (mixed Composition + Options API, scoped external SCSS), and full-page navigation via `navigate(url)`. Use whenever the user is adding a new Vue page, editing an existing one, asking "where do I register this component", asking about the OXD design system, debugging "why doesn't my new page render", or working out which import alias to use. Companion skills: `frontend-data` (APIService + composables + validation), `frontend-platform` (i18n + ACL + toaster + navigation), `authorization` (the page-controller side that mounts these Vue components).
1.1k5mo agoReviewMountCreate a free account to mount
Use this skill when designing or redesigning a website, web app, or any interface and you want the result to feel intentional and distinctive rather than generic. Covers art direction, typography, color systems, layout, motion, and the craft of interface copy. Load this when a user asks to build a new page, style an existing one, or make something look better.
Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices. Use when building or reviewing React or Next.js components, state, or render performance.
Craft doctrine for building distinctive, polished frontend interfaces. Use when building or reviewing web UI — components, pages, layouts, styling, animation. Covers design direction, typography, surfaces, and motion. Defers to the repo's DESIGN.md for all project-specific choices.
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.
zarazhangruiSkill
