Web & Frontend

astriaai Skill

Use when editing, updating, or iterating on a workspace's landing page HTML (the magazine-style /w/:slug page). Supports incremental edits — fetch the current HTML, make targeted changes, then write it back. NOT for initial generation — that comes from the `brief` field which runs the server-side LANDING_PAGE_PROMPT against Gemini.

awaku7 Bundle

Browser automation CLI for AI agents — Chrome/Chromium via CDP with accessibility-tree snapshots. Navigate, interact, extract, crawl, swarm, and loop. Covers every CLI command with decision trees and copy-paste templates.

axoniq Bundle

Design patterns and principles for building Axon Framework core components. Covers layered API design, component lifecycle, thread safety, and extension points. Use when developing infrastructure components for Axon Framework itself.

azhi-ss Bundle

让 agent 用单文件 HTML 替代 markdown 输出空间性、并行性、可比较或可交互的内容。当用户请求"对比/计划/评审/报告/解释器/幻灯片/编辑器/可视化"或当输出含并排选项、流程图、时间线、代码 diff、可交互元素、需要"指着某处说就是它"的场景时使用。本 skill 是路由器：先用决策框架判断是否走 HTML，再按 9 大类调度对应的子 skill（01-explore / 02-review / 03-design / 04-proto / 05-diagram / 06-slides / 07-research / 08-report / 09-editor），并复用 ../templates/*.html 与 shared/base.css 输出真实可运行的产物。

azhi-ss Skill

子 skill — 原型与可点击流。当用户要决定一个 transition 的 duration/easing（动画沙盒，animation.html）或要"走一遍"4-6 屏交互流验证手感时使用。包含动画沙盒和可点击流两种范式。当父 skill 路由命中"动画/原型/手感/clickable flow"类请求时加载。

azhi-ss Skill

子 skill — 代码评审与理解。当用户要 PR 评审、PR 写作（作者侧）、或要理解陌生代码模块的请求路径/调用栈时使用。包含 PR 评审（diff.html）、PR 写作（pr.html）、模块图三种范式。当父 skill 路由命中"评审/PR/审阅/这段代码怎么工作"类请求时加载。

azhi-ss Skill

子 skill — 设计系统与组件展示。当用户要从 repo 提取 design tokens 做团队 reference、或要把一个组件的所有 variant 平铺在一张 contact sheet 上 review 时使用。包含设计系统参考（design-tokens.html）和组件变体陈列两种范式。当父 skill 路由命中"设计系统/design tokens/组件变体/展示组件库"类请求时加载。

azhi-ss Skill

子 skill — 键盘控制幻灯片。当用户要"上去就能讲"的会议幻灯片、不想用 Keynote/PPT/Google Slides、希望单 HTML 文件左右键翻页时使用。当父 skill 路由命中"幻灯片/slide deck/做几张 slides/讲几页"类请求时加载。

azhi-ss Skill

子 skill — 周期性报告。当用户要写每周状态报告（status.html，KPI/已发货/速率/carryover）或事故 postmortem（postmortem.html，timeline/根因/影响/行动项）时使用。当父 skill 路由命中"周报/状态/status report/postmortem/事故/RCA"类请求时加载。

azhi-ss Skill

子 skill — 自定义编辑界面。当用户要在 HTML 里做"操作然后导出"的小工具时使用——拖拽分类板（triage）、配置编辑器（feature flag editor，输出 diff）、Prompt 调参器（live preview，输出 prompt）。每个编辑器**必须**有"复制结果"按钮让 UI 状态回到 agent。当父 skill 路由命中"triage/排序/配置/调 prompt/编辑器小工具"类请求时加载。

azhi-ss Skill

子 skill — 探索与规划。用户在多种实现方案/设计风格之间未决，或方案选定后要写工程版 RFC 时使用。包含三方案对比（compare.html）、视觉设计方向、实现计划（plan.html）三种范式。当父 skill html-effectiveness 路由命中"对比/选型/RFC/计划"类请求时加载。

azhi-ss Skill

子 skill — 插画与图表。当用户要博客/文档配图（SVG 插图集）、流程图、状态机、deploy pipeline（flowchart.html）时使用。所有图都用内联 SVG，不引外部库（mermaid/d3/excalidraw）。当父 skill 路由命中"图/diagram/flowchart/state machine/pipeline 可视化"类请求时加载。

azhi-ss Skill

子 skill — 研究与学习。当用户问"X 在这个 repo 里怎么工作"（特性解释器，含 TL;DR/折叠步骤/tab 代码/FAQ）或要解释抽象概念（concept.html，含交互式可视化）时使用。当父 skill 路由命中"解释/explain/教我/这是什么/learn"类请求时加载。

harebeats Bundle

Monta um site novo combinando peças já validadas do acervo pessoal do usuário — templates, design systems, componentes, animações, menus, prompts e receitas — em vez de gerar tudo do zero. Acervo vazio: constrói do zero e oferece guardar. Recebe o briefing, decide cor e tipografia antes da identidade, **pergunta que tipo de hero o usuário quer** (tipográfico, editorial, vídeo de fundo, scroll cinemático, WebGL, carrossel) antes de escrever código, e gera a imagem ou o vídeo do hero pelo Higgsfield quando não há material. Escolhe as peças, porta de Vite para Next.js quando preciso, resolve pré-requisitos, dependências e licença de fonte, e salva a composição como receita. Use quando o usuário pedir um site, landing page, hero, menu ou seção nova — "preciso de uma landing pra clínica", "monta um site de joalheria", "quero uma hero pra imobiliária", "preciso de agendamento no site" — ou invocar /kit-montar. Use também quando ele descrever um projeto novo e quiser começar a construir.

harebeats Bundle

Otimiza cena three.js, React Three Fiber ou WebGL cru para celular e máquina fraca — tiering de dispositivo, prewarm no loader para nada compilar no meio do scroll, render loop só quando visível, teto de DPR e de partícula/bloom, transformação de scroll na GPU, textura comprimida, e cena fora do bundle para robô. Use quando o usuário disser "otimiza o 3D", "a cena trava no celular", "está engasgando no scroll", "micro travadas", "deixa leve no mobile", "reduz o custo do WebGL", "o hero 3D está pesado", "optimise the 3D", "jank on scroll", ou antes de entregar qualquer projeto que carregue cena WebGL. Use também, sem esperar o pedido, ao montar seção com three.js ou R3F para cliente — máquina de cliente não é máquina de dev. Traz também o método de depurar shader que renderiza ERRADO, e não devagar, extraindo os internos como pixel: use quando disserem "o shader está errado", "a cena aparece torta", "esse efeito não bate com a referência", ou em qualquer bug visual de shader multi-passe.

harvouscom Bundle

Harvous design-system guardian — tokens, prototype CSS, native DesignSystem views, gallery scenes, visual QA, and cohesion reviews. Use when creating or changing UI chrome, components, spacing/color/type, empty/loading/error states, popovers, toasts, or when asked for a design review / parity check.

hoangsonww Bundle

Implement or review the native SwiftUI 2048 app, its ViewModel, persistence, accessibility, XCTest coverage, or simulator flows.

hoangsonww Bundle

Coordinate gameplay, persistence, UX, or accessibility changes that must remain consistent across the web, iOS, and Android 2048 clients.

hukusuke1007 Bundle

URL・画像・テキスト要件からAIコーディングエージェント向けのDESIGN.mdを生成するスキル。「example.comをDESIGN.md化して」「このサムネをDESIGN.md化して」「クールでポップなLP用のDESIGN.mdを作って」といったリクエストで使用する。Claude Code / Cursor / Stitch に渡せば一貫したUIを生成できる、getdesign.md / awesome-design-md 準拠の9セクション構成のデザイン仕様書を出力する。CSS解析・画像目視抽出・要件生成の3パターンに対応。

hukusuke1007 Bundle

Next.js + Better Auth + PostgreSQL を Docker で構築し、Cloud Run へデプロイするスキル。ローカル開発環境のセットアップから Docker Compose、Dockerfile 作成、Cloud Run + Cloud SQL + Secret Manager を使った本番デプロイまでをカバーする。「Next.js と Better Auth でアプリを作りたい」「Docker で PostgreSQL を使いたい」「Docker で構築したい」「Docker Compose を使いたい」「アプリを Docker 化したい」「Dockerfile を書きたい」「Cloud Run にデプロイしたい」「Cloud SQL や Secret Manager を使いたい」ときに使う。

humanist96 Skill

Diagram design reference library (14 types — architecture, flowchart, sequence, state, ER, timeline, swimlane, quadrant, nested, tree, org chart, layers, venn, pyramid). In ppt-master this is consumed by the Executor when hand-authoring diagram-type SVG pages — it is NOT a standalone HTML generator here. Read for deep per-type layout conventions.

idimsh Skill

Audit website legal compliance for Germany: General Data Protection Regulation (Datenschutz-Grundverordnung, DSGVO), Federal Data Protection Act (Bundesdatenschutzgesetz, BDSG), Digital Services Act (Digitale-Dienste-Gesetz, DDG) Impressum duties, Telecommunications Digital Services Data Protection Act (Telekommunikation-Digitale-Dienste-Datenschutz-Gesetz, TDDDG) cookie consent, German consumer law, pricing, dispute-resolution notices, accessibility, and third-country transfers.

idimsh Skill

Audit and fix accessibility issues following WCAG 2.2 Level AA + a11y project best practices

igniteui Skill

Comprehensive code review checklist for component pull requests ensuring quality, accessibility, and adherence to project conventions

igniteui Skill

Create a new Lit web component following project conventions, including component class, styles, tests, Storybook story, and proper exports

igniteui Skill

Add a reactive property to an existing Lit web component with proper decorators, types, tests, and documentation

igniteui Skill

Update component styling following the SCSS to Lit CSS workflow with proper theme support

igniteui Skill

Step-by-step migration guide from igniteui-grid-lite (IgcGridLite) to the premium igniteui-webcomponents-grids (IgcGridComponent), covering every import, class name, HTML tag, property, event, template, sorting, filtering, and theming API change.

josecortezz25 Skill

Guide for creating, componentizing, and refactoring UI components following Atomic Design. Use this skill whenever the user is actively building a new component, breaking down a UI into components, or refactoring an existing component. Trigger when the user shares a design/screenshot/code to componentize, when they are writing a new component from scratch, when they are splitting a large component into smaller ones, or when they are refactoring a component's structure or responsibilities. Do NOT trigger for general questions about Atomic Design theory — only when there is a concrete component being created, split, or refactored.

josecortezz25 Skill

Set up a new Next.js project with best practices, configured development environment, TypeScript support, and production-ready structure. Use when starting a new Next.js project, initializing a web application, or setting up a project with recommended folder structure and tooling.

kawase1295 Bundle

マージ前レビューのために、自分の worktree ブランチの diff から同梱テンプレート + render.py でレビュー用 HTML を subagent に生成させ、ブラウザで開いてユーザーの承認を待つ。worktree 側の Claude Code セッションで /wt-merge の前に使う。「/wt-review」「レビューページを作って」のとき使う。

kawase1295 Skill

Artifact と同一の設計規約（artifact-design）で HTML ページを作り、claude.ai に publish せずローカルファイルとして公開してブラウザで開く契約。レビューページ・構成図・可視化などで「Artifact 相当をローカルで」のとき使う。Artifact ランタイムが提供する skeleton / CSS リセット / テーマトグル / mermaid 描画を自前で埋め込む。

lavidrori0702 Bundle

Translates the approved HTML mock (mock.html) into an IMPLEMENTATION-SPEC.md for the tableau-dashboard-plugin workflow, mapping every mock element to a concrete Tableau construct so the build step never has to guess. Reconciles coverage the mirror of the mock's checklist so nothing is left unmapped, and applies a simplest-primitive guard defaulting each element to the simplest sufficient Tableau primitive and forcing an explicit justification for any escalation to an advanced feature (Dynamic Zone Visibility, LOD, table calculation, parameter action), so the workbook is not over-engineered. Emits a required Layout section (a fenced JSON container tree with canvas dimensions, nested vert/horz containers, and percentage sizes) so the build reproduces the mock's geometry instead of guessing it. Reads the approved mock.html and DASHBOARD-PLAN.md. Use when the user wants to write the implementation spec, map the mock to Tableau, or when tableau-route reports spec is next. Step 7 of 8 in the workflow.

mew-ton Skill

Provides installation and basic setup instructions for starlight-skills. Use this when you need to add the plugin to a new Astro Starlight project or configure its initial setup. Do not use this if the plugin is already installed, or for frontmatter authoring rules.

mew-ton Skill

Provides all `astro.config.ts` plugin options for starlight-skills. Use this when you need to configure output modes, URL paths, automatic categories, sidebars, or other advanced build settings. Do not use this for frontmatter authoring rules or deployment procedures.

mew-ton Skill

Provides rules for handling interactive frontend components in skill documents. Use this when migrating heavily interactive Astro or React pages into agent skill documents using starlight-skills. Do not use this to format plain text Markdown or configure frontmatter.