Web & Frontend

dzhng Skill

Break large features into independently verifiable, human-reviewable slices under specs/<feature>/. Use for risky or multi-step feature work that needs upfront questioning, API seams, browser-playable checkpoints, HTML visualizations, screenshot gates, staged implementation plans, recursive fog-of-war reslicing, or proactive research into reference implementations/best practices before slicing. Pairs with your project's verification harness and screenshot gates (the browser checkpoints), [refactor-clean](../refactor-clean/SKILL.md) (review the materialized spec so the plan describes one-owner architecture, not the feature bolted on), [screenshot-critique](../screenshot-critique/SKILL.md) and [compare-screenshots](../compare-screenshots/SKILL.md) (the visual gates), and a code-review pass (audit each slice before it lands).

egorfedorov Skill

Export context report as Markdown or HTML

evermind-ai Bundle

构建、重做、诊断或提升最终由浏览器消费的高完成度视觉前端。用于 HTML/CSS/JS/TS、React/Vue/Svelte/Astro、SVG/Canvas/WebGL 或 web-to-print 的网站、产品界面、数据故事、图解、地图、仿真与游戏；负责真实标杆、表达强度、成熟框架与设计系统、专业 Web 引擎、代表画面和最终像素质量，并与一份主要领域 Skill 组合。不用于纯后端、原生应用或仅以网页作为临时查看器的非 Web 母版。

fattain-naime Bundle

Write a Technical Design Document (TDD) / Software Design Document (SDD) that details how a specific feature or component will be built. Covers problem statement, proposed design, data model, API contracts, alternatives considered, security threat analysis, test plan, and rollback plan. Use when an engineer or team needs to align on the implementation approach before writing code.

findinfinitelabs Skill

Styling conventions for the Chuuk Dictionary frontend — Mantine v8 theme, CSS Modules per page, global app-shell CSS, multilingual / accented-character considerations. Use when adding or modifying styles in `frontend/src/`.

findinfinitelabs Skill

Reality of the Chuuk Dictionary container builds — multi-stage Flask + React app image and a separate Ollama sidecar image. No docker-compose is used. Use when modifying the Dockerfiles, debugging build failures, or adding system dependencies.

findinfinitelabs Skill

Patterns for the Chuuk Dictionary React + TypeScript frontend — Vite, Mantine v8, React 19, React Router v7, axios with cookie sessions, and permission-gated routing. Use when adding pages, wiring API calls, modifying navigation, or extending the user/auth context.

findinfinitelabs Skill

Comprehensive code documentation standards and guidelines for maintaining up-to-date documentation across Python, HTML, CSS, and JavaScript codebases. Use when creating or modifying code to ensure proper documentation practices and maintainable code.

flitzrrr Bundle

Proven, real-world UI interaction patterns from shipped products. Covers hero sections, navigation, cards, pricing, testimonials, CTAs, forms, and footer patterns derived from SiteInspire, CSSDA, Godly, Lapa Ninja, and CSS Winner analysis.

flitzrrr Bundle

WCAG conformance, BFSG compliance, semantic HTML, ARIA, keyboard navigation, contrast, forms, and assistive technologies. Defines binding rules for accessible web interfaces per WCAG 2.1 AA.

goldenprofile Bundle

Разобрать визуальный язык живого сайта в измеренные значения вместо догадок по скриншоту: палитра, шрифты и веса, шкала кеглей, отступы, радиусы, тени, CSS-переменные и сигнатуры компонентов — через getComputedStyle в браузере. Два режима: extract (один URL) и compare (свой сайт против референса). Используй когда пользователь говорит «сделай как у linear.app», «разбери дизайн этого сайта», «вытащи палитру и шрифты», «сравни наш дизайн с референсом», «собери ТЗ по образцу». Проектировать с нуля — frontend-design.

greenpau Bundle

caddy-security authentication portal UI Caddyfile configuration. Use when creating, reviewing, or modifying authentication portal ui blocks, templates, metadata, private links, static assets, themes, languages, logos, auto_redirect_url, custom CSS, custom JavaScript, or custom HTML header injection.

hiboys Bundle

