Token导航 LogoToken导航TokenDH.com
中转站排行榜
前端设计操作浏览器github未标认证来源可访问许可证需确认审计通过

static-web-artifacts-builder（静态 Web 工件构建器）

Agent Skill

static-web-artifacts-builder 用于处理 GitHub 仓库、Issue、Pull Request 和代码协作信息，适合在 Codex、Claude、Cursor、Gemini CLI 中需要围绕仓库状态、代码变更或协作事项进行整理时使用。可结合来源仓库、安装命令和原始 README 继续核验具体用法。安装前建议确认权限范围、维护状态，以及是否会触发联网、命令执行或文件读写。

总安装

588

周安装

25

GitHub Stars

217

下载量

206
CodexClaudeCursorGemini CLI

安装说明

本站只整理中文说明和来源信息，不托管安装包，也不代用户安装。

GitHub

来源数

2

许可证

unknown

最后核验

2026-05-01

来源状态

来源可访问

安装方式

通过对话安装

复制提示词发给支持本地命令或 Skills 的 AI 助手，先确认命令和权限，再让它执行。

请帮我安装这个 Agent Skill：static-web-artifacts-builder（静态 Web 工件构建器）
来源仓库：https://github.com/mathews-tom/praxis-skills
仓库路径：skills/static-web-artifacts-builder
安装命令：
npx skills add https://github.com/mathews-tom/praxis-skills --skill static-web-artifacts-builder
安装前请先检查当前环境是否支持对应 CLI，并向我确认将要执行的命令、安装目录、联网范围和文件读写权限；确认后再执行。

命令行安装

复制命令到本机终端执行。该命令会通过 npx skills 从第三方来源获取 Skill；本站只展示命令，不托管安装包，也不自动执行。

skills.shnpx skills
npx skills add https://github.com/mathews-tom/praxis-skills --skill static-web-artifacts-builder

简介

static-web-artifacts-builder 用于处理 GitHub 仓库、Issue、Pull Request 和代码协作信息，适合在 Codex、Claude、Cursor、Gemini CLI 中围绕仓库状态、代码变更或协作事项进行整理。

  • 它可结合来源仓库、安装命令和原始 README 继续核验具体用法。
  • 安装方式：github，命令为 npx skills add https://github.com/mathews-tom/praxis-skills --skill static-web-artifacts-builder。
  • 当前分类为前端设计，适用宿主包括 Codex、Claude、Cursor、Gemini CLI。
  • 安装前建议确认权限范围、维护状态，以及是否会触发联网、命令执行或文件读写。

SKILL.md

Static Web Artifacts Builder

To build high-density static infographic artifacts, follow these steps:

  1. Initialize the project scaffold using scripts/init-artifact.sh
  2. Develop your artifact by editing the generated HTML file(s)
  3. Validate and finalize using scripts/bundle-artifact.sh
  4. Display artifact to user

Stack: Vanilla HTML5 + CSS3 (Grid/Flexbox) + inline SVG — zero runtime dependencies

Design & Style Guidelines

VERY IMPORTANT: To avoid what is often referred to as "AI slop", avoid excessive centered layouts, purple gradients, uniform rounded corners, and Inter font.

Infographic-Specific Constraints

  • Density: Content-to-whitespace ratio ≥ 70:30. Maximize signal per pixel.
  • Geometry: Layered/nested containers, shaped regions (clip-path, border-radius variations), gradient fills, subtle box-shadows — not flat uniform boxes.
  • Iconography: Inline SVG icons for every major concept. No naked text labels.
  • Color: Purposeful palette (3-4 hues + neutrals), encoding meaning (category, flow direction, severity). Define as CSS custom properties.
  • Flows: Directional connectors with SVG arrowheads, curved paths, labeled edges. Architecture diagrams = layered tiers with bidirectional data flows, not flat node graphs.
  • Layout math: CSS Grid with explicit grid-template-columns/grid-template-rows fractional allocations. No auto-spacing defaults. Every margin/padding intentional.

Quick Start

Step 1: Initialize Project

Run the initialization script to create a new static project:

bash scripts/init-artifact.sh <project-name>
cd <project-name>

This creates a minimal scaffold with:

  • ✅ Template HTML with CSS custom properties (theming)
  • ✅ CSS Grid + Flexbox layout utilities (inline <style>)
  • ✅ Print-ready viewport meta configuration
  • ✅ No node_modules, no package.json, no build toolchain

Step 2: Develop Your Artifact

Edit the generated index.html directly. Each HTML file = one page = one clear message.

Key patterns:

  • Use CSS Grid grid-template-areas for named region layouts
  • Use fr units for proportional spatial allocation
  • Embed SVG icons inline (not as external references)
  • Use CSS custom properties (--color-primary, --color-accent, etc.) for palette cohesion
  • Use clip-path, border-radius, gradients, and box-shadow for visual depth

Step 3: Validate and Finalize

bash scripts/bundle-artifact.sh

