Exécutez n'importe quel Skill dans Manus
en un clic

Exécutez n'importe quel Skill dans Manus en un clic

Commencer

web-artifacts-builder

Étoiles35

Forks10

Mis à jour5 mai 2026 à 13:25

Guide for creating elaborate, multi-component React artifacts using Tailwind CSS and shadcn/ui.

Installation

Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.

Exécuter dans Manus

Source

The-AgenticFlow

The-AgenticFlow/openflows

Ouvrir le dépôt GitHub Voir les dépôts du créateur

Téléchargement

Exécuter dans Manus

Métiers associésSOC

Basé sur la classification professionnelle SOC

Développeurs de logicielsProfessions informatiques et mathématiques·SOC 15-1252

SKILL.md

readonly

name	web-artifacts-builder
description	Guide for creating elaborate, multi-component React artifacts using Tailwind CSS and shadcn/ui.

FORGE Web Artifacts Builder Skill

Use this skill when building complex, stateful web artifacts that require more than a single-file approach.

Stack Requirements

Framework: React 18 / TypeScript.
Styling: Tailwind CSS + shadcn/ui.
Components: Utilize Radix UI primitives as provided by shadcn/ui.

Workflow

Plan Architecture: Define state management and component hierarchy.
Implementation: Build interactive components with clear prop interfaces.
Bundling: Ensure all assets are optimized for presentation.
Testing: Verify interactive flows (buttons, forms, state transitions).

Design Excellence

Avoid "AI slop" by:

Using custom typography and color themes.
Implementing sophisticated layout patterns (not just centered stacks).
Adding subtle micro-animations and transitions.

Plus depuis ce dépôt

même dépôt

forge-coding

The-AgenticFlow/openflows

Core coding skill for the FORGE builder agent

2026-06-1535

forge-planning

The-AgenticFlow/openflows

Planning skill for the FORGE builder agent

2026-06-1535

sentinel-criteria

The-AgenticFlow/openflows

Evaluation criteria for the SENTINEL reviewer agent

2026-06-1535

sentinel-review

The-AgenticFlow/openflows

Review skill for the SENTINEL reviewer agent

2026-06-1535

algorithmic-art

The-AgenticFlow/openflows

Create generative, code-based art and visualizations using P5.JS and algorithmic principles.

2026-05-0535

canvas-design

The-AgenticFlow/openflows

Visual philosophy and design principles for creating impactful visual content.

2026-05-0535

name	web-artifacts-builder
description	Guide for creating elaborate, multi-component React artifacts using Tailwind CSS and shadcn/ui.

FORGE Web Artifacts Builder Skill

Use this skill when building complex, stateful web artifacts that require more than a single-file approach.

Stack Requirements

Framework: React 18 / TypeScript.
Styling: Tailwind CSS + shadcn/ui.
Components: Utilize Radix UI primitives as provided by shadcn/ui.

Workflow

Plan Architecture: Define state management and component hierarchy.
Implementation: Build interactive components with clear prop interfaces.
Bundling: Ensure all assets are optimized for presentation.
Testing: Verify interactive flows (buttons, forms, state transitions).

Design Excellence

Avoid "AI slop" by:

Using custom typography and color themes.
Implementing sophisticated layout patterns (not just centered stacks).
Adding subtle micro-animations and transitions.