$pwd:

web-artifacts-builder

Name: Web Artifacts Builder
Author: oferhalevi

// Build interactive web applications and artifacts with HTML, CSS, and JavaScript. Use this skill when creating standalone web applications, interactive tools, dashboards, or web-based utilities that can run in a browser.

$ git log --oneline --stat

stars:0

forks:0

updated:December 11, 2025 at 09:34

SKILL.md

readonly

package.json

"author": "oferhalevi"

"repository": "oferhalevi/codex-skills-integration"

$ git clone

$ download --local

[HINT] SKILL.mdと関連ファイルを含む完全なスキルディレクトリをダウンロード

related-imports.ts

// 関連スキル

import frontend-implementation

from "jpicklyk"

111

import frontend-storyboard-artist

from "shredbx"

import web-development

from "TencentCloudBase"

308

import frontend-development

from "pluginagentmarketplace"

import frontend-design

from "bowlneba"

import elegant-design

from "rand"

import frontend-design

from "xbklairith"

import gemini-frontend-assistant

from "MrOwaisAbdullah"

import mvp-product-director

from "ledagame"

import frontend-design

from "aster-void"

import app-development

from "asmith7013"

import svelte-design

from "ajianaz"

name	web-artifacts-builder
description	Build interactive web applications and artifacts with HTML, CSS, and JavaScript. Use this skill when creating standalone web applications, interactive tools, dashboards, or web-based utilities that can run in a browser.

Web Artifacts Builder Skill

This skill guides the creation of interactive, self-contained web applications and artifacts that run directly in a browser.

What is a Web Artifact?

A web artifact is a complete, self-contained web application that:

Runs entirely in the browser (no backend required)
Uses HTML, CSS, and JavaScript
Can be saved as a single file or a small set of files
Provides interactive functionality and user interface

When to Use This Skill

Use this skill when:

User asks to create an interactive tool or utility
User wants a web-based calculator, converter, or generator
User needs a dashboard or data visualization
User wants to build a game or interactive experience
User needs a form or data entry application
User wants a note-taking app or similar utility

Best Practices

Structure

Keep artifacts self-contained when possible
Use semantic HTML for accessibility
Organize CSS with clear structure and comments
Use modular JavaScript with clear function organization

Interactivity

Provide immediate visual feedback for user actions
Use smooth transitions and animations appropriately
Implement keyboard shortcuts for power users
Ensure responsive design for different screen sizes

Performance

Minimize external dependencies
Optimize images and assets
Use efficient JavaScript patterns
Test performance on various devices

User Experience

Clear visual hierarchy and navigation
Intuitive controls and interactions
Helpful error messages and guidance
Accessibility considerations (ARIA labels, keyboard navigation)

Common Patterns

State Management

Use JavaScript objects or the browser's localStorage for managing application state:

const state = {
  data: [],
  settings: {}
};

Event Handling

Organize event listeners for clean, maintainable code:

document.addEventListener('DOMContentLoaded', () => {
  setupEventListeners();
  initializeApp();
});

DOM Manipulation

Use modern DOM APIs for efficient updates:

const element = document.querySelector('.selector');
element.textContent = 'Updated content';

Tips for Great Artifacts

Visual Polish: Pay attention to spacing, typography, and color harmony
Responsive Design: Test on mobile, tablet, and desktop
Performance: Avoid unnecessary re-renders and DOM updates
Accessibility: Include proper labels, alt text, and keyboard navigation
Documentation: Add comments explaining complex logic