How do I install the Web Artifacts skill?

Run npx skillmds@latest add knuckles-team/web-artifacts in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Web Artifacts safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Web Artifacts?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Web Artifacts free to use?

Yes. Installing skills from SkillMD is free. This skill is licensed under MIT.

Who published Web Artifacts?

Knuckles-Team (@knuckles-team) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Web Artifacts by knuckles-team — Agent Skill

Name: Web Artifacts
Author: Knuckles-Team

Web Artifacts

Consolidated skill for frontend design, UI building, and artifact generation. Use when building React/Tailwind/shadcn web applications, creating Figma-based implementations, or adhering to brand guidelines.

Knuckles-Team 46ff3c7 4 files · 32.8 KB Updated Sep 17, 2026

File contents

Web & UI Artifacts

Overview

This skill unifies guidelines and tooling for building frontend web artifacts.

Design Discovery (Phase 1)

Before scaffolding, identify:

Core Narrative: What story does this artifact tell?
Interactive Depth: Does the user need to filter, drill-down, or just observe?
Visual Aesthetic: Map to a preset (see website-builder Presets A-D).

Artifact Design Principles

Self-Contained: Artifacts must be portable. Use CDNs for heavy libraries (React, D3, GSAP).
Interactive Data Visualization: Use D3.js or SVG for complex data representations.
Motion for Meaning: Use GSAP to reveal relationships between data points, not just for decoration.
Accessibility: Maintain high contrast and keyboard navigability.

Capabilities/Tools

We provide scripts to scaffold and bundle interactive React components using shadcn/ui and Tailwind.

scripts/init-artifact.sh: Initializes a new frontend project structure.
scripts/bundle-artifact.sh: Bundles the React project into a single interactive HTML file.

# Example
bash scripts/init-artifact.sh my-new-component
bash scripts/bundle-artifact.sh my-new-component

Design Guidelines & Workflows

The docs/ folder contains reference materials and standard operating procedures for achieving high-quality design outcomes:

Brand Guidelines: Always consult brand requirements when selecting colors, typography, or component styles.
Figma Implementation: When given a Figma design or mock, refer to the documentation to correctly map tokens to Tailwind classes.
Frontend Architecture: Ensure functional components are used, React hooks are managed properly, and the design is mobile-responsive.
Agent UI Capabilities: Make sure to use single-file HTML/JS bundles generated by the builder scripts to ensure compatibility with agentic browser tools.

---name: web-artifactsdescription: Consolidated skill for frontend design, UI building, and artifact generation. Use when building React/Tailwind/shadcn web applications, creating Figma-based implementations, or adhering to brand guidelines.license: MIT---# Web & UI Artifacts## OverviewThis skill unifies guidelines and tooling for building frontend web artifacts.---## Design Discovery (Phase 1)Before scaffolding, identify:- **Core Narrative**: What story does this artifact tell?- **Interactive Depth**: Does the user need to filter, drill-down, or just observe?- **Visual Aesthetic**: Map to a preset (see `website-builder` Presets A-D).## Artifact Design Principles1. **Self-Contained**: Artifacts must be portable. Use CDNs for heavy libraries (React, D3, GSAP).2. **Interactive Data Visualization**: Use D3.js or SVG for complex data representations.3. **Motion for Meaning**: Use GSAP to reveal relationships between data points, not just for decoration.4. **Accessibility**: Maintain high contrast and keyboard navigability.---## Capabilities/ToolsWe provide scripts to scaffold and bundle interactive React components using shadcn/ui and Tailwind.- `scripts/init-artifact.sh`: Initializes a new frontend project structure.- `scripts/bundle-artifact.sh`: Bundles the React project into a single interactive HTML file.```bash# Examplebash scripts/init-artifact.sh my-new-componentbash scripts/bundle-artifact.sh my-new-component```## Design Guidelines & WorkflowsThe `docs/` folder contains reference materials and standard operating procedures for achieving high-quality design outcomes:1. **Brand Guidelines**: Always consult brand requirements when selecting colors, typography, or component styles.2. **Figma Implementation**: When given a Figma design or mock, refer to the documentation to correctly map tokens to Tailwind classes.3. **Frontend Architecture**: Ensure functional components are used, React hooks are managed properly, and the design is mobile-responsive.4. **Agent UI Capabilities**: Make sure to use single-file HTML/JS bundles generated by the builder scripts to ensure compatibility with agentic browser tools.

Frequently asked questions