Art & Design

Astro Web Framework workflow skill. Use this skill when the user needs Build content-focused websites with Astro \u2014 zero JS by default, islands architecture, multi-framework components, and Markdown/MDX support and the operator should preserve the upstream workflow, copied support files, and provenance before merging or handing off.

Write the Astro .mdx documentation for a hook (English + zh-Hans + zh-Hant), following the website-astro content schema and live-demo convention, then regenerate scripts/hook-registry.json. Triggers on "document this hook", "add docs for useXxx", "write the mdx", or after creating a new hook.

Rebrand Atomic CRM — change the application logo (the wordmark in the header and on the login/signup pages) and/or the title/name. Use when the user wants to change, swap, update, or rebrand the CRM logo or title. Handles the two light/dark-mode logo variants, the three places the title is hardcoded, the config that points at them, and — optionally — the browser favicon and PWA app icons.

Analyze and port WordPress plugin behavior, custom post types, shortcodes, admin workflows, and stored data to current EmDash extension points. Use for WordPress-plugin migrations or when deciding which behavior belongs in an EmDash plugin, site schema, seed, or Astro code. Do not use for visual theme ports without plugin functionality.

>- Deploy or redeploy the CodFlow storefront (cod-astro/theme01) to Vercel — an AI agent following it configures the Vercel project with DEPLOY_TARGET=vercel, binds environment variables (COD_SERVER_URL, STORE_API_KEY, MEDIA_DOMAIN), builds and deploys using the Vercel CLI or Git integration, and verifies storefront functionality. Use when a developer wants to deploy the storefront to Vercel, switch from Cloudflare Workers to Vercel, or troubleshoot Vercel storefront deployments.

Build, serve and drive wweb.dev pages in a real browser to verify changes at the rendered surface.

Sets up GitHub Actions CI/CD workflows for Astro sites — `astro check` (TypeScript + content schema), ESLint, Prettier, build verification, Vitest testing, Lighthouse CI, link checking, npm audit, and automated deployment to GitHub Pages, Cloudflare Pages, Netlify, or Vercel. ALWAYS use this skill when a user wants to create, add, set up, or configure GitHub Actions, CI/CD, automated checks, or deployment workflows for an Astro site — even if they don't use the exact phrase "GitHub Actions". This includes any request to: add automated type-checking or linting to an Astro repo; set up `astro check` in CI; add Lighthouse or accessibility checks to PRs; configure Vitest in CI for an Astro project; auto-deploy an Astro site to GitHub Pages, Cloudflare Pages, Netlify, or Vercel from GitHub; add link checking or broken-link detection; add security scanning to an Astro pipeline; or generally "add CI", "add automated checks", "set up workflows", or "automate" anything related to an Astro site's GitHub repository. ...

Create a changeset for the Astro monorepo. Use this skill whenever you need to add a changeset file to a PR, write a changelog entry, or document a package version bump. Also trigger when the user says "add a changeset", "write a changeset", "create a changeset", or when another skill instructs you to create a changeset.

Port a WordPress theme's design and template behavior to an EmDash-powered Astro site. Use for theme migrations, design matching, PHP-template conversion, and CMS wiring. Do not use for WordPress plugin behavior that does not affect the site theme.

Stop coding agents from shipping generic UI. Use UIZZE's 800,000+ real web and iOS screens to build product-specific interfaces, define a design contract, cover required states, and run a hard finish gate. Use when designing, implementing, redesigning, critiquing, or pre-ship reviewing a web or iOS interface in Codex, Claude Code, Cursor, Copilot, or another coding agent. Trigger with "anti-ui-slop", "stop UI slop", "ground this UI in real screens", or "run the UI finish gate".

Migrates React projects and components from Radix UI to Base UI. Use when asked to migrate from radix, move to base-ui, convert radix primitives, or switch a shadcn project's base library. Handles single components ("migrate accordion") and whole projects.

前端项目总控工作流。在开始任何前端开发、页面改造、UI 优化或组件开发任务前使用。负责读取项目规范、识别技术栈，并协调视觉设计、工程实现和视觉验收三个阶段。

