# 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.

- Skill: `knuckles-team/web-artifacts` (Agent Skill, multi-file: 4 files)
- Install (CLI): `npx skillmds@latest add knuckles-team/web-artifacts`
- Raw SKILL.md: https://api.skillmd.com/api/skills/knuckles-team/web-artifacts/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- License: MIT
- Author: Knuckles-Team (https://skillmd.com/u/knuckles-team)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/knuckles-team/web-artifacts

---

# 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
1. **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/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.

```bash
# 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:

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.