Web & Frontend

chorus-aidlc Skill

Use when manually verifying a Chorus frontend change in a real browser — finding local login credentials, driving the running dev server with the Playwright MCP, logging in, navigating to a page, and capturing snapshots/screenshots for e2e acceptance.

stacksjs Skill

Use when working with UI in a Stacks application - components, composables, reactivity (refs/watch/computed), Craft native components, Crosswind CSS, Crosswind utility framework, accessibility, or the STX templating engine. Covers @stacksjs/ui, @stacksjs/stx, and related UI tooling.

navikt Bundle

Integrate or review @navikt/lumi-survey from frontend configuration through verified feedback submission. Use for Lumi widgets, survey choices, transport or privacy-safe context; use `auth-overview` for shared authentication design beyond the Lumi integration.

navikt Bundle

Choose Aksel components, semantic tokens and responsive patterns for Nav interfaces. Use when designing or changing layout, forms or styling with @navikt/ds-react; use `accessibility-review` to verify the resulting user flow.

navikt Skill

Review a Nav frontend flow for accessibility using keyboard, screen-reader, contrast, focus, form and axe evidence. Use when checking an interface before delivery or investigating an accessibility defect; use `aksel-design` for component selection and layout.

zai-org Skill

3D/WebGL extension for the video2code workflow. Load this ADDITIONALLY (a third Skill call, alongside video2code + web-replicate) whenever the reference page is a WebGL/three.js scene — true 3D perspective/depth, particle fields, volumetric light or glow, shader backgrounds, camera flythroughs, or raymarched fractals. It routes you to the `default-3d` template and gives the effect-recipe library, the no-GPU software-render survival budget, and the 3D-specific verification rules. Raw three.js only; never react-three-fiber, never a hand-rolled canvas-2D pseudo-3D engine, and never the source recording's own pixels as the scene.

zai-org Bundle

Tools for building modern React webapps with TypeScript, Tailwind CSS and shadcn/ui. Best suited for applications with complex UI components and state management. Used by the video2code replication workflow to scaffold the project.

zai-org Skill

Replicating a website shown in an operation-recording video as a FULL-STACK project — frontend (layout, style, interactions, animations) AND a real backend (HTTP API + persistent storage) that reproduces the server-side behavior the video demonstrates (SKU/price coupling, cart persistence, validation, state transitions). Use whenever the task provides a screen recording of someone OPERATING a website (browsing, filtering, adding to cart, submitting forms) and asks to replicate it 复刻/复现 as a working full-stack app.

zai-org Skill

CloudBase Web Authentication Quick Guide for frontend integration after auth-tool has already been checked. Provides concise and practical Web authentication solutions with multiple login methods and complete user management.

zai-org Skill

[Deprecated] Use when building frontend Web apps that talk to CloudBase Relational Database via @cloudbase/js-sdk – provides the canonical init pattern so you can then use Supabase-style queries from the browser. New environments should use PostgreSQL with app.rdb() — see postgresql-development skill instead.

compozy Bundle

Set up, customize, or troubleshoot Fumadocs Core/MDX/UI: adapters, loaders, navigation/layouts, search, MDX components, OpenAPI, OG images, exports, and i18n. Excludes generic Markdown, unrelated framework setup, and non-Fumadocs projects.

compozy Bundle

Design, redesign, review, or improve frontend interfaces and design systems. Covers UX, visual hierarchy, accessibility, responsive behavior, performance, copy, theming, motion, edge cases, browser iteration, and ambitious effects. Excludes non-UI work.

compozy Bundle

Tailwind CSS v4 conventions — semantic design tokens for theme-safe styling, mobile-first responsive layouts, and v4-first utilities. Use when styling components or writing className utilities with Tailwind. Don't use for plain CSS, CSS-in-JS (styled-components, emotion), or other utility frameworks.

compozy Bundle

Use OKLCH for web colors: conversion, palettes, contrast, gamut, semantic tokens, Tailwind v4 theming, and light/dark or increased-contrast appearances.

compozy Bundle

Structure or review page/component layouts: grouping, spacing, alignment, hierarchy, disclosure, responsive/container breakpoints, safe areas, full bleed, and RTL/logical properties.

sd0xdev Bundle

