Core components, design systems, tokens, forms, animations, and world-class brand design specs.
| Type | Name | When to use | Tags | Action |
|---|---|---|---|---|
| Design | DES-8823 — High-Density Form | Dense data-entry screens and internal tools. | FormsDensity | |
| Skill | Tailwind Animation Recipes | Adding scroll-triggered reveals, hover micro-interactions, and page transitions. | TailwindAnimation | |
| Skill | Storybook Component Docs | Building a component library that needs interactive documentation and visual regression testing. | ReactDocumentationTesting | |
| Skill | Presentation Slide Builder | Group presentations, thesis defenses, conference talks, and lecture slides. | PresentationSlidevAcademic | |
| Skill | Skeleton Loader Generator | Replacing spinners with layout-stable skeleton loading states. | LoadingUXTailwind | |
| Skill | Responsive Bento Grid Layout | Dashboard overviews, complex data aggregation. | CSS GridLayout | |
| Skill | Toast Notification Center | Any app that needs non-blocking feedback — save confirmations, error alerts, undo actions. | ReactUXNotification | |
| Design | Data Table Pro | Dense data-entry screens and internal tools. | Data TableDensity | |
| Skill | Search & Filter Bar | List pages that need text search plus category/tag filtering without a sidebar. | ReactUXFilter | |
| Design | DES-1104 — Navigation Shell | App shells that need a stable primary navigation pattern. | NavigationShell | |
| Design | AI Chat Interface Kit | Building any LLM-powered chat or conversational interface. | AIChatDark Mode | |
| Skill | Pagination & Infinite Scroll | Long lists, search results, activity feeds that need both traditional pagination and modern infinite scroll. | ReactUXPerformance | |
| Design | Admin Panel Shell System | Internal tools, admin dashboards, and CMS backends. | AdminDashboardData Table | |
| Skill | Form Validation Builder | Building any data-entry form, from login to multi-step wizards. | FormsReactValidation | |
| Skill | Accessible Modal Dialog | Critical user interruptions, forms. | A11yReact | |
| Skill | Data Grid Component v2.4 | Ideal for displaying dense datasets where inline editing and robust sorting/filtering are required without sacrificing vertical real estate. | ReactTailwindHigh-Density | |
| Skill | Empty State Generator | Every screen that can be empty — first-run, zero results, 404, error boundaries. | ReactUXPattern | |
| Design | E-Commerce Product Grid | Online stores, marketplaces, and product catalogs. | E-CommerceGridCards |