web-frontend
Use for any browser-rendered UI work. Triggers on React components, hooks, state, props, JSX, Next.js pages, App Router, SSR, RSC, server actions, Tailwind CSS classes, responsive layout, dark mode, styling, CSS, accessibility, ARIA, keyboard navigation, focus management, UI design systems, color palettes, typography, component architecture, compound components, frontend performance, LCP, Lighthouse, re-renders, bundle size, Playwright browser tests, Testing Library, Remotion video compositions, captions, animations. Covers design patterns, hover states, forms, modals, navigation, grids, and any .tsx/.jsx file editing.
معلومات المصدر
- المستودع
- george11642/george-plugins
- آخر نشاط في المصدر
- ١١ مارس ٢٠٢٦ في ٢٢:٤٢
- لغة SKILL.md المكتشفة
- الإنجليزية
- النجوم
- ٢
- التفرعات
- ٠
خيارات التثبيت
يُحدَّد Prompt الذي يراجع المصدر أولًا بشكل افتراضي. يمكنك التبديل إلى أمر مباشر أو تنزيل نسخة محلية.
مراجعة ملفات المصدر
اقرأ SKILL.md وأي ملفات مرافقة يعرضها SkillsMP قبل أن تقرر التثبيت.
مستكشف الملفات
14 ملفاتعرض SKILL.md
SKILL.md
تعليمات المصدر · معاينة للقراءة فقط- name
- web-frontend
- description
- Use for any browser-rendered UI work. Triggers on React components, hooks, state, props, JSX, Next.js pages, App Router, SSR, RSC, server actions, Tailwind CSS classes, responsive layout, dark mode, styling, CSS, accessibility, ARIA, keyboard navigation, focus management, UI design systems, color palettes, typography, component architecture, compound components, frontend performance, LCP, Lighthouse, re-renders, bundle size, Playwright browser tests, Testing Library, Remotion video compositions, captions, animations. Covers design patterns, hover states, forms, modals, navigation, grids, and any .tsx/.jsx file editing.
# Web Frontend
Layer 2 domain skill for all browser-side UI development. Routes to reference files and Layer 3 atomic skills by task type.
## Task Router
| Task Pattern | Reference | Layer 3 Skills |
|---|---|---|
| React component, hooks, state, props | `references/react-nextjs.md` | — |
| Next.js pages, App Router, SSR, RSC | `references/react-nextjs.md` | deploy-vercel |
| Styling, Tailwind, CSS, dark mode | `references/tailwind-patterns.md` | — |
| Accessibility, ARIA, keyboard nav, focus | `references/accessibility.md` | — |
| UI design system, UX guidelines, checklist | `references/ui-design-system.md` | — |
| UI style selection, glassmorphism, brutalism, etc. | `references/ui-design-styles.md` | — |
| Color palettes by product type | `references/ui-color-palettes.md` | — |
| Font pairings, Google Fonts, typography | `references/ui-font-pairings.md` | — |
| Chart types, data visualization | `references/ui-chart-types.md` | — |
| Landing pages, layout patterns, product-type mapping | `references/ui-layout-patterns.md` | — |
| Component architecture, composition, compound components | `references/component-architecture.md` | — |
| React/Next.js performance, re-renders, bundles, waterfalls | `references/vercel-patterns.md` | — |
| Frontend testing, Testing Library, Playwright, MSW | `references/frontend-testing.md` | testing-quality |
| Remotion video, animation, captions, sequencing | `references/remotion.md` | — |
## When to Use
Activate for any task involving:
- React/Next.js components, pages, or layouts
- Tailwind CSS, styling, responsive design
- UI/UX design decisions, color palettes, typography
- Accessibility audits or improvements
- Frontend performance optimization
- Component testing with Testing Library or Playwright
- Remotion video composition
## Layer 3 Skills (Atomic)
These tool-wrapper skills provide external integrations:
- **deploy-vercel** — Vercel deployment configuration and management
- **testing-quality** — Playwright browser automation, Testing Library, test methodology
- **auth-clerk** — Clerk authentication setup and protected routes
## Quick Decision Trees
### Styling Approach
```
Need design system from scratch? → references/ui-design-system.md
Existing design, need implementation? → references/tailwind-patterns.md
Performance issue with CSS? → references/vercel-patterns.md (rendering section)
```
### Testing Strategy
```
Unit test a component? → references/frontend-testing.md (Testing Library)
E2E browser test? → references/frontend-testing.md (Playwright)
Mock API calls? → references/frontend-testing.md (MSW)
Visual regression? → testing-quality skill
```
عرض على GitHub