web_artifacts_builder
React, Tailwind, shadcn/ui ile karmaşık web artifacts oluşturma rehberi.
>_
Quick Installnpxskills add vuralserhat86/antigravity-agentic-skills--skill web_artifacts_builderInstructions
Loading…
React, Tailwind, shadcn/ui ile karmaşık web artifacts oluşturma rehberi.
npxskills add vuralserhat86/antigravity-agentic-skills--skill web_artifacts_builderLoading…
React/Tailwind/shadcn ile karmaşık UI artifacts rehberi.
| Kullan | Kullanma |
|---|---|
| Multi-component UI | Basit HTML |
| State management | Static content |
| Routing gerekli | Tek sayfa |
| shadcn components | Vanilla CSS |
import React, { useState } from 'react';
import { Button } from '@/components/ui/button';
import { Card } from '@/components/ui/card';
export default function App() {
const [count, setCount] = useState(0);
return (
<Card className="p-6">
<h1 className="text-2xl font-bold">Counter: {count}</h1>
<Button onClick={() => setCount(c => c + 1)}>
Increment
</Button>
</Card>
);
}
// Button
<Button variant="default|destructive|outline|secondary|ghost|link">
Click me
</Button>
// Card
<Card>
<CardHeader>
<CardTitle>Title</CardTitle>
<CardDescription>Description</CardDescription>
</CardHeader>
<CardContent>Content</CardContent>
<CardFooter>Footer</CardFooter>
</Card>
// Input
<Input placeholder="Enter text..." />
// Dialog
<Dialog>
<DialogTrigger>Open</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Title</DialogTitle>
</DialogHeader>
</DialogContent>
</Dialog>
// Centered
<div className="flex items-center justify-center min-h-screen">
// Grid
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
// Stack
<div className="flex flex-col gap-4">
<div className="
text-sm md:text-base lg:text-lg
p-4 md:p-6 lg:p-8
w-full md:w-1/2 lg:w-1/3
">
// Local state
const [data, setData] = useState([]);
// Form state
const [form, setForm] = useState({
name: '',
email: ''
});
// Controlled input
<Input
value={form.name}
onChange={e => setForm({...form, name: e.target.value})}
/>
Kaynak: shadcn/ui Documentation & Modern React Development Patterns (2025)
npx shadcn-ui@latest add ...) projeye dahil et.useState veya useReducer ile veri akışını yönet.framer-motion veya CSS transitions ekle.| Aşama | Doğrulama |
|---|---|
| 1 | Bileşenler mobil cihazlarda doğru render ediliyor mu? |
| 2 | shadcn bileşenleri projenin tasarım diline (Theme) uygun mu? |
| 3 | State güncellemeleri sırasında yan etkiler (Side effects) doğru yönetiliyor mu? |
Web Artifacts Builder v1.5 - With Workflow
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Set up and use 1Password CLI (op). Use when installing the CLI, enabling desktop app integration, signing in (single or multi-account), or reading/injecting/running secrets via op.
CLI to manage emails via IMAP/SMTP. Use `himalaya` to list, read, write, reply, forward, search, and organize emails from the terminal. Supports multiple accounts and message composition with MML (MIME Meta Language).
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Set up and use 1Password CLI (op). Use when installing the CLI, enabling desktop app integration, signing in (single or multi-account), or reading/injecting/running secrets via op.
CLI to manage emails via IMAP/SMTP. Use `himalaya` to list, read, write, reply, forward, search, and organize emails from the terminal. Supports multiple accounts and message composition with MML (MIME Meta Language).