This validates the artifact is fully self-contained:

  • Checks for zero external resource references (no CDN links, no external stylesheets/scripts)
  • Verifies inline SVG presence
  • Reports file size
  • Copies validated output to bundle.html

Step 4: Share Artifact with User

Share the validated HTML file in conversation with the user so they can view it as an artifact.

When to Use This Skill vs Other Visual Skills

TaskUse This SkillUse Instead
Rich infographic with multiple sections, high data densityYes—
Self-contained dashboard with interactive tabs or togglesYes—
Architecture diagram with bidirectional flows and layered tiersYesarchitecture-diagram for auto-generated from code
Simple concept illustration or icon-style imageNoconcept-to-image
Slide deck or multi-page presentationNohtml-presentation
Architecture diagram generated from existing codebaseNoarchitecture-diagram
Single-page visual where CSS Grid layout control is criticalYes—
Artifact must be screenshot-ready via PlaywrightYes (with caveat — see Limitations)—

Error Handling

ErrorCauseResolution
CDN link detected by bundle-artifact.shExternal stylesheet or script reference in HTMLInline all CSS and JS — no external URLs allowed in output
Content overflow / clipping in browserViewport too small or fixed heights with overflow:hiddenUse min-height instead of height; test at 1440px wide; use overflow: auto on scroll regions
Playwright screenshot cuts off contentPage height exceeds screenshot viewportSet page.setViewportSize to match content dimensions; use fullPage: true
bundle-artifact.sh reports missing inline SVGSVG loaded via <img src> or external refReplace with inline <svg> block directly in HTML
File size too large to share as artifactEmbedded base64 images or verbose SVGOptimize SVG paths; avoid embedding raster images

Limitations

  • Browser required for screenshots: Rendering and Playwright-based screenshot capture require a browser runtime. The HTML file itself has no server-side dependency, but visual validation needs a browser.
  • No server-side rendering: Output is purely client-side. Dynamic data, API calls, or server-computed content are not supported.
  • No persistent state: The artifact has no backend. User interactions (form inputs, toggles) reset on page reload and cannot be saved.
  • File size guidance: Aim for under 500KB. Artifacts above 1MB may not render as inline conversation artifacts in some Claude interfaces.
  • Font availability: System fonts only (or inline base64-encoded web fonts). Do not reference Google Fonts or other external font CDNs.
  • Print fidelity: CSS print media queries are supported but browser print rendering varies. Test @media print explicitly if print output is a requirement.

适合场景

01

用户想查找某类 Agent Skill 时

02

需要根据任务场景推荐可安装能力包时

03

需要对比不同来源的安装命令和来源信息时

能力概览

能力 1

按任务关键词查找相关 Skills

能力 2

展示可复制的安装命令

能力 3

保留来源站点、仓库和原始说明，方便继续核验

能力 4

展示第三方安全扫描或审计结果

安装后应在对应宿主中按原始 README 的触发条件使用；具体调用方式请以来源页面和 README 为准。

平台分布

Codex

37.84%
按下载量换算78

Claude

32.72%
按下载量换算67

Cursor

17.07%
按下载量换算35

Gemini CLI

10.29%
按下载量换算21

安全审计

Gen Agent Trust Hub

通过

Socket

通过

Snyk

通过

权限和风险

操作浏览器

该 Skill 可能涉及浏览器控制能力，使用时可能读取或操作网页内容，需要在受控环境中确认权限边界。

安装前确认

本站仅展示第三方公开信息，不托管安装包，不提供自动安装或运行环境。安装前应自行审查源码、依赖和命令行为。当前只有一个来源，正式发布前建议补源仓库或其他目录站核验。

来源信息

GitHub 仓库

github.com

/mathews-tom/praxis-skills

SKILL.md 来源

github.com

/mathews-tom/praxis-skills/tree/main/skills/static-web-artifacts-builder

skills-sh

skills.sh

/mathews-tom/praxis-skills/static-web-artifacts-builder

继续浏览同类 Skills

更多前端设计 Skills（10,216）返回 Skills 目录

上一个 Skill

state-ux-flow-builder（状态用户体验流程构建器）

用于辅助前端页面、组件、样式和交互逻辑的开发与维护。它适合让 Agent 生成或审查 React、Next.js、Vue、Tailwind、CSS 等相关代码，整理组件结构，或定位布局和性能问题。使用时需要结合项目现有设计系统、路由和构建方式，避免只生成孤立片段；涉及页面改动时，应配合本地预览和构建检查确认视觉效果。

下一个 Skill

static-web-artifacts-builder（静态 Web 工件构建器）

static-web-artifacts-builder 用于处理 GitHub 仓库、Issue、Pull Request 和代码协作信息，适合在 Codex、Claude、Cursor、Gemini CLI 中需要围绕仓库状态、代码变更或协作事项进行整理时使用。可结合来源仓库、安装命令和原始 README 继续核验具体用法。安装前建议确认权限范围、维护状态，以及是否会触发联网、命令执行或文件读写。