frontend-craft

In the author's own words, from each skill's SKILL.md — showing the first 30 of 112 files.

• fec-accessibility-check

  Use when reviewing or improving frontend accessibility, semantic structure, keyboard support, focus management, ARIA labels, screen reader behavior, WCAG 2.2 issues, touch accessibility, or assistive-technology regressions; Chinese triggers include accessibility, accessibility, a11y, WCAG, screen reader.

  skills/fec-accessibility-check/SKILL.md on GitHub (opens in a new tab)

• fec-alchemy

  Use when absorbing ideas, capabilities, workflows, architecture, quality systems, ecosystem extensions, or engineering practices from any reference system into the current project through original, project-native redesign rather than copying.

  skills/fec-alchemy/SKILL.md on GitHub (opens in a new tab)

• fec-api-integration

  Use when designing, implementing, or reviewing frontend-to-backend API integration, typed API clients, REST/tRPC/OpenAPI client choices, auth refresh, API error mapping, upload flows, SSE/WebSocket/polling choices, CORS-facing frontend behavior, or cross-boundary loading/error states. Do not use for backend-only service architecture or TanStack Query cache policy alone; Chinese triggers include A…

  skills/fec-api-integration/SKILL.md on GitHub (opens in a new tab)

• fec-backend-requirements-handoff

  Use when frontend work needs to communicate data, action, state, permission, validation, or business-rule needs to backend teams without dictating endpoint design, field names, database shape, or implementation details; Chinese triggers include front-end and back-end requirements handover, back-end requirements, API requirements clarification, data requirements description.

  skills/fec-backend-requirements-handoff/SKILL.md on GitHub (opens in a new tab)

• fec-browser-storage

  Use when choosing, implementing, or reviewing browser storage such as localStorage, sessionStorage, IndexedDB, cookies, client persistence, offline data, secure storage, or cleanup strategy; Chinese triggers include browser storage, client persistence.

  skills/fec-browser-storage/SKILL.md on GitHub (opens in a new tab)

• fec-canvas-threejs

  Use when building or reviewing Canvas 2D, Three.js/WebGL, React Three Fiber, GLSL shaders, ShaderToy-to-WebGL adaptation, 2D/3D visualization, game rendering, animation loops, GPU resource cleanup, or rendering performance. Do not use for standard DOM UI, charts already covered by a chart library, or non-graphical performance work; Chinese triggers include Canvas, Three.js, WebGL, GLSL, Shader, 3…

  skills/fec-canvas-threejs/SKILL.md on GitHub (opens in a new tab)

• fec-code-review

  Use when the user asks for general frontend code review, PR review, merge-readiness assessment, architecture maintainability, type-safety, rendering/state risks, style consistency, testability gaps, or a cross-cutting review summary. Delegate deep security, accessibility, E2E, or performance investigations to their specialized skills; Chinese triggers include code review, code review, review.

  skills/fec-code-review/SKILL.md on GitHub (opens in a new tab)

• fec-code-smells

  Use when diagnosing structural maintainability problems in existing frontend code before deciding how to refactor it, especially when evidence, false-positive checks, and candidate transformations are needed without editing business code.

  skills/fec-code-smells/SKILL.md on GitHub (opens in a new tab)

• fec-component-testing

  Use when authoring or reviewing frontend unit, component, or light integration tests close to UI code, including React Testing Library, Vue Test Utils, hooks/composables, props/emits, callbacks, accessible queries, user-event interactions, mocks, loading/error/empty states, and regression coverage. For layer planning, real-browser journeys, or existing validation failures, choose the matching tes…

  skills/fec-component-testing/SKILL.md on GitHub (opens in a new tab)

• fec-data-fetching

  Use when implementing or reviewing frontend server-state flows: typed queries, request caching, invalidation, mutations, optimistic updates, infinite queries, prefetch, SSR hydration, or API-layer integration. Do not use for local UI state or Service Worker caching; Chinese triggers include data fetch, cache, optimistic updates.

  skills/fec-data-fetching/SKILL.md on GitHub (opens in a new tab)

• fec-debug-framework

  Use when diagnosing frontend build failures, runtime errors, UI anomalies, API/data problems, white screens, request failures, or unexplained production exceptions; Chinese triggers include debugging, debug, troubleshooting, positioning, error reporting, exceptions, white screens, request failures.

  skills/fec-debug-framework/SKILL.md on GitHub (opens in a new tab)