Architecture design and documentation. Produces 3-architecture.md with component diagrams, data flow, integration points, and architecture decisions. Reads existing tech-spec as input. Use when: designing system architecture, documenting component interactions, creating architecture docs, producing 3-architecture.md. Not for: tech spec writing (use tech-spec), code implementation (use feature-dev), architecture consulting only (use codex-architect).

sd0xdev Bundle

First-principles UI/IA reasoning: turns a `<scenario>` + API field set into JTBD analysis, principle-anchored field-priority decisions, anti-pattern findings, and a bidirectional UI↔API gap report. Trigger: UI、UX、資訊架構、IA、scenario-driven UI、欄位優先級、information hierarchy. Not for: visual/CSS work (use `/frontend-design`), post-build critique (use `/critique`), or simplifying existing layouts (use `/distill`).

justcyl Bundle

单文件 HTML 幻灯片（Han Xiao 式固定舞台 deck）的制作方案。当需要做网页版 slides、HTML 幻灯片、会议演讲 deck、或希望用浏览器直接放映且导出 PDF 的演示文稿时使用。触发词："HTML slides""网页幻灯片""单文件 deck""hanxiao 风格 slides""做个网页版演讲稿"。

justcyl Bundle

生成带数据嵌入、JS 交互的单文件离线 HTML 页面。当用户要求生成交互式网页、可视化数据浏览器、单文件 SPA、带侧边栏导航的展示页、Markdown 渲染器时触发。触发词："做一个网页"、"生成 HTML"、"交互式展示"、"可视化"、"数据浏览器"。

justcyl Bundle

生成"电子杂志 × 电子墨水"风格的横向翻页网页 PPT（单 HTML 文件），含 WebGL 流体背景、衬线标题 + 非衬线正文、章节幕封、数据大字报、图片网格等模板。当用户需要制作分享 / 演讲 / 发布会风格的网页 PPT，或提到"杂志风 PPT"、"horizontal swipe deck"、"editorial magazine"、"e-ink presentation"时使用。

justcyl Bundle

生成 metauto.ai/neuralcomputer 风格的学术研究随笔 HTML 页面。多文件架构（CSS/JS 静态不动，agent 只生成内容 HTML）。支持封面图、多章节、对比表格、代码卡片（syntax highlight）、KaTeX 公式（颜色标注）、多类型边注（术语/符号/译注）、内联引用、BibTeX 引用块、可折叠摘要、story-aside callout、图片 lightbox。适用于：把论文/博客/技术随笔生成为精美 HTML 发布页面。

calven-ai Skill

Turn data into a self-contained HTML dashboard beside its report, or a spec for the team's BI tool. Use when asked for a dashboard, chart or visual view, or when a report's answer is too multidimensional for prose.

nroze22 Skill

Create technical design documents for Talosix EDC features and systems. Covers architecture, data flow, component design, regulatory compliance, performance, scalability, and security.

nroze22 Skill

Rapid prototyping workflow for design sprints inspired by the thoughtbot methodology. Gathers context from Confluence PRDs and user research, defines prototype scope, generates functional HTML/Tailwind wireframes with visual design, populates realistic clinical trial sample data, and wires up clickable navigation. Outputs a complete prototype ready for usability testing with clinical site users, CRAs, and data managers.

nroze22 Skill

Analyze and optimize application performance for Talosix EDC systems. Covers database query optimization, caching strategies, frontend and backend profiling, and load testing recommendations.

ranbot-ai Skill

Practical patterns for using fp-ts with React - hooks, state, forms, data fetching. Works with React 18/19, Next.js 14/15.

francostino Skill

Audit a component or page for accessibility issues and fix them

airowe Bundle

Accessibility Audit Skill

labring Bundle

Use when a Sealos developer is designing, implementing, or polishing frontend UI and wants it to match the Sealos product style. Applies to Sealos-style launchers, product consoles, management panels, resource lists, detail pages, tables, forms, dialogs, drawers, empty states, and shared components. Focus on Sealos visual language, interaction density, component behavior, and product tone.

laravel Skill