腾讯文档（docs.qq.com）-在线云文档平台，是创建、编辑、管理文档的首选 skill。涉及"新建/创建/编辑/读取/查看/搜索文档"、"保存文件"、"云文档"、"腾讯文档"、"docs.qq.com"等操作，请优先使用本 skill。支持能力：(1) 创建各类在线文档（文档/Word/Excel/幻灯片/思维导图/流程图/智能表格/收集表）(2) 管理知识库空间（创建空间、查询空间列表）(3) 管理空间节点、文件夹结构 (4) 读取/搜索文档内容 (5) 编辑操作智能表 (6) 编辑操作在线文档 (7) 文件管理（重命名、移动、删除、复制、导入导出）(8) 网页剪藏、本地文件/html/文档上云。

huajiexiewenfeng Bundle

Use this skill whenever the user asks to turn a confirmed technical design into a polished offline static HTML visual, including architecture, system boundaries, service interactions, sequence flows, deployment topology, state transitions, failure recovery, or multiple complementary technical diagrams. Do not use it to invent or complete an unconfirmed design, build a product UI, or produce Mermaid, slides, PDF, or PNG-only output.

huajiexiewenfeng Bundle

Use when the user asks to generate, rebuild, refresh, update, preview, or validate an interactive HTML visualization of a Base Graph or Project Graph, including “生成 Base Graph 可视化”, “刷新 Project Graph HTML”, “更新 graph.html”, “查看整个跨项目关系图”, and similar graph/dashboard requests.

ivy-interactive Skill

Generates release patch notes from git diffs/commits between two tags or refs, excluding any frontend changes, and updates the corresponding GitHub release.

ivy-interactive Bundle

Convert a Lovable (lovable.dev) application to an Ivy project. Use when the user wants to migrate from Lovable, convert a Lovable app, or build an Ivy app from a Lovable project. Lovable generates React+Vite+TypeScript apps with Supabase backends. Handles GitHub URLs and local paths.

ivy-interactive Bundle

Create a new Ivy External Widget backed by React npm packages. Use when the user asks to create a widget, external widget, React widget, custom component, or wrap an npm package as an Ivy widget. Scaffolds a C# + React project, installs npm dependencies, implements the widget class and React component, and verifies the build.

johnoconnor0 Bundle

Use to map user journeys, screens, states, interaction flows, accessibility considerations, and screen inventory for a product or feature.

johnoconnor0 Bundle

Use when the user asks to build a UI prototype, clickable MVP, app shell, dashboard mock, product demo, or frontend proof-of-concept; to recreate a design from an image; to redesign an existing component; or to scaffold an app from requirements, UX flows, or an implementation plan.

johnoconnor0 Bundle

Use to define REST, RPC, GraphQL, webhook, event, service, frontend-backend, or external integration contracts.

johnoconnor0 Bundle

Use to turn product and system understanding into a technical design document - context, detailed design per component, data and API design, cross-cutting concerns, environments (preview/development/production), alternatives considered, and ADR candidates.

rikocr8orh8 Skill

96% of accessibility errors are six problems, the same six, for seven years.

rome-os Bundle

Audit an existing UI/UX design (React/JSX/TSX components, HTML, or generated app code) against a tiered ruleset of verifiable UX principles, and produce structured, evidence-cited findings that a coding agent can act on to fix the design. Use this skill whenever the user asks to review, evaluate, critique, audit, or lint a UI, screen, view, form, dialog, dashboard, or frontend codebase for UX quality, design problems, redundancy, confusing labels, missing states, or accessibility of status indicators — even if they don't say the word "audit". Also use it when a coding agent's generated UI needs a quality check before shipping, or when the user asks "is this a good design?" about code.

sap-samples Bundle

Invoke this skill to set up the SAP Application Router (approuter) for Cloud Foundry ONLY for apps that serve static UI (HTML/CSS/JS under webapp/) or require authentication (web.xml <auth-method>/<security-constraint>, or XSUAA). A bare web.xml on an API-only, no-auth backend (a servlet returning JSON/text) does NOT need an approuter — do not invoke this skill for it. Creates the approuter directory with package.json, xs-app.json, and optional extended middleware for SAML2/Basic Auth handling.

scalably-io Bundle

Use when the user requests a report, analysis, summary, dashboard, breakdown, deep dive, or any data deliverable that should render as branded HTML. Triggers: build a report, give me a summary, dashboard, analysis, present the findings, show the breakdown. For visuals only (chart, flowchart, diagram) use a dedicated diagram/chart skill instead. To publish the result publicly, deploy it after with Netlify, Surge, or GitHub Pages.

scalably-io Bundle