• fec-dependency-upgrade

  Use when planning, implementing, or reviewing frontend dependency upgrades, package migrations, lockfile changes, major framework version bumps, CVE remediation, peer dependency conflicts, ESM/CJS shifts, build-tool compatibility, or CI verification matrices; Chinese triggers include dependency upgrades, version upgrades, lockfile, peer dependency, CVE fixes, major version migrations.

  skills/fec-dependency-upgrade/SKILL.md on GitHub (opens in a new tab)

• fec-doc-sync

  Use when synchronizing frontend project documentation with source-of-truth files such as package.json, lockfiles, config, env examples, routes, API clients or server routes, schemas, components, tests, CI, build/deploy config, ADRs, changelogs, or migration notes. Do not use for general prose polishing only; Chinese triggers include document synchronization, update README, docs sync, environment…

  skills/fec-doc-sync/SKILL.md on GitHub (opens in a new tab)

• fec-drawio-studio

  Use when creating editable technical diagrams with draw.io / diagrams.net sources, including architecture diagrams, ERD, UML, sequence diagrams, flowcharts, ML model diagrams, official shape lookup, brand symbols, Graphviz auto-layout, codebase structure maps, .drawio validation, or draw.io CLI export fallback. Do not use for ordinary raster image generation, freehand sketches, interactive canvas…

  skills/fec-drawio-studio/SKILL.md on GitHub (opens in a new tab)

• fec-e2e-testing

  Use when creating, maintaining, debugging, or reviewing real-browser end-to-end tests with Playwright or Cypress, including Page Object models, CI artifacts, traces, flaky tests, cross-page visual regression, and critical user journeys such as login, payment, permissions, or CRUD. For layer planning or tests close to UI components, choose the matching testing workflow first; Chinese triggers incl…

  skills/fec-e2e-testing/SKILL.md on GitHub (opens in a new tab)

• fec-form-handling

  Use when building or reviewing substantial forms with React Hook Form, Zod schemas, typed validation, dynamic fields, controlled third-party inputs, file upload, multi-step flows, dependent validation, or form performance. Do not use for trivial 1-3 field forms without validation; Chinese triggers include form, form validation, dynamic fields.

  skills/fec-form-handling/SKILL.md on GitHub (opens in a new tab)

• fec-image-generation

  Use when generating or editing diagrams, charts, visual assets, posters, UI mockups, product images, infographics, academic figures, comics, avatars, storyboards, brand boards, or image-edit workflows, especially when exported PNGs need visual QA and bounded self-repair. Prefer deterministic Mermaid/SVG/HTML/canvas sources for text-heavy diagrams; use HTML technical diagrams for browser-ready sys…

  skills/fec-image-generation/SKILL.md on GitHub (opens in a new tab)

• fec-implement-from-design

  Use when implementing UI from Figma, Sketch, MasterGo, Pixso, Modao, MockingBot, screenshots, design selections, design tokens, or design-to-code tasks for production frontend components/pages; Chinese triggers include design draft, implementation by design.

  skills/fec-implement-from-design/SKILL.md on GitHub (opens in a new tab)

• fec-legacy-to-modern-migration

  Use when planning or implementing an intentional migration from JavaScript, jQuery, HTML/CSS, server-rendered templates, MPA legacy frontend code, or older framework code toward a modern frontend stack while preserving behavior. Do not use for routine legacy bug fixes that stay in the old stack; Chinese triggers include legacy projects, technology stack upgrades, jQuery migration.

  skills/fec-legacy-to-modern-migration/SKILL.md on GitHub (opens in a new tab)

• fec-legacy-web-standard

  Use when maintaining or safely modifying existing non-framework frontend code: vanilla JavaScript, jQuery, HTML/CSS, MPA pages, server-rendered templates, legacy plugins, or long-lived code that should stay in its current stack. Use migration skill when planning a move to React/Vue/TypeScript; Chinese triggers include traditional frontend, native JS, jQuery.

  skills/fec-legacy-web-standard/SKILL.md on GitHub (opens in a new tab)

• fec-list-virtualization

  Use when optimizing or reviewing large lists, virtual scrolling, windowing, react-window, TanStack Virtual, variable-height rows, dynamic measurement, infinite scroll, grid virtualization, or scroll performance; Chinese triggers include virtual lists, large list optimization, scroll performance.

  skills/fec-list-virtualization/SKILL.md on GitHub (opens in a new tab)

• fec-monorepo-project-standard

  Use when creating, reviewing, or restructuring frontend monorepos with pnpm workspace, Turborepo, Nx, multi-package dependency boundaries, task orchestration, package naming, or package publishing; Chinese triggers include monorepo, workspace, multi-package.

  skills/fec-monorepo-project-standard/SKILL.md on GitHub (opens in a new tab)

