About

Imported from Knuckles-Team/universal-skills (universal_skills/web-development/web-artifacts/SKILL.md). Install upstream with npx skills add Knuckles-Team/universal-skills --skill web-artifacts. Copyright stays with the author (MIT).

Web & UI Artifacts

Name: web-artifacts
Author: Knuckles-Team

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.

Use it

Copy one of these into your project. Installing also returns the manifest and these snippets.

yaml

targets:
  - https://api.opensmartroute.ai/api/v1/registry/knuckles-team-universal-skills-web-artifacts/manifest   # or paste the manifest below

Manifest

An Open Capability Manifest: the router reads it to know what this does, what it costs and when to pick it.

knuckles-team-universal-skills-web-artifacts.ocm.jsonjson

{
  "ocm": "1",
  "id": "knuckles-team-universal-skills-web-artifacts",
  "kind": "skill",
  "name": "web-artifacts",
  "description": "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.",
  "publisher": "Knuckles-Team",
  "version": "1.0.0",
  "capabilities": {
    "domains": [
      "marketing"
    ],
    "tags": [
      "skill-md",
      "frontend",
      "ui",
      "react",
      "tailwind",
      "figma",
      "brand",
      "design",
      "web-builder",
      "github"
    ],
    "languages": [
      "en"
    ]
  },
  "quality_prior": 0.6,
  "examples": [
    "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."
  ],
  "primary": false,
  "metadata": {
    "source": {
      "provider": "github",
      "repository": "https://github.com/Knuckles-Team/universal-skills",
      "path": "universal_skills/web-development/web-artifacts/SKILL.md",
      "ref": "71edf1252b1eb762283a76bec1b5d2dee0b2dc53",
      "url": "https://github.com/Knuckles-Team/universal-skills/blob/71edf1252b1eb762283a76bec1b5d2dee0b2dc53/universal_skills/web-development/web-artifacts/SKILL.md",
      "key": "Knuckles-Team/universal-skills/universal_skills/web-development/web-artifacts/SKILL.md"
    },
    "license": "MIT"
  },
  "instructions": "# Web & UI Artifacts\n\n## Overview\n\nThis skill unifies guidelines and tooling for building frontend web artifacts.\n\n---\n\n## Design Discovery (Phase 1)\nBefore scaffolding, identify:\n- **Core Narrative**: What story does this artifact tell?\n- **Interactive Depth**: Does the user need to filter, drill-down, or just observe?\n- **Visual Aesthetic**: Map to a preset (see `website-builder` Presets A-D).\n\n## Artifact Design Principles\n1. **Self-Contained**: Artifacts must be portable. Use CDNs for heavy libraries (React, D3, GSAP).\n2. **Interactive Data Visualization**: Use D3.js or SVG for complex dat",
  "cost": {
    "context_tokens": 481
  }
}

Fetch it by URL: GET /api/v1/registry/knuckles-team-universal-skills-web-artifacts/manifest?version=1.0.0

Reviews

Star ratings from people who tried it. One review per account; edit yours any time.

No reviews yet. Install it, try it, and be the first to rate it.