Loading...
Loading...
Found 18 Skills
Expert guidance for Angular and TypeScript development focused on scalable, high-performance web applications
Design scalable React components using functional components, hooks, composition patterns, and TypeScript. Use when building reusable component libraries and maintainable UI systems.
Apply the formal standard for React component engineering focusing on accessibility, composition, and styling. Use for building professional, composable React artifacts. Use proactively when creating or reviewing React components. Examples: - user: "/component-create Button trigger" → build accessible button with asChild and keyboard map - user: "/component-review src/components/Input.tsx" → audit for accessibility and composition compliance - user: "Build a responsive slider" → select taxonomy type and implement with data attributes - user: "Review my layout component" → check for monolithic patterns vs composition
Use when creating page layouts without real content. Templates define the skeletal structure of pages using organisms, molecules, and atoms.
Principal-engineer-level React refactoring patterns for eliminating code smells. Covers prop drilling, state explosion, component composition, abstraction quality, coupling, hooks, rendering patterns, and testability. Use when refactoring existing React codebases, reviewing PRs for architectural issues, or identifying technical debt in React applications.
Use when writing or modifying React components, planning React features, or working with .jsx/.tsx files - provides modern React patterns with TypeScript, hooks usage, component composition, and common pitfalls to avoid
Use when building complex organisms from molecules and atoms like headers, footers, product cards, and sidebars. Organisms are distinct UI sections.
This skill should be used when the user asks about "Server Components", "Client Components", "'use client' directive", "when to use server vs client", "RSC patterns", "component composition", "data fetching in components", or needs guidance on React Server Components architecture in Next.js.
shadcn/ui expert guidance — CLI, component installation, composition patterns, custom registries, theming, Tailwind CSS integration, and high-quality interface design. Use when initializing shadcn, adding components, composing product UI, building custom registries, configuring themes, or troubleshooting component issues.
Svelte 5 patterns including TanStack Query mutations, shadcn-svelte components, and component composition. Use when writing Svelte components, using TanStack Query, or working with shadcn-svelte UI.
Brad Frost's Atomic Design for UI component hierarchy: atoms, molecules, organisms, templates. Activate when building user interfaces, creating design systems, organizing components, or structuring frontend code. Applies to any UI framework (React, Vue, SwiftUI, etc.).
Teaches Vue component fundamentals including markup, logic, and styles. Use when building or structuring Vue single-file components as the foundational building blocks of your application.