• fec-motion-interaction

  Use when designing, implementing, or reviewing frontend interaction motion, page transitions, scroll animation, Framer Motion, GSAP, Lottie, CSS animation, motion intensity, animation performance, reduced-motion behavior, or cinematic but accessible UI motion. Do not use for SVG-only path drawing, Canvas/WebGL rendering, or ordinary hover states; Chinese triggers include motion design, interactiv…

  skills/fec-motion-interaction/SKILL.md on GitHub (opens in a new tab)

• fec-nextjs-project-standard

  Use when creating or reviewing Next.js 14+ App Router projects, file routes, layouts, server/client component boundaries, SSR/SSG/ISR, streaming, metadata, middleware, server actions, or Next-specific data fetching. For generic client React component architecture, apply the project's React conventions separately; Chinese triggers include Next.js, App Router.

  skills/fec-nextjs-project-standard/SKILL.md on GitHub (opens in a new tab)

• fec-nuxt-project-standard

  Use when creating or reviewing Nuxt 3 projects, file routes, pages, layouts, SSR/SSG/SPA behavior, Nuxt data fetching, route middleware, plugins, modules, server routes, or Nuxt-specific Vue 3 conventions. For generic Vue component architecture, apply the project's Vue conventions separately; Chinese triggers include Nuxt, Nuxt 3.

  skills/fec-nuxt-project-standard/SKILL.md on GitHub (opens in a new tab)

• fec-performance-optimization

  Use when diagnosing or improving frontend performance, Core Web Vitals, bundle size, runtime rendering cost, network waterfalls, memory leaks, long tasks, Lighthouse findings, or performance budgets; Chinese triggers include performance optimization, page freeze, slow first screen, bundle volume, Web Vitals.

  skills/fec-performance-optimization/SKILL.md on GitHub (opens in a new tab)

• fec-pwa-implementation

  Use when adding or reviewing Progressive Web App capabilities such as installability, manifest metadata, Service Worker registration, Workbox caching, offline fallback, app update prompts, maskable icons, or iOS PWA compatibility. Do not use for general API caching or non-installable performance tuning; Chinese triggers include PWA, offline, Service Worker.

  skills/fec-pwa-implementation/SKILL.md on GitHub (opens in a new tab)

• fec-react-project-standard

  Use when designing or reviewing React + TypeScript project structure, feature/module boundaries, component architecture, hooks organization, routing composition, state/API/error/styling defaults, or repository-wide React conventions. Prefer narrower skills for forms, data fetching, tests, accessibility, virtualization, animation, or security deep dives; Chinese triggers include React project spec…

  skills/fec-react-project-standard/SKILL.md on GitHub (opens in a new tab)

• fec-refactor-clean

  Use when safely removing dead frontend code, unused exports, stale components, obsolete routes, unused dependencies, or cleanup targets found by tools such as knip, depcheck, ts-prune, TypeScript, ESLint, or manual review. Do not use for feature rewrites that change behavior; Chinese triggers include dead code, clean up unused, refactor clean, dependency cleanup, delete useless code.

  skills/fec-refactor-clean/SKILL.md on GitHub (opens in a new tab)

• fec-refactoring-api

  Use when behavior-preserving frontend refactoring focuses on function API shape, flags, dependencies, mutability, construction, or command/function trade-offs, and the selected technique needs family-specific mechanics, risks, and JavaScript/TypeScript/React/Vue adaptation.

  skills/fec-refactoring-api/SKILL.md on GitHub (opens in a new tab)

No skill matches that filter.

Similar skills

• agent-skillsby addyosmani Production-grade engineering skills for AI coding agents. 107k stars · 25 skills
• taste-skillby Leonxlnx Agent skills that give coding agents taste: art direction, reference images and a browser check instead of generic AI pages 97.3k stars · 13 skills
• genofficeby genspark-ai Free, open-source AI Office suite: Docs, Sheets, Slides, PDF, Markdown and HTML editors with a built-in AI agent, plus a `genoffice` CLI an… 9.8k stars · 1 skill
• gentle-aiby Gentleman-Programming Gentle-AI configures the AI coding agents you already use: Claude Code, Cursor, OpenCode, Codex, Pi, and more. Choose persistent memory, Or… 7.8k stars · 20 skills
• Wazaby tw93 🥷 Engineering habits you already know, turned into skills AI assistants like Claude Code, Codex and Cursor can run. 7.3k stars · 8 skills
• gzh-design-skillby isjiamu 把 Markdown 一键排成可直接粘进公众号编辑器的精致 HTML —— 6 套精选主题 + 主题生成器 + 双关卡校验。An AI-agent skill that turns Markdown into paste-ready WeChat article HTML. 4k stars · 1 skill