Use when the user wants a public URL for an HTML deliverable (report, dashboard, presentation) so they can share it by link. Triggers: publish, share by link, public URL, send the link, make it shareable, deploy this. For creating the HTML content first, load the report skill.

langsensei Bundle

Single-file HTML slide-deck template for Tao Te Ching chapter decks — ink-style, 10-page narrative, hand-rolled engine, reusable CSS variables and animation classes

lovstudio Bundle

Generate or standardize Lovstudio apps, choosing web-only, PWA, or Tauri desktop case-by-case. Covers React/Vite or Next.js web apps plus Tauri + React + shadcn/ui + TanStack Query projects with Lovstudio branding, CI/CD, deploy/release, optional auto update, and lovinsp. Use when the user asks to create a Lovstudio app, web app, or Tauri app, initialize an app shell, apply Lovstudio app standards, or mentions "App生成器", "新建 Lovstudio Web App", "只创建 web", "生成跨端 App", "create Lovstudio app", or "Lovstudio app generator".

lovstudio Bundle

Deploy frontend projects to Vercel with automatic custom domain setup. Handles Vite, Next.js, CRA, and static sites. Auto-configures Cloudflare DNS CNAME records and Vercel domain aliases. Supports SPA routing via vercel.json. Trigger when user says "deploy to vercel", "部署到 vercel", "vercel deploy", or mentions a *.lovstudio.ai / custom domain with vercel deployment.

lovstudio Bundle

Initialize or refactor a frontend project to use TanStack Query as the unified server-state layer. Use when the user asks to install TanStack Query, initialize query infrastructure, migrate ad hoc fetch/invoke/useEffect request state, standardize query keys, or make app network requests share one cache model. Also trigger when the user mentions "初始化 TanStack Query", "重构网络请求", "统一请求缓存", "install-tanstack-query", "TanStack Query refactor", or "useInvokeQuery".

makgunay Skill

Concrete accessibility implementations for SwiftUI apps on macOS and iOS. Covers: adaptive glass effects that fall back to solid backgrounds when Reduce Transparency is enabled, motion-safe animations that respect Reduce Motion, VoiceOver support (accessible labels, custom actions, rotor entries, state change announcements for both macOS and iOS), Dynamic Type with @ScaledMetric and adaptive grid layouts, keyboard navigation with FocusState and onKeyPress, Commands menus with keyboard shortcuts, high contrast mode detection, color-blind safe status indicators using accessibilityDifferentiateWithoutColor, and a complete testing checklist. Use when building any user-facing SwiftUI app to ensure it meets accessibility standards. Especially important when using Liquid Glass (which needs Reduce Transparency fallbacks) or custom animations (which need Reduce Motion handling).

makgunay Skill

System-wide keyboard shortcut registration on macOS using NSEvent monitoring (simple, app-level) and Carbon EventHotKey API (reliable, system-wide). Covers NSEvent.addGlobalMonitorForEvents and addLocalMonitorForEvents, CGEvent tap for keystroke simulation, Carbon RegisterEventHotKey for system-wide hotkeys, modifier flag handling (.deviceIndependentFlagsMask), common key code mappings, debouncing, Accessibility permission requirements (AXIsProcessTrusted), and SwiftUI .onKeyPress for in-app shortcuts. Use when implementing global keyboard shortcuts, hotkey-triggered panels, or system-wide key event monitoring.

makgunay Skill

macOS permission handling for Accessibility (AXIsProcessTrusted), Screen Recording, Full Disk Access, input monitoring, camera, microphone, location, and contacts. Covers TCC (Transparency Consent and Control) database, graceful degradation when permissions are denied, permission prompting patterns, opening System Settings to the correct pane, detecting permission changes, and the privacy manifest (PrivacyInfo.xcprivacy) requirement. Use when implementing features that require system permissions, building permission onboarding flows, or handling denied permissions gracefully.

marco-souza Skill

Format and lint Markdown files following standard conventions and best practices. Use when the user asks to format markdown, lint markdown files, fix markdown formatting, or ensure markdown follows style guidelines. Do NOT use when the user wants to convert between formats (Markdown to HTML, etc.) or when processing non-Markdown content.

microsoft Skill

Object-oriented design principles as a lens for system architecture — SOLID, composition over inheritance, the actor model, design patterns (and when they're wrong), encapsulation, polymorphism, and responsibility-driven design. Use when evaluating code organization, module boundaries, or object/component relationships.