Web Artifacts Builder
anthropics/skills
Builds multi-component claude.ai HTML artifacts as a small React, TypeScript and Tailwind project, then bundles it into one shareable HTML file.
Apply Shadmin feature-development standards (backend Go/Gin/Ent + frontend React/TS).
$ npx skills add ahaodev/shadmin --skill shadmin-dev -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install ahaodev/shadmin shadmin-dev --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/ahaodev/shadmin.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agent/skills/shadmin-dev .claude/skills/shadmin-dev && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "shadmin-dev" agent skill from https://github.com/ahaodev/shadmin/tree/main/.agent/skills/shadmin-dev into .claude/skills/shadmin-dev/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "shadmin-dev", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/ahaodev/shadmin/tree/main/.agent/skills/shadmin-devType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add ahaodev/shadmin --skill shadmin-dev -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install ahaodev/shadmin shadmin-dev --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/ahaodev/shadmin.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.agent/skills/shadmin-dev .agents/skills/shadmin-dev && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "shadmin-dev" agent skill from https://github.com/ahaodev/shadmin/tree/main/.agent/skills/shadmin-dev into .agents/skills/shadmin-dev/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "shadmin-dev", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add ahaodev/shadmin --skill shadmin-dev -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install ahaodev/shadmin shadmin-dev --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/ahaodev/shadmin.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.agent/skills/shadmin-dev .cursor/skills/shadmin-dev && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "shadmin-dev" agent skill from https://github.com/ahaodev/shadmin/tree/main/.agent/skills/shadmin-dev into .cursor/skills/shadmin-dev/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "shadmin-dev", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/ahaodev/shadmin.git --path .agent/skills/shadmin-dev--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add ahaodev/shadmin --skill shadmin-dev -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install ahaodev/shadmin shadmin-dev --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/ahaodev/shadmin.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.agent/skills/shadmin-dev .gemini/skills/shadmin-dev && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "shadmin-dev" agent skill from https://github.com/ahaodev/shadmin/tree/main/.agent/skills/shadmin-dev into .gemini/skills/shadmin-dev/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "shadmin-dev", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install ahaodev/shadmin shadmin-devInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add ahaodev/shadmin --skill shadmin-dev -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/ahaodev/shadmin.git skills-src && mkdir -p .github/skills && cp -r skills-src/.agent/skills/shadmin-dev .github/skills/shadmin-dev && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "shadmin-dev" agent skill from https://github.com/ahaodev/shadmin/tree/main/.agent/skills/shadmin-dev into .github/skills/shadmin-dev/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "shadmin-dev", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add ahaodev/shadmin --skill shadmin-dev -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install ahaodev/shadmin shadmin-dev --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/ahaodev/shadmin.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.agent/skills/shadmin-dev .opencode/skills/shadmin-dev && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "shadmin-dev" agent skill from https://github.com/ahaodev/shadmin/tree/main/.agent/skills/shadmin-dev into .opencode/skills/shadmin-dev/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "shadmin-dev", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
shadmin-devApply Shadmin feature-development standards (backend Go/Gin/Ent + frontend React/TS).
Shadmin Dev is an agent skill from ahaodev/shadmin. Apply Shadmin feature-development standards (backend Go/Gin/Ent + frontend React/TS). Use when adding/modifying features, CRUD modules, API routes/controllers/usecases/repositories, Ent schemas, frontend pages/routes, React components, TanStack hooks, or any full-stack work in this project. Trigger whenever the user mentions new features, backend changes, frontend changes, database schema changes, permissions, UI pages, tables, forms, or API endpoints — even if they don't explicitly say "feature development."
Its SKILL.md is about 2.7k tokens, which your agent loads only when the skill is triggered. The skill folder holds 3 other files, including reference files (for example `references/backend.md` and `references/frontend.md`).
It sits in Frontend & Design, covering REST APIs, React components and Database schema design. It works with TanStack, React, TypeScript and Vite. The repository describes itself as: An Enterprise-Grade Full-Stack RBAC Permission Management System Built with Go + React. The licence is MIT.
6 steps, taken from the step headings in SKILL.md.
Read from SKILL.md and the folder at commit c35806d. It shows what the files ask for, not the result of running them.
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Shell commands in SKILL.md call:
gopnpmFrom the folder's file list and the shell code blocks in SKILL.md.
No URLs in SKILL.md. Its commands use pnpm, which can reach the network depending on how they are called.
From URLs in SKILL.md, links to its own repository left out.
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Shadmin Dev loads about 2.7k tokens when it runs, and up to ~6.2k if it reads all its reference files. Until then it costs about 132 tokens; SKILL.md has 817 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
The full file from ahaodev/shadmin at commit c35806d, republished under its MIT licence (© ahaodev). 817 words, ~2,740 tokens.
.claude/skills/shadmin-dev/SKILL.md (or your agent's skills folder). This skill also uses 2 other files; get the full folder from GitHub.Guide full-stack feature development through Shadmin's clean architecture, producing code that compiles, passes lint/tests, and follows established patterns. Most features require both backend and frontend changes — this skill covers the end-to-end workflow.
┌─────────────────────────────────────────────────────────────────────┐
│ Frontend (React 19 + TypeScript + Vite) │
│ Route File → Page Component → TanStack Query Hook → API Service │
│ ↕ Zustand (auth-store) ↕ Permission checks │
├─────────────────────────────────────────────────────────────────────┤
│ HTTP (Axios apiClient ← Bearer Token injection) │
├─────────────────────────────────────────────────────────────────────┤
│ Backend (Go + Gin + Ent ORM) │
│ Route → [JWT MW → Casbin MW] → Controller → Usecase → Repository │
│ ↕ Domain (contracts, DTOs, errors) ↕ Ent (DB, migrations) │
└─────────────────────────────────────────────────────────────────────┘Backend layers — each has exactly one responsibility:
| Layer | Directory | Responsibility |
|---|---|---|
| Domain | domain/ | Entity structs, DTOs, Repository/UseCase interfaces, errors, response helpers |
| Schema | ent/schema/ | DB schema → run go generate ./ent after changes |
| Repository | repository/ | Data access via Ent, domain↔ent conversion, pagination |
| Usecase | usecase/ | Business logic, validation, context.WithTimeout |
| Controller | api/controller/ | HTTP parsing only, Swagger annotations, status code mapping |
| Route | api/route/ | Route registration, middleware wiring |
| Factory | api/route/factory.go | DI: repo → usecase → controller construction |
| Bootstrap | bootstrap/ | App init, DB, Casbin, seeds |
Frontend layers:
| Layer | Directory | Responsibility |
|---|---|---|
| Types | frontend/src/types/ | TypeScript interfaces matching backend DTOs |
| Services | frontend/src/services/ | Axios API wrappers, date parsing |
| Features | frontend/src/features/ | Page components, tables, dialogs, forms, hooks |
| Routes | frontend/src/routes/ | TanStack Router file-based routing |
| Stores | frontend/src/stores/ | Zustand state (auth, permissions) |
| Constants | frontend/src/constants/ | Permission strings, enums |
State explicitly:
system:project:add)Group by layer — this catches missing pieces early:
# Backend (implement in this order)
domain/<resource>.go
ent/schema/<resource>.go
repository/<resource>_repository.go
usecase/<resource>_usecase.go
api/controller/<resource>_controller.go
api/route/<resource>_routes.go (or modify system_routes.go)
api/route/factory.go
# Frontend (implement in this order)
frontend/src/types/<resource>.ts
frontend/src/services/<resource>Api.ts
frontend/src/features/<module>/<resource>/components/*-provider.tsx
frontend/src/features/<module>/<resource>/hooks/use-<resource>.ts
frontend/src/features/<module>/<resource>/components/*-columns.tsx
frontend/src/features/<module>/<resource>/components/*-table.tsx
frontend/src/features/<module>/<resource>/components/*-form-dialog.tsx
frontend/src/features/<module>/<resource>/components/*-dialogs.tsx
frontend/src/features/<module>/<resource>/components/*-primary-buttons.tsx
frontend/src/features/<module>/<resource>/data/schema.ts
frontend/src/features/<module>/<resource>/index.tsx
frontend/src/routes/_authenticated/<module>/<resource>.tsx
frontend/src/constants/permissions.ts (add new permission keys)Follow the layer order strictly — each layer depends on the one above.
Read references/backend.md for complete code templates and patterns.
Quick reference for key conventions:
xid.New().String() in Ent schema DefaultFuncUpdate*Request (*string)domain.QueryParams, call qp.Paginate() (returns offset, limit)domain.RespSuccess(data) (code=0) / domain.RespError(msg) (code=1)context.WithTimeout + defer cancel()%w wrapping, map to HTTP status in controllerf.db, f.app, f.timeoutcasbinMiddleware.CheckAPIPermission()Follow the order: types → service → feature module → route file.
Read references/frontend.md for complete code templates and patterns.
Quick reference for key conventions:
response.data.data (outer .data = Axios, inner .data = domain.Response.Data)Date objectsURLSearchParams construction, snake_case to match backenduseTableUrlState hook syncs pagination/filters with URLopen === 'add' | 'edit' | 'delete')usePermission() hook, PERMISSIONS.SYSTEM.RESOURCE.ACTION constantssonner for success/error notifications.catch() defaultsShadmin uses a dual-layer permission model:
Backend (API access): Casbin checks (userID, path, method)
Frontend (UI visibility): Permission strings like "system:project:add"These are linked through the Role → Menu → API Resources binding:
bootstrap.InitApiResources)METHOD:/api/v1/path (e.g., GET:/api/v1/system/project)/api/v1/resources and stores in ZustandTo add permissions for a new feature:
bootstrap.InitApiResources; route inventory changes advance the authorization generation.frontend/src/constants/permissions.ts.authz_state.generation update commit together. Do not mutate the live Casbin Enforcer directly.Casbin snapshot lifecycle: Ent authorization relations are the source of truth. Each process builds a complete in-memory Enforcer snapshot and publishes it atomically; a committed authz_states.generation update triggers local synchronization, while AUTHZ_SYNC_POLL_INTERVAL_SECONDS provides low-frequency recovery polling (default one hour) for missed triggers, restarts, and cross-instance changes. Snapshots are not persisted through Casbin AutoSave. If a generation change is detected or cannot be checked, protected Casbin requests fail closed until a fresh snapshot is published. Keep the existing g/p semantics (active users/roles, public resources excluded, admin wildcard) unless a separately reviewed change intentionally changes them.
# Backend
go generate ./ent # If schema changed
go fmt ./... && go vet ./... # Format + static analysis
go test ./... # Run tests
swag init -g main.go --output ./docs # If Swagger annotations changed
# Frontend (from frontend/)
pnpm lint # ESLint
pnpm format:check # Prettier
pnpm build # Recommended if routes/build config changed// Success (HTTP 200/201)
type Response struct {
Code int `json:"code"` // 0 = success
Msg string `json:"msg"` // "OK"
Data interface{} `json:"data"` // payload
}
// Error (HTTP 400/404/500)
// Code = 1, Msg = error description, Data = nil
// Paginated response (in Data field)
type PagedResult[T any] struct {
List []T `json:"list"`
Total int `json:"total"`
Page int `json:"page"`
PageSize int `json:"page_size"`
TotalPages int `json:"total_pages"`
}Things to never do:
f.db, f.app, f.timeoutservices/ wrappersuseAuthStorecomponents/ui/ — shadcn-generated primitives/api/v1/resourcesFor detailed code templates and implementation patterns, read these as needed:
references/backend.md — Complete Go/Gin/Ent code templates for domain, schema, repository, usecase, controller, routes, and factory. Read when implementing backend features.references/frontend.md — Complete React/TypeScript code templates for types, API services, feature modules, hooks, tables, forms, dialogs, routes, and permissions. Read when implementing frontend features.The docs/getting-started/ directory contains comprehensive guides:
quickstart.zh.md / quickstart.en.md — Quick start guidearchitecture.zh.md / architecture.en.md — Architecture deep-divedevelopment.zh.md / development.en.md — Full CRUD walkthrough with exampledeployment.zh.md / deployment.en.md — Production deployment guide© ahaodev, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
SKILL.md and 2 other files (references) in .agent/skills/shadmin-dev of ahaodev/shadmin.
Open the folder on GitHubat commit c35806d
Shadmin Dev next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Shadmin Dev this skillahaodev/shadmin | 174 | — | ~2.7k | Automated safety check: Pass | MIT | |
| Web Artifacts Builderanthropics/skills | 180k | 40 repos | ~769 | Automated safety check: Pass | Apache-2.0 | |
| Creative Tim UI Blockscreativetimofficial/ui | 12k | — | ~2.1k | Automated safety check: Notes | MIT | |
| Animated React Component LibrariesHainrixz/editor-pro-max | 260 | 1 repos | ~5.7k | Automated safety check: Pass | Custom licence | |
| Morphous CatalogAmeyanagi/morphos | 102 | — | ~2.1k | Automated safety check: Pass | Apache-2.0 | |
| Buzzformbuildnbuzz/buzzform | 101 | — | ~1.5k | Automated safety check: Pass | MIT |
anthropics/skills
Builds multi-component claude.ai HTML artifacts as a small React, TypeScript and Tailwind project, then bundles it into one shareable HTML file.
creativetimofficial/ui
Helps install, generate and review Creative Tim UI blocks: shadcn/ui-based React and Tailwind sections that follow a restrained, production-minded design philosophy.
Hainrixz/editor-pro-max
Helps choose and drop in animated React components from Magic UI and React Bits for landing pages, marketing sites and dashboards, instead of hand-coding animations.
Ameyanagi/morphos
Create or refresh Morphous website design-system/theme bundles from animal, insect, plant, landscape, mineral, weather, or other nature motifs.
buildnbuzz/buzzform
A skill your agent uses when working with BuzzForm schema-driven forms, @buildnbuzz/form-core, @buildnbuzz/form-react, or any related APIs like defineSchema, InferType, FormProvider, useDataField…
LeastBit/Claude_skills_zh-CN
用于使用现代前端 Web 技术(React、Tailwind CSS、shadcn/ui)创建复杂的、多组件的 claude.ai HTML artifact 的工具套件。适用于需要状态管理、路由或 shadcn/ui 组件的复杂 artifact - 不适用于简单的单文件 HTML/JSX artifact。
ahaodev/shadmin
Safe cleanup of Shadmin's Go backend, React frontend, Go CLI, and docs — remove dead code, consolidate duplication, and improve maintainability without changing behavior or adding features.
ahaodev/shadmin
A skill your agent uses when the user asks to query Shadmin admin platform resources (users, roles, menus, registered API resources) from a terminal — for example "list shadmin users", "show shadmin…
Categories
Apply Shadmin feature-development standards (backend Go/Gin/Ent + frontend React/TS). Shadmin Dev is an agent skill from ahaodev/shadmin. Apply Shadmin feature-development standards (backend Go/Gin/Ent + frontend React/TS).
Shadmin Dev fits situations like: adding/modifying features; API routes/controllers/usecases/repositories; frontend pages/routes; React components.
Run `npx skills add ahaodev/shadmin --skill shadmin-dev -a claude-code`. Or copy the skill folder (.agent/skills/shadmin-dev in ahaodev/shadmin) into .claude/skills/shadmin-dev in your project. Claude Code loads it when a task matches its description.
Run `npx skills add ahaodev/shadmin --skill shadmin-dev -a codex`. Or copy the skill folder (.agent/skills/shadmin-dev in ahaodev/shadmin) into .agents/skills/shadmin-dev in your project. Codex loads it when a task matches its description.
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add ahaodev/shadmin --skill shadmin-dev -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/shadmin-dev, .gemini/skills/shadmin-dev, .github/skills/shadmin-dev and .opencode/skills/shadmin-dev in your project.
Going by SKILL.md and its folder, Shadmin Dev needs the command-line tools its instructions call (go and pnpm).
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
Shadmin Dev is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
About 2.7k tokens (SKILL.md is roughly 11k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 3.5k tokens, read only when the agent opens those files.
Skills that share tags, products or a category with Shadmin Dev: Web Artifacts Builder (anthropics/skills, 180k stars), Creative Tim UI Blocks (creativetimofficial/ui, 12k stars), Animated React Component Libraries (Hainrixz/editor-pro-max, 260 stars) and Morphous Catalog (Ameyanagi/morphos, 102 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
ahaodev (a GitHub user) maintains it in ahaodev/shadmin, which has 174 GitHub stars. The repository holds 3 skills in this directory. The repository was last updated on October 2, 2026.
Source: ahaodev/shadmin on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.