ACTIVATE when the user works on authentication in Laravel. This includes login, registration, password reset, email verification, two-factor authentication (2FA/TOTP/QR codes/recovery codes), passkeys, profile updates, password confirmation, or any auth-related routes and controllers. Activate when the user mentions Fortify, auth, authentication, login, register, signup, forgot password, verify email, 2FA, passkeys, WebAuthn, or references app/Actions/Fortify/, CreateNewUser, UpdateUserProfileInformation, FortifyServiceProvider, config/fortify.php, or auth guards. Fortify is the frontend-agnostic authentication backend for Laravel that registers all auth routes and controllers. Also activate when building SPA or headless authentication, customizing login redirects, overriding response contracts like LoginResponse, or configuring login throttling. Do NOT activate for Laravel Passport (OAuth2 API tokens), Socialite (OAuth social login), or non-auth Laravel features.

leanprover Bundle

Work with Verso Blueprint Lean projects. Use when Codex needs to build or serve Blueprint HTML, query Blueprint labels/dependencies/owners/tags/work queues, debug generated graph/summary/preview data, inspect or edit Blueprint source modules, add conservative Blueprint nodes or metadata, or reason about `lake exe vbp` workflows in repositories using `VersoBlueprint`.

learnprompt Bundle

蔡伦(Cailun)——对话造纸。在任何对话的任何时刻,把刚才讨论出的结论、方案、清单或对比,3 秒排成一页"纸":零依赖、零外链、零JS的单文件HTML,双端断网可开,直接发给别人就能看懂。 只有七种纸:章纸(长文/分析/方法论的杂志式排版)、方纸(单个结论/金句/清单的竖版卡,适合截图分享)、对纸(方案对比/前后对照的双栏页)、招纸(态度宣言/口号的横版海报)、流纸(引文/书摘的墨流纹纪念页)、据纸(把对话里的决定/待办打成一张收据)、签纸(把一句想存起来的话做成一枚可收藏的书签)。不做编辑器、不做模板库、不做75种风格——纸是静的,排版是定死的,所以快。 触发词包括但不限于:把刚才的结论造一页纸、排成一页、做成能分享的页面、把这段讨论变成卡片、出一页对比、给我一页HTML、太长了帮我排个版、把这句话存成书签、留存这一刻、蔡伦造纸。 即使用户只说"把上面整理成一页好看的",也应该触发。 不要用于:多页幻灯片(用 PPT 类 skill)、可交互原型(用设计套件类 skill)、正式印刷品排版、需要持续编辑的文档(纸交付即定稿)。

learnprompt Bundle

绿透——纯黑底 + 流体玻璃 + 克制翠绿的个人工作台视觉体系。用户说「绿透」「给 Obsidian 换绿色玻璃皮肤」「装绿透 UI」「obsidian 绿色主题」「生成个人工作台」「做一个绿色玻璃风格的 dashboard」时触发。三条路：A 给 Obsidian vault 装 CSS snippet 皮肤；B 直接给做好的单文件工作台 HTML；C 用内置提示语模板从零生成工作台 Web 应用。

kortix-ai Skill

REQUIRED for any task that involves operating a desktop application — opening apps, clicking buttons, typing into fields, pressing keys, scrolling, dragging, reading what's on screen, moving or resizing windows, or verifying state after an action. Always use the `agent-cu` CLI commands (open, snapshot, click, type, key, find, scroll, drag, batch, wait-for) instead of falling back to `open -a`, AppleScript, `osascript`, `xdotool`, `System Events`, or any other shell workaround — those can't read state back, don't verify, and are fragile across app updates. agent-cu is the canonical computer-use tool for controlling any macOS / Linux / Windows / Electron app via accessibility APIs. Trigger on prompts like "open Music and play X", "search for Y in Maps", "fill out this form", "compute in Calculator", "send a Slack message", "drag this file", "read what's in the current window", or anything where a human would click/type/look at a desktop app.

leeguooooo Bundle

Use when creating, updating, or publishing HTML documentation through htmldock. Triggers include uploading HTML, publishing generated HTML docs, choosing htmldock paths, installing the htmldock CLI, or using htmldock tokens.

leejpsd Skill

Wire and operate @leejpsd/nextjs-cache-handler — Redis caching for self-hosted Next.js 15/16 (ISR cacheHandler + 'use cache' cacheHandlers). Use when adding Redis caching to a Next.js app, choosing or wiring cache handlers, debugging cache invalidation (revalidateTag / updateTag / revalidatePath, stale or never-updating pages), fixing multi-instance cache inconsistencies, deploy isolation (static chunk 404s after deploys), or deploying self-hosted Next.js with Redis on AWS/ECS/Kubernetes.