component-forge
包含脚手架与范式,减少重复工作并兼顾 RSC 与 WCAG 要求。
为 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).
帮我安装这个 skill:https://raw.githubusercontent.com/EliasOulkadi/shokunin/master/.pack/skills/component-forge/SKILL.mdcurl -fsSL "https://raw.githubusercontent.com/EliasOulkadi/shokunin/master/.pack/skills/component-forge/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