Astro framework specialist for building fast, content-driven websites with islands architecture. Use when creating Astro components, configuring hydration (client:load/idle/visible/media), using server:defer (server islands), Content Layer API (glob/file loaders, live loaders), sessions, astro:env, i18n routing, actions, SSR adapters, view transitions, or integrating React/Vue/Svelte/Solid. Not for full-SPA frameworks (Next.js, Remix, SvelteKit).

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.

Frontend design and UI/UX resource discovery skill. Search 24 curated design resources for UI components, CSS animations, React components, Tailwind CSS patterns, icons, and fonts, including React Bits, Magic UI, Aceternity UI, Uiverse, and 21st.dev. Use for frontend development, redesigns, and interface polish; match the project stack, install selected dependencies when authorized, and verify the actual page. 前端设计、UI美化、控件搜集、组件安装与动效资源接入；纯后端工作不触发。

拿到 UI/UX prototype 要開始一個新的前端專案時使用:依團隊標準(React 19 + Ant Design + TanStack Query + Zustand,按層分的目錄)建立可執行的專案骨架,並依 prototype 填好 README、AGENTS.md、ARCHITECTURE、GLOSSARY、API 契約草案、BDD 規格、任務單與畫面截圖,停在「任務可以派給 coding agent(/implement)」的狀態。也用於「建立團隊標準前端專案」「新專案套用前端公版」。不用於修改既有專案。

前端界面设计风格的实现与还原助手，覆盖 Xiaomi MIUIX/HyperOS、Apple HIG、Google Material Design 3、Microsoft Fluent 2 四套设计语言。当用户要求"用某个设计风格做页面/组件"、"做一套 iOS 风格的界面"、"Material Design 3 风格的后台"、"Windows 11 风格桌面应用"、"HyperOS/MIUI 风格 App"，或在四种风格之间选型、对比、生成设计令牌（颜色/字阶/圆角/阴影/动效/间距）并输出可运行的前端代码（HTML/CSS/JS、React、Vue、Tailwind、Compose/Kotlin 映射）时使用。也用于审查现有界面是否符合某一设计语言。

Setup, automate, and execute SEO audits, CI/CD pre-push/pre-deploy checks, and ranking optimizations using the seo CLI and MCP server.

Self-correcting rules engine and feedback loop that learns from user corrections, mistakes, and project-specific constraints by maintaining a persistent autofix ruleset. Scans learned rules before starting any task, resolves conflicts, and automatically appends new rules upon corrections. Triggers on user corrections ("no, do it this way", "never do X", "always use Y"), /learn, "self repair", "add rule", "update rules", or when diagnosing assumptions and bugs. CRITICAL ALWAYS-ACTIVE LIFECYCLE SKILL. Must always be kept in context, loaded at session start, and consulted before starting ANY task to read and apply active constraints from autofix.json. MUST ALWAYS be triggered immediately whenever the user provides ANY correction, preference, criticism, rejection of an approach, or adjustment ("no", "don't do X", "use Y", "remember", "prefer"), or when any mistake/bug is identified. Automatically and immediately formulates and appends the new imperative rule to the project's autofix.json ruleset file.

>- Build Next.js e-commerce frontends backed by WooCommerce APIs, handling ISR catalogs, cart sessions, and JWT authentication. Use when building or querying Next.js stores with WooCommerce.

Workflow and engineering standards for crafting co-located Storybook CSF3 stories ([ComponentName].stories.tsx) with interactive controls, action spies, and 4 canonical theme variants.

>- Configure, test, and verify OpenTelemetry (OTel) observability in Next.js App Router applications. Triggers on "/nextjs-otel", "setup otel", "configure opentelemetry", "test otel", or "verify opentelemetry".

Step-by-step workflow for designing and building Next.js App Router pages (RSC page.tsx, loading skeleton, metadata, JSON-LD schema, and dynamic static params). Triggers on "/nextjs-page-dev", "create page", "new page", "develop page", "build route", or "implement page".

Read/write translation dictionaries (messages/[locale].json), next-intl hooks (getTranslations/useTranslations), providers (Storybook/tests/subtrees), and BiDi styling. Triggers on "/nextjs-i18n-usage", "i18n dictionary", "use translations", "read dictionary", "i18n provider", "next-intl hooks", "storybook i18n", "test i18n", "add translation keys", "localize component", "create a component", "update a component".