component-forge

仓库创建 2026年5月12日最近提交 10 小时前SkillHot 收录 20 天前
▸ 精选理由

包含脚手架与范式,减少重复工作并兼顾 RSC 与 WCAG 要求。

这个 Skill 做什么

为 React/Vue/Svelte 生成生产级组件模板,涵盖所有状态与无障碍。

生成生产级的前端组件模板,覆盖 React、Vue 3 和 Svelte 5,包含所有状态(loading/empty/error/success/idle)、严格的 TypeScript、以及 WCAG 无障碍考量。用在要做可复用、健壮且可访问的 UI 组件或设计系统组件时。额外提供脚手架和参考模式,能把复杂状态、无障碍和服务端组件(RSC)一并处理好。

▸ 展开 SKILL.md 英文原文

Build production-grade components for React, Vue 3, and Svelte 5 with all states (loading, empty, error, success, idle), TypeScript strict, WCAG 2.2 accessibility, server components (RSC), and compound component patterns. Includes scaffold script, reference patterns, and template files for React and Vue. Use when user asks to create a UI component, frontend module, or design system component. Do NOT use for page layouts (use landing-craft), routing, or state management architecture (global stores).

开发编程组件可访问性TypeScript通用
110
Stars
14
Forks
40
仓库内 Skill
+7
7 日增星
安装 / 使用
给你的 Agent 一句话(通用)
帮我安装这个 skill:https://raw.githubusercontent.com/EliasOulkadi/shokunin/master/.pack/skills/component-forge/SKILL.md
或 curl 直取 SKILL.md
curl -fsSL "https://raw.githubusercontent.com/EliasOulkadi/shokunin/master/.pack/skills/component-forge/SKILL.md"
SKILL.MD 节选查看完整文件 ↗
# Component Forge

Build components that survive every state, at every screen size, under every edge case. Inspired by Heydon Pickering (Inclusive Components), React core team patterns, and Emil Kowalski's design engineering philosophy.

## Workflow

### Step 1: Determine component type

| Type | Description | Example |
|------|-------------|---------|
| Presentational | Pure rendering, props-driven | Button, Card, Badge |
| Composable | Wraps children with behavior | Modal, Tooltip, Accordion |
| Data-fetching | Reads from API/store | UserProfile, OrderList |
| Layout | Arranges children | Sidebar, Grid, Stack |
| Form | Input + validation | LoginForm, SearchInput |

### Step 2: Scaffold co
via SKILL·HOT · 数据来自 GitHub 公开信息 · 原文版权归作者所有