Frontend development with premium UI design, animations, and AI-generated media assets. TRIGGER when: building landing pages, marketing sites, product pages with rich animations, generating media assets (image/video/audio/music via MiniMax API), implementing cinematic scroll animations, creating generative art. DO NOT TRIGGER when: simple UI components, basic form pages, minor CSS fixes, adding a button or modal, standard CRUD interfaces, simple responsive adjustments. 触发词：落地页、营销页、动效、滚动动画、AI 配图、生成艺术、前端页面。
Use when writing or reviewing the frontend code of a website — HTML/CSS/JS structure, component architecture, responsive layout, and code quality standards. Triggers: "build the frontend", "code this page/component", "make it responsive", "clean up the frontend code", "what stack should I use", implementing a design in code.
browser skill for rendered verification when available,
otherwise the host's DevTools/browser tool.
name: frontend-design
skill-dependencies:
- chromium-browser
description:
Use when creating or substantially redesigning web interfaces, landing
This skill should be used for web front-end accessibility work — whenever the user mentions "accessibility", "a11y", "WCAG", "ARIA", "screen reader", "keyboard navigation", "focus management", or "semantic HTML", asks to fix accessibility violations on a web / URL / code / Storybook asset in Stark, or wants to set up accessibility scanning for a website or front-end codebase. Use it to turn Stark violations into correct, minimal HTML/ARIA fixes and to tell real WCAG failures apart from best-practice cleanup. Prefer this skill for any web UI accessibility task even if the user doesn't say "Stark".
Build web interfaces with genuine design quality, not AI slop. Use for any frontend work - landing pages, web apps, dashboards, admin panels, components, interactive experiences. Activates for both greenfield builds and modifications to existing applications. Detects existing design systems and respects them. Covers composition, typography, color, motion, and copy. Verifies results via screenshots before declaring done.
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.
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.
Analyze the current branch diff against dev, plan integration tests for changed frontend pages/components, and write them. TRIGGER when user asks to write frontend tests, add test coverage, or 'write tests for my changes'.
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. Generates creative, polished code that avoids generic AI aesthetics.
A comprehensive guide for GitHub Copilot to craft immersive, high-performance web experiences with advanced motion, typography, and architectural craftsmanship.
Create distinctive, production-grade frontend UI with an intentional aesthetic direction, purposeful layouts, meaningful motion, and strong accessibility. Follow the existing project's framework and conventions; consider React, Next.js, or vanilla HTML/CSS/JS for new projects without an established stack.
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications, OR when they provide screenshots/images/designs to replicate or draw inspiration from. For screenshot inputs, extracts design guidelines first using ai-multimodal analysis, then implements code following those guidelines. Generates creative, polished code 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, OR when they provide screenshots/images/designs to replicate or draw inspiration from. For screenshot inputs, extracts design guidelines first using ai-multimodal analysis, then implements code following those guidelines. Generates creative, polished code that avoids generic AI aesthetics.
Activate when building Next.js (App Router or Pages Router) web frontends — landing pages, marketing pages, product UI, dashboards, portfolios. Trigger phrases include "build a Next.js page", "design a Next.js landing page", "create the UI in Next", "build the marketing site", "App Router", "server components", or when the user pastes a screenshot for a Next.js project. Always check for `screenshots/` in the repo root. Always reference `questionnaire.md` in this skill folder — walk the user through it if unanswered. Use `frontend-react` for non-Next React (Vite, CRA, Remix). Do NOT trigger for Flutter (use `frontend-flutter`), React Native (use `frontend-react-native`), backend, or existing design systems that must be preserved.
Use only when the user explicitly requests a review or audit of frontend code under `web/` or `packages/dify-ui/`. Supports pending-change, file-focused, and pasted-diff reviews. Do not use for implementation-only requests, diagnosis without review intent, or backend-only code.
Capsem frontend design system. Use when building UI components, styling views, choosing colors, or working with Svelte 5 runes and the component library.
name: frontend-design
type: workflow
description: "Designs frontend UI architecture including component hierarchy, state management strategy, design tokens, and accessibility requirements. Use when starting frontend design or when the user
A folder with a SKILL.md file: a name, a description of when to use it, and instructions. Claude loads a skill only when the task matches its description.
How do I use one I find here?
Copy the folder into your project's .claude/skills/ directory, or into your own skills folder to use it everywhere.
What do the warnings mean?
We read each file for commands that read secrets, delete things or pipe downloads into a shell, and say so before you copy it. No warning is not a promise that a file is safe.
Which skills worked for people?
Open a skill to see its discussion. Reports from people and their agents are coming.
JIANGEPLUSSkill
