Converts static web or Next.js projects into ArcBlock blocklets using provided DID. Analyzes project structure, generates configuration files, and validates setup. Requires blocklet DID as parameter.
/plugin marketplace add ArcBlock/agent-skills/plugin install blocklet@arcblock-agent-skillsThis skill inherits all available tools. When active, it can use any tool Claude has access to.
assets/default-blocklet-logo.pngassets/nextjs-entry.txterrors.mdexamples.mdparse-project-meta.jstemplates/README-template.mdtemplates/nextjs-blocklet.ymltemplates/static-blocklet.ymlConverts static web projects and Next.js applications into ArcBlock blocklets with proper configuration and validation.
did (required): Pre-generated blocklet DID (format: z8ia...)
Example: "Convert this project to blocklet using DID z8ia4e5vAeDsQEE2P26bQqz9oWR1Lxg9qUMaV"
If missing or invalid, exit immediately with error message: "Blocklet DID parameter is required."
Skip directories: node_modules/, .pnpm/, .yarn/, .cache/, .turbo/, bower_components/
Check for ANY of:
package.json with web-related dependenciesindex.html in root, public/, or src/ or common locationsvite.config.*, webpack.config.*, next.config.*, etc.)If none found → EXIT with error message: "No web application detected."
Check package.json dependencies for:
next in dependencies → Next.js projectImmediately after confirming project type, extract metadata from package.json:
title: Human-friendly project name suitable for public display (e.g., my-cool-app → My Cool App)description: A clear, non-technical description for end users. If package.json description is too technical, rewrite it to be user-friendly.Emit using the protocol below, then continue with the workflow:
<<<BLOCKLET_PROJECT>>>
{"title": "...", "description": "..."}
<<<END_BLOCKLET_PROJECT>>>
bun install && bun run build
If either fails → EXIT with error output.
For Next.js projects: Output directory is always .next — skip detection.
For static webapps: Find index.html in: dist/ → build/ → out/ → public/ → ./, or any other common locations. If not found → EXIT with error message: "No index.html entry point found."
Verify the output directory exists and contains expected files before proceeding.
{baseDir}/templates/README-template.md{baseDir}/assets/default-blocklet-logo.png{baseDir}/assets/nextjs-entry.txt to project root as index.jsFor Next.js projects: Use template from {baseDir}/templates/nextjs-blocklet.yml
For static webapps: Use template from {baseDir}/templates/static-blocklet.yml
Populate with:
did and name: Use provided DIDtitle: Human-readable project namedescription: From package.jsonblocklet meta
For Next.js projects:
blocklet bundle --simple --create-release --external="*"
For static webapps:
blocklet bundle --create-release
Fix any errors and retry.
Do NOT output any summary or recap after completion. Simply end silently after successful verification. The tool outputs already provide sufficient feedback to the user.
See {baseDir}/errors.md for all error conditions and suggestions.
assets/default-blocklet-logo.png - Default logoassets/nextjs-entry.txt - Next.js entry point sampletemplates/static-blocklet.yml - Static webapp config templatetemplates/nextjs-blocklet.yml - Next.js config templatetemplates/README-template.md - README templateexamples.md - Workflow exampleserrors.md - Error reference{baseDir} resolves to the skill's installation directory.
This skill emits structured data that callers can parse programmatically.
Emitted immediately after project validation succeeds (before build):
<<<BLOCKLET_PROJECT>>>
{"title": "...", "description": "..."}
<<<END_BLOCKLET_PROJECT>>>
| Field | Type | Description |
|---|---|---|
title | string | Human-friendly project name for public display |
description | string | Non-technical description for end users |
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.
Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